想請問這樣子的卷軸效果怎麼做？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

想請問這樣子的卷軸效果怎麼做？

網頁教學 css 學習 javascript 效果

akajoke 2022-12-31 19:47:23 ‧ 1398 瀏覽

分享至

我想要以下網站的卷軸效果。

https://www.astralweb.com.tw/restrict-submit-form-and-checkbox/

找了相關scroll的關鍵字只有查到：
怎麼讓網頁跳轉到已標記的地方(id)，然後CSS寫一個smooth，
上面這個網站的捲動效果滿有趣的，
想請教是怎麼做到的呢？

看更多先前的討論...收起先前的討論...

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2023-01-01 00:55:47 檢舉

其實就GOOGLE查，就有很多特效了。
至於怎麼做到
不外乎就是搭配動畫處理。現在已經有很多這種效果的套件在了。
如比較有名的 WOW

akajoke iT邦新手 5 級 ‧ 2023-01-01 09:52:11 檢舉

@㊣浩瀚星空㊣恩。我知道Google會有很多。
只是鄙人不才，關鍵字不太清楚，所以才會上來發問☆
已經有找到您提供的wow.js了，但還是很模糊。
我已經知道這是動畫處理（當然），這所以來問大概是什麼方向的「處理」。

還請閣下高明指教「多一點」關鍵字，讓我有方向找「那麼多」特效來參考。
煩請，感恩。

re.Zero iT邦研究生 5 級 ‧ 2023-01-03 01:26:59 檢舉

maybe: SmoothScroll.js

揮揮手 iT邦研究生 5 級 ‧ 2023-01-03 11:10:28 檢舉

星空大上禮拜才說想要全站你最黑
這禮拜立馬就作動了哈哈

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

1 個回答

0

揮揮手

iT邦研究生 5 級 ‧ 2023-01-03 11:09:16

最佳解答

其實可以直接用頁面去分析

給你CSS效果關鍵字是 transition
試試看能不做到hover 變動寬度跟字體大小
再結合SmoothScroll.js
做調整

太久沒寫css 忘記直接用 transition
還想用一堆更複雜的動畫結果去分析一下
看該站只用了transition

回應 3
分享
檢舉

akajoke iT邦新手 5 級 ‧ 2023-01-05 15:33:29 檢舉

雖然講的很不清楚不過有個方向感謝前輩

揮揮手 iT邦研究生 5 級 ‧ 2023-01-05 15:46:40 檢舉

那我補充準確一點

看transition 他其實是變形用
注意你是多css 屬性變動要用 ALL
演示網頁
https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

2.該網站有使用SmoothScroll.js
為了滾動平滑感
如果不使用SmoothScroll.js 你直接往下一步走

3.在你設定的高度
改變該dom css 屬性值配合
transition 值的變化
就可以完成你要的效果

akajoke iT邦新手 5 級 ‧ 2023-01-07 04:56:07 檢舉

有哦大哥講解後變得很到位最佳解答當之無誤!
感謝前輩

登入發表回應

我要發表回答

立即登入回答

參賽組數

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邦幫忙