Easing 函數速查表:網頁動畫執行速度函數查詢,可用 CSS、SCSS 或 jQuery
2019/02/08
萌芽站長
2,112 0
網站技術 , HTML , CSS , JavaScript , jQuery
「Easing 函數速查表」由 Andrey Sitnik 提供,各國家的貢獻者協助翻譯,因此網站還支援非常多的語言,包含正體中文(繁體中文)唷!我們前端網頁設計師常常需要製作網頁互動動畫,動畫執行一般預設都是 linear 模式,也就是線性,這就會顯得效果很呆版,沒有速度變化,現實世界中所有動態的變化基本上都不是線性,有可能由快到慢,也有一下快一下慢等,現實世界的變化更多,當然我們只要做出一點速度變化,動畫就會顯得特別吸引人,因此就有熱心的工程師提供了函數大全,只要複製貼上就可以使用,完全開源!
基本上適用於 CSS、SCSS 或 jQuery,前兩者複雜的函數不知元就要靠最後者,但我會建議用前兩者,不用加裝外掛增加載入的元素,速度理論更快,不過如果你需要複雜的函數,jQuery 也不差,我們很多網頁互動特效其實單單 CSS 是不夠的,有時候 jQuery 可以做到 CSS 做不到的功能。
網站方面都有非常詳細的使用說明與簡介,如果您本身就有在做前端設計,用起來可就相當輕鬆啦!只要選擇自己需要的函數,就可以複製原始碼到自己的原始碼中運用,至於要如何運用就看你的作品需要怎樣呈現啦!

▲網站提供的函數總共有 30 個,非常足夠!

▲ 點入其中一個函數可以看到三種使用方式,當然還有用動態圖表來呈現動畫速度變化,都可以參考!
贊助廣告 ‧ Sponsor advertisements
Two-Factor(WordPress 外掛):讓網站支援兩步驟驗證登入
📆 2021-06-09
📁
網站技術, 資訊安全, 架站程式, WordPress
Node-RED:Dashboard 使用 button 和 ui control 切換 tab
📆 2021-12-28
📁
網站技術, 物聯網, Node.js, Node-RED
Tilt.js:浮動方塊製作、視差懸停傾斜效果 jQuery 插件
📆 2019-01-28
📁
網站技術, HTML, JavaScript, jQuery
Cloudflare SSL Test:測試網站 SSL 是否正確
📆 2019-02-28
📁
網路應用, 網站技術
jQuery「jquery.rss」將 RSS 轉成 HTML
📆 2017-07-14
📁
網站技術, jQuery, RSS
JavaScript 抓參數可指定間隔時間不斷重新載入指定網址(OBS 瀏覽器自動重載解決方案)
📆 2019-08-22
📁
軟體應用, 多媒體, 網路應用, 網站技術, JavaScript, 串流錄製
解決搜尋引擎蜘蛛導致主機資源滿載和網站掛掉的問題、.htaccess 擋壞蜘蛛
📆 2017-09-05
📁
網站技術, 伺服器
WordPress 外掛推薦列表(萌芽站長提供,4/7隨時更新)
📆 2019-04-06
📁
網站技術, 推薦列表, 架站程式, WordPress
留言區 / Comments
萌芽論壇