Hakadao
- -
Hakadao's Blog

明日方舟官網3D輪播效果還原

演示網站 Gihub Pages
演示網站 Netlify

前言

之前所做的方舟官網的輪播效果還原,一邊探索一邊製作。講老實,最終的效果我覺得有點勉強。我一直以為視差效果是最難,做到後面發覺,輪播的效果才是最麻煩的。

視差

之前所做的方舟官網的輪播效果還原,視差效果那裏是最容易實現,使用 JS 變更 CSS 的 transform 屬性就能搞掂。值得一提的是視差過後是有個平滑結束的效果,可以透過 requestAnimationFrame() 方法平滑結束。

寫法參考了以下的codepen案例。

See the Pen
smooth mouse move follow
by Nano (@nanonansen)
on CodePen.

粒子效果

粒子效果用到了particles.js這個JS函數庫,原版的官網輪播的後面還有粒子矩形與黃色的多邊形運動動畫效果,但是我能力不足,不清楚如何實現。

輪播圖

這部份寫得很亂,我也不知道如何講起= =

本站文章除注明转载/出处外,均为本站原创或翻译。若要转载请注明出处,尊重他人劳动成果。
本文链接:https://www.hakadao.top/projects/1581.html

發佈回覆

textsms
account_circle
email

Hakadao's Blog

明日方舟官網3D輪播效果還原
演示網站 Gihub Pages 演示網站 Netlify 前言 之前所做的方舟官網的輪播效果還原,一邊探索一邊製作。講老實,最終的效果我覺得有點勉強。我一直以為視差效果是最難,做到後面發覺,輪播…
掃描 QR Code 繼續閱讀
2021-11-10