视差动画滚动效果

时间：2019-11-24 08:07:10

标签： javascript html css frontend

我一直想实现类似的效果，例如在这些苹果站点中，计算机动画会随着滚动而变化。

https://www.apple.com/macbook-pro-16/ https://www.apple.com/imac-pro/

在这些网站上搜索苹果如何实现视差效果时，我还没有明确发现完全相同的东西，这是如何实现的？

2 个答案:

答案 0 :(得分：0)

他们很可能使用three.js脚本来实现这一目标。但是您可以用更简单的方法来做到这一点，但是性能肯定会降低。您需要制作很多照片（就像在电影中那样一帧一帧地知道），然后在滚动事件中，必须用prevoius一张（如果您检测到滚动顶部）或下一张（如果您检测到向下滚动）替换照片）。如果您检测到最后一项或第一项，则停止劫持滚动事件，然后让浏览器执行该工作。

如果您想了解更多有关 three.js 的信息，可以在此处阅读以下内容：three.js - Learn

在this website的<body></body>元素的末尾，您可以看到他们添加了 three.js ： enter image description here

答案 1 :(得分：0)

我还在研究苹果在他们的网站上使用了什么，发现有一个名为Lottie的工具。

Lotttie是Airbnb的设计库，您可以找到它here enter image description here

“ Lottie是一个iOS，Android和React Native库，可实时渲染After Effects动画，使应用程序可以像使用静态图像一样轻松地使用动画。” 洛蒂（Lottie）也有可用的网络版本here

相关问题
最新问题