PTT數位生活區 / Web_Design

[問題] 這個網頁特效怎麼製作？

看板Web_Design作者時間4年前 (2020/06/01 11:57), 4年前編輯推噓3(3推 0噓 13→)
留言16則, 2人參與, 4年前最新討論串1/1
最一開始還沒進網站的水滴畫面， 第二個水滴畫面，是一張png的圖，不知道是css動畫還是jquery？ 和後面的年份圓圈翻過來， 要怎麼做出類似的？ 目前只知道一開始有load 4個js檔進來 http://www.taiyeng.com.tw/en/about 謝謝~~ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 60.245.65.135 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1590983847.A.DD9.html ※ 編輯: yg1985 (60.245.65.135 臺灣), 06/01/2020 12:49:48 ※ 編輯: yg1985 (60.245.65.135 臺灣), 06/01/2020 13:35:58
推
06/01 15:16, 4年前 , 1F
水滴的部分跑太快看不出來，倒是下面年度圓圈年度(css:b
06/01 15:16, 1F
→
06/01 15:16, 4年前 , 2F
order-radius:50%,X軸-100deg)，然後scroll到特定位置時
06/01 15:16, 2F
→
06/01 15:16, 4年前 , 3F
，script加入css aos-animate rule，在1.2秒內x軸翻正
06/01 15:16, 3F
推
06/13 23:40, 4年前 , 4F
把body下第一個div元素的pace-inactive改成pace-active
06/13 23:40, 4F
→
06/13 23:40, 4年前 , 5F
就可以讓動畫一直播~ 然後他的原理很簡單, 水滴落下跟飛濺
06/13 23:40, 5F
→
06/13 23:40, 4年前 , 6F
效果看成兩個部分
06/13 23:40, 6F
→
06/13 23:40, 4年前 , 7F
上半部只是一個裝著水滴圖片的element
06/13 23:40, 7F
→
06/13 23:40, 4年前 , 8F
讓他不斷執行落下並透明化的動畫
06/13 23:40, 8F
→
06/13 23:40, 4年前 , 9F
下半部則是水花飛濺的動畫, 兩者時間上搭配好就可以了
06/13 23:40, 9F
→
06/13 23:40, 4年前 , 10F
實際上這個例子好像是用jQuery的動畫+paeudo element
06/13 23:40, 10F
→
06/14 00:23, 4年前 , 11F
一個簡單的demo會像這樣 https://tinyurl.com/y7vy8nxq
06/14 00:23, 11F
推
06/14 00:26, 4年前 , 12F
那個網站水滴落下後的飛濺效果則是透過border-radius畫的橢
06/14 00:26, 12F
→
06/14 00:26, 4年前 , 13F
圓
06/14 00:26, 13F
→
06/14 00:28, 4年前 , 14F
這些都可以在pace-active裡面的裡面的pace-progress元素觀
06/14 00:28, 14F
→
06/14 00:28, 4年前 , 15F
察到
06/14 00:28, 15F
→
06/14 00:29, 4年前 , 16F
更正,好像不是jQuery動畫, 就一樣是css keyframes
06/14 00:29, 16F
‣ 更多 yg1985 的文章
文章代碼(AID): #1Ur7odtP (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 yg1985 的文章
文章代碼(AID): #1Ur7odtP (Web_Design)