javascript - 如何在一页网站上滚动半静态照片(内部示例)

Question

我如何实现类似 Janne.me 的效果？

当您滚动页面时，背景图片出现，但随后图片停止，只有内容文本继续滚动，然后，当内容文本向上滚动时，另一张图片开始出现她的段落。

关于如何将图像“停止”特定“时间”的任何想法？

谢谢

Answer 1

这种效果称为视差。有几个很好的库可以帮助您做到这一点:

• 滚动魔术:https://github.com/janpaepke/ScrollMagic (我相信需要 jQuery)
• 放松一下:https://github.com/dixonandmoe/rellax ( Vanilla js)
• react 视差:https://github.com/RRutsche/react-parallax (如果你使用的是 React)

或者，这可以使用纯 CSS 来完成，正如 David Walsh 在这里概述的那样:https://davidwalsh.name/parallax

希望这对您有所帮助!