如何使元素在特定点后停止滚动？

Question

I want to replicate a part of this page, if you scroll down a bit you see a picture of a graph and some text. Does anyone know how they did the scrolling effect on the photo and text? And the text appears after a certain point, how did they do that?

Answer 1

It sounds like there are two questions being asked here. One being how to only display items once they are already within the viewport, and the other being how to apply a parallax effect.

For displaying items only once they are within viewport, ScrollReveal looks like a tool that would took the trick. You can check it out here: https://scrollrevealjs.org/

As for the parallax effect, I made a super lightweight Javascript class that you can use. Check out the source code here:

http://codepen.io/rodomeista/pen/vGqWXr

There are a few things you will need to update in your code to get this working.

1. Copy all of Javascript code into your main JS file.
2. Add the 'parallax-content' class to any items you wish to apply the effect to.
3. Specify the 'parallax-offset' and the 'parallax-axis' attributes on the DOM element in question.

Exampe:

Let's say you were to have an image element that looks like so

<img src = "./path/to/image.png" />

And I want to apply a subtle parallax effect along the y axis. All I would need to do is adjust attribute like so:

<img src = "./path/to/image.png" class = "parallax-content" data-parallax-offset = "-50" data-parallax-axis = "y" />

Now run your code and see it in action! Feel free to play around with the data-parralax-offset number to get the speed right for your needs. I'm happy to answer any questions about the code.

Good luck!