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

[yg1985 ()]

最一開始還沒進網站的水滴畫面，
第二個水滴畫面，是一張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
推 kentyeh: 水滴的部分跑太快看不出來，倒是下面年度圓圈年度(css:b
→ kentyeh: order-radius:50%,X軸-100deg)，然後scroll到特定位置時
→ kentyeh: ，script加入css aos-animate rule，在1.2秒內x軸翻正
推 XDon: 把body下第一個div元素的pace-inactive改成pace-active
→ XDon: 就可以讓動畫一直播~ 然後他的原理很簡單, 水滴落下跟飛濺
→ XDon: 效果看成兩個部分
→ XDon: 上半部只是一個裝著水滴圖片的element
→ XDon: 讓他不斷執行落下並透明化的動畫
→ XDon: 下半部則是水花飛濺的動畫, 兩者時間上搭配好就可以了
→ XDon: 實際上這個例子好像是用jQuery的動畫+paeudo element
→ XDon: 一個簡單的demo會像這樣 https://tinyurl.com/y7vy8nxq
推 XDon: 那個網站水滴落下後的飛濺效果則是透過border-radius畫的橢
→ XDon: 圓
→ XDon: 這些都可以在pace-active裡面的裡面的pace-progress元素觀
→ XDon: 察到
→ XDon: 更正,好像不是jQuery動畫, 就一樣是css keyframes