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

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

▲ 點入其中一個函數可以看到三種使用方式,當然還有用動態圖表來呈現動畫速度變化,都可以參考!
贊助廣告 ‧ Sponsor advertisements
FTP 技術問題探討:目錄只能顯示一萬個檔案或子目錄
📆 2019-03-30
📁
網站技術, 伺服器
Node.js:Webpack 封裝 CSS、SCSS 成單一 JS 教學(使用 VS Code)
📆 2019-08-19
📁
軟體應用, 網站技術, CSS, Sass/SCSS, JavaScript, Node.js, Webpack
JavaScript:游標碰觸子元素使父元素樣式變更
📆 2019-11-10
📁
網站技術, HTML, CSS, JavaScript
Overlay Scrollbars:jQuery 自定義捲軸、可單純使用 JS,半透明且可自動隱藏
📆 2019-01-19
📁
網站技術, HTML, CSS, JavaScript, jQuery
WordPress 外掛推薦列表(2016、2017 舊版)
📆 2016-02-05
📁
網站技術, 推薦列表, 架站程式, WordPress
CSS:文字光亮特效
📆 2013-01-01
📁
網站技術, CSS
Git 版本控制:「.gitignore」失效?跟著我操作解決問題!
📆 2023-03-18
📁
軟體應用, 網站技術, 程式設計
Git 版本控制:將專案上傳至遠端存放庫(使用 VS Code、GitHub)
📆 2019-09-24
📁
軟體應用, 網站技術, 程式設計
留言區 / Comments
萌芽論壇