Easing 函數速查表:網頁動畫執行速度函數查詢,可用 CSS、SCSS 或 jQuery
2019/02/08
萌芽站長
1,976 0
網站技術 , HTML , CSS , JavaScript , jQuery
「Easing 函數速查表」由 Andrey Sitnik 提供,各國家的貢獻者協助翻譯,因此網站還支援非常多的語言,包含正體中文(繁體中文)唷!我們前端網頁設計師常常需要製作網頁互動動畫,動畫執行一般預設都是 linear 模式,也就是線性,這就會顯得效果很呆版,沒有速度變化,現實世界中所有動態的變化基本上都不是線性,有可能由快到慢,也有一下快一下慢等,現實世界的變化更多,當然我們只要做出一點速度變化,動畫就會顯得特別吸引人,因此就有熱心的工程師提供了函數大全,只要複製貼上就可以使用,完全開源!
基本上適用於 CSS、SCSS 或 jQuery,前兩者複雜的函數不知元就要靠最後者,但我會建議用前兩者,不用加裝外掛增加載入的元素,速度理論更快,不過如果你需要複雜的函數,jQuery 也不差,我們很多網頁互動特效其實單單 CSS 是不夠的,有時候 jQuery 可以做到 CSS 做不到的功能。
網站方面都有非常詳細的使用說明與簡介,如果您本身就有在做前端設計,用起來可就相當輕鬆啦!只要選擇自己需要的函數,就可以複製原始碼到自己的原始碼中運用,至於要如何運用就看你的作品需要怎樣呈現啦!
▲網站提供的函數總共有 30 個,非常足夠!
▲ 點入其中一個函數可以看到三種使用方式,當然還有用動態圖表來呈現動畫速度變化,都可以參考!
贊助廣告 ‧ Sponsor advertisements
instant.page:預載技術、預測使用者點擊進而加速載入網頁
📆 2019-02-22
📁
網站技術, HTML, JavaScript
【技巧】網站設計必要元素:導航
📆 2013-11-16
📁
網站技術
CSS:模糊效果的美化邊框
📆 2013-01-01
📁
網站技術, CSS
【架站資源】000Webhost免費虛擬主機
📆 2014-01-22
📁
網站技術, 架站資源
Sass/SCSS 初嘗試,新手入門語法教學 ◆ 進階的 CSS:巢狀結構、變數、函數、迴圈與繼承等
📆 2019-03-19
📁
網站技術, Sass/SCSS
CSS backdrop-filter 原生背景毛玻璃
📆 2020-08-26
📁
網站技術, CSS
Java Server Pages (JSP)(Visual Studio Code 擴充功能):讓 VSCode 支援 JSP
📆 2019-03-26
📁
軟體應用, 網站技術, JSP
Node-RED:讀取及查詢 MySQL 資料庫中的資料表
📆 2021-11-18
📁
網站技術, 資料庫, Node.js, SQL, Node-RED
留言區 / Comments
萌芽論壇