iT邦幫忙

0

這類的JS特效需要找什麼關鍵字?

先謝過各位大大,小的是JS新手,因為非本科系又沒去外面上課
現在寫網頁東卡西卡,有很多特效是主管看了就說他也要,但是我做不出來QQ
想找codepen但不知道關鍵字是什麼...

如同這些網頁的往上滾動時會隨著移動一點點的花
https://ore.ski/

或是隨著滑鼠,背景圖片會些微移動
https://azurlane-anime.jp/

有看了一下關鍵字可能是CSS的animation特效?
跪求有簡單的參考可以看 QQQ (用的框架是vue)

(不好意思,文章有重發,希望這次發在對的地方了...)

移動的花可以偵測滑動方向,反方向移動就可
景深比較複雜 看他是切幾張圖 然後做些微位移 你這個它是固定時間軸的 所以時間到就往下個方向移動
ccutmis iT邦高手 2 級 ‧ 2019-11-08 12:07:59 檢舉
Google搜 'javascript mousemove background animation' 優土伯有拍片教學
giulian iT邦新手 4 級 ‧ 2019-11-08 13:00:19 檢舉
M關鍵字找滾動視差或Parallax scrolling
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
dragonH
iT邦超人 5 級 ‧ 2019-11-08 11:58:37

如同這些網頁的往上滾動時會隨著移動一點點的花..

這應該沒有什麼 lib 能用

大概就是 on scroll event

觸發那些 animate

或是隨著滑鼠,背景圖片會些微移動

差不多的東西

不過這應該也算 parallax

所以應該也能用這個

codepen

甲土豆 iT邦新手 5 級 ‧ 2019-11-11 09:16:38 檢舉

H大 ,萬歲 /images/emoticon/emoticon32.gif

0
sion
iT邦新手 4 級 ‧ 2019-11-11 11:33:20

按右鍵檢視原始碼進去偷阿/images/emoticon/emoticon39.gif
先去CSS檔找到那張會動的圖片
https://ithelp.ithome.com.tw/upload/images/20191111/20117695VRfp7ZljjT.png
再去JS檔找這個程式碼區段
https://ithelp.ithome.com.tw/upload/images/20191111/20117695cPOwePXi96.png
看起來是這行會動
data-friction-x關鍵字拿去會狗就會找到Parallax.js
然後可以開始學了/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答