作者yg1985 ()
看板Web_Design
標題[問題] 這個網頁特效怎麼製作？
時間Mon Jun 1 11:57:25 2020
最一開始還沒進網站的水滴畫面，
第二個水滴畫面，是一張png的圖，不知道是css動畫還是jquery？
和後面的年份圓圈翻過來，
要怎麼做出類似的？
目前只知道一開始有load 4個js檔進來
http://www.taiyeng.com.tw/en/about
謝謝~~
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 60.245.65.135 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=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
1F：推 kentyeh: 水滴的部分跑太快看不出來，倒是下面年度圓圈年度(css:b 06/01 15:16
2F：→ kentyeh: order-radius:50%,X軸-100deg)，然後scroll到特定位置時 06/01 15:16
3F：→ kentyeh: ，script加入css aos-animate rule，在1.2秒內x軸翻正 06/01 15:16
4F：推 XDon: 把body下第一個div元素的pace-inactive改成pace-active 06/13 23:40
5F：→ XDon: 就可以讓動畫一直播~ 然後他的原理很簡單, 水滴落下跟飛濺 06/13 23:40
6F：→ XDon: 效果看成兩個部分 06/13 23:40
7F：→ XDon: 上半部只是一個裝著水滴圖片的element 06/13 23:40
8F：→ XDon: 讓他不斷執行落下並透明化的動畫 06/13 23:40
9F：→ XDon: 下半部則是水花飛濺的動畫, 兩者時間上搭配好就可以了 06/13 23:40
10F：→ XDon: 實際上這個例子好像是用jQuery的動畫+paeudo element 06/13 23:40
12F：推 XDon: 那個網站水滴落下後的飛濺效果則是透過border-radius畫的橢 06/14 00:26
13F：→ XDon: 圓 06/14 00:26
14F：→ XDon: 這些都可以在pace-active裡面的裡面的pace-progress元素觀 06/14 00:28
15F：→ XDon: 察到 06/14 00:28
16F：→ XDon: 更正,好像不是jQuery動畫, 就一樣是css keyframes 06/14 00:29