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

網頁設計網頁 vue

googlemap 2019-11-08 11:49:31 ‧ 3584 瀏覽

分享至

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

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

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

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

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

阿展展展 iT邦好手 1 級 ‧ 2019-11-08 12:02:40 檢舉

移動的花可以偵測滑動方向，反方向移動就可
景深比較複雜看他是切幾張圖然後做些微位移你這個它是固定時間軸的所以時間到就往下個方向移動

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 }} |

直播中

2 個回答

dragonH

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

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

這應該沒有什麼 lib 能用

大概就是 on scroll event

觸發那些 animate

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

差不多的東西

不過這應該也算 parallax

所以應該也能用這個

codepen

回應 1
分享
檢舉

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

H大，萬歲

登入發表回應

sion

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

按右鍵檢視原始碼進去偷阿
先去CSS檔找到那張會動的圖片

再去JS檔找這個程式碼區段

看起來是這行會動
data-friction-x關鍵字拿去會狗就會找到Parallax.js
然後可以開始學了

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙