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

留言區 / Comments

萌芽論壇