滑鼠移動時字會往前衝這個要怎麼實現呢?

看板Web_Design作者 (ipad)時間5年前 (2018/12/09 13:08), 編輯推噓3(304)
留言7則, 3人參與, 6年前最新討論串1/1
大家好~ 在逛網站時看到這個網站,字體會藉由滑鼠滾動往前跑,請問這個效果要利用什麼方式完 成呢? https://npp.vote 謝謝大家的觀看~ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 39.8.71.20 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1544332099.A.60D.html

12/09 14:05, 5年前 , 1F
想知道
12/09 14:05, 1F

12/09 15:23, 5年前 , 2F
首頁含3個class 裡面各包svg圖片(文字) 每個class含
12/09 15:23, 2F

12/09 15:24, 5年前 , 3F
transform和opacity,一開始第一個class的opacity為1
12/09 15:24, 3F

12/09 15:28, 5年前 , 4F
其他為0,藉由滾動偵測修改opacity切換圖片(文字)
12/09 15:28, 4F

12/09 15:32, 5年前 , 5F
字會往前跑是因為transform:translated3d(0,0,1000px)
12/09 15:32, 5F

12/09 15:41, 5年前 , 6F
另外他不是用js去修改opacity,而是用class去切換的
12/09 15:41, 6F

01/12 21:40, 6年前 , 7F
推樓上,感覺又學到一課
01/12 21:40, 7F
文章代碼(AID): #1S3AD3OD (Web_Design)