如何让元素在某个点之后停止滚动？

Question

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

Answer 1

听起来这里有两个问题。一种是如何仅在视口内显示项目，另一种是如何应用视差效果。

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

至于视差效果，我制作了一个你可以使用的超轻量级Javascript类。在这里查看源代码：

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

您需要在代码中更新一些内容才能实现此功能。

1. 将所有Javascript代码复制到主JS文件中。
2. 将'parallax-content'类添加到您希望应用效果的任何项目。
3. 在相关DOM元素上指定'parallax-offset'和'parallax-axis'属性。

示例：

假设你有一个看起来像这样的图像元素

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

我想沿y轴应用微妙的视差效果。 我需要做的就是调整属性，如下所示：

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

现在运行您的代码并查看它的实际运行情况！您可以随意使用data-parralax-offset数字来获得满足您需求的速度。我很乐意回答有关代码的任何问题。

祝你好运！