簡體 English 中英

視差動畫滾動效果

[英]Parallax-Animation Scrolling Effect

原文 2019-11-24 08:07:10 7 2 javascript/ html/ css/ frontend

我一直想在這些蘋果網站中實現類似的效果，其中計算機動畫隨滾動而變化。

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

搜索如何實現 Apple 在這些網站中所做的那種視差效果，我沒有明確發現完全相同的東西，這是如何實現的？

2 個解決方案

他們通常使用了three.js腳本來實現這一點。 但是你可以用更簡單的方式來完成，但性能肯定會更差。 您需要制作大量照片（您知道在電影中一幀一幀），然后在滾動事件中，您必須用前一張（如果檢測到滾動頂部）或下一張（如果檢測到向下滾動）替換照片）。 如果您檢測到最后一項或第一項，那么您將停止劫持滾動事件並讓瀏覽器完成這項工作。

如果您想了解更多abotthree.js，您可以在此處閱讀更多相關信息： three.js - Learn

在這個網站的<body></body>元素的末尾，你可以看到他們添加了three.js ：

我還在他們的網站上研究了蘋果使用的內容，並發現了一個名為 Lottie 的工具。

Lotttie 是 Airbnb 的一個設計庫，你可以在這里找到它

“Lottie 是一個 iOS、Android 和 React Native 庫，可以實時渲染 After Effects 動畫，讓應用程序可以像使用靜態圖像一樣輕松地使用動畫。” Lottie 也有一個可用的網絡版本在這里

“不同”的視差滾動效果

[英]“Different” Parallax Scrolling effect

了解 PARALLAX 滾動效果 - Javascript

[英]Understanding PARALLAX scrolling effect - Javascript

如何制作這種效果（滾動視差）？

[英]How to make this effect (parallax on scrolling)?

垂直滾動視差背景效果

[英]Vertical scrolling parallax background effect

>高度的平滑滾動效果（視差效果）

[英]Smooth scrolling effect for > Height (parallax effect)

使用JQuery動畫的視差滾動失敗

[英]Parallax Scrolling with JQuery animation stumbles

視差效果會干擾平滑的滾動效果

[英]Parallax effect is interfering with smooth scrolling effect

如何使用 CSS 創建圖像滾動視差效果？

[英]How to create image scrolling parallax effect with CSS?

好的滾動視差效果不起作用

[英]Nice scrolling parallax effect isn't working

視差滾動效果，從頁面上的特定百分比開始？

[英]Parallax scrolling effect, start at certain percentage on page?

暫無

暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 “不同”的視差滾動效果了解 PARALLAX 滾動效果 - Javascript 如何制作這種效果（滾動視差）？垂直滾動視差背景效果 >高度的平滑滾動效果（視差效果）使用JQuery動畫的視差滾動失敗視差效果會干擾平滑的滾動效果如何使用 CSS 創建圖像滾動視差效果？好的滾動視差效果不起作用視差滾動效果，從頁面上的特定百分比開始？

相關標簽

粵ICP備18138465號 © 2020-2024 STACKOOM.COM