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

Question

我想复制this页面的一部分，如果向下滚动一下，就会看到图形和一些文本的图片。 有谁知道他们是如何做的照片和文字上的滚动效果？文本出现后，他们是怎么做到的？

Answer 1

听起来好像有两个问题在这里问。一个是如何只显示项目，一旦它们已经在视口内，另一个是如何应用视差效果。

对于仅在视口内显示项目时才显示项目，ScrollReveal看起来像是一个可以使用该技巧的工具。你可以看看这里： https://scrollrevealjs.org/

至于视差效果，我做了一个超轻量级的JavaScript类，你可以使用。点击这里，查看源代码：

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

有你需要在你的代码更新到得到这个工作的几件事情。

1. 将所有Javascript代码复制到您的主JS文件中。
2. 将'视差内容'类添加到您想要应用效果的任何项目。
3. 指定相关DOM元素上的'视差偏移'和'视差轴'属性。

Exampe：

比方说，你是有一个看起来像这样

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

的图像元素，我想申请沿y轴的微妙的视差效果。 所有我需要做的就是调整属性，就像这样：

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

现在运行你的代码，看看它在行动！随意使用数据 - 偏移 - 偏移号码来获得适合您需求的速度。我很乐意回答有关代码的任何问题。

祝你好运！