Easing 函數速查表:網頁動畫執行速度函數查詢,可用 CSS、SCSS 或 jQuery
2019/02/08
萌芽站長
1,985 0
網站技術 , HTML , CSS , JavaScript , jQuery
「Easing 函數速查表」由 Andrey Sitnik 提供,各國家的貢獻者協助翻譯,因此網站還支援非常多的語言,包含正體中文(繁體中文)唷!我們前端網頁設計師常常需要製作網頁互動動畫,動畫執行一般預設都是 linear 模式,也就是線性,這就會顯得效果很呆版,沒有速度變化,現實世界中所有動態的變化基本上都不是線性,有可能由快到慢,也有一下快一下慢等,現實世界的變化更多,當然我們只要做出一點速度變化,動畫就會顯得特別吸引人,因此就有熱心的工程師提供了函數大全,只要複製貼上就可以使用,完全開源!
基本上適用於 CSS、SCSS 或 jQuery,前兩者複雜的函數不知元就要靠最後者,但我會建議用前兩者,不用加裝外掛增加載入的元素,速度理論更快,不過如果你需要複雜的函數,jQuery 也不差,我們很多網頁互動特效其實單單 CSS 是不夠的,有時候 jQuery 可以做到 CSS 做不到的功能。
網站方面都有非常詳細的使用說明與簡介,如果您本身就有在做前端設計,用起來可就相當輕鬆啦!只要選擇自己需要的函數,就可以複製原始碼到自己的原始碼中運用,至於要如何運用就看你的作品需要怎樣呈現啦!
▲網站提供的函數總共有 30 個,非常足夠!
▲ 點入其中一個函數可以看到三種使用方式,當然還有用動態圖表來呈現動畫速度變化,都可以參考!
贊助廣告 ‧ Sponsor advertisements
cPanel:備份
📆 2016-07-11
📁
網站技術, 伺服器
Brackets:佈景主題可更換軟體介面與原始碼顏色標記風格
📆 2018-09-21
📁
軟體應用, 網站技術
JPEG 的兩種渲染方式:Baseline JPEG(標準型)和 Progressive JPEG(漸進式)
📆 2018-11-17
📁
多媒體, 網路應用, 網站技術, 靜圖處理
WordPress 被安裝神秘的外掛,接著訪客隨機被導引至詐騙廣告
📆 2021-06-07
📁
網站技術, 資訊安全, 架站程式, WordPress
Bracket Pair Colorizer(Visual Studio Code 擴充功能):匹配括弧顏色標記、括弧內線條強調
📆 2019-02-11
📁
軟體應用, 網站技術
Git 版本控制:建立分支、切換分支、合併分支(使用 VS Code)
📆 2019-09-22
📁
軟體應用, 網站技術, 程式設計
PHP:glob() 取得匹配之檔案路徑、filesize() 取得指定檔案大小
📆 2021-10-22
📁
網站技術, PHP
Node.js:Gulp 運行 Autoprefixer,批次處理 CSS 供應商前綴問題
📆 2019-03-27
📁
網站技術, CSS, JavaScript, Node.js, Gulp
留言區 / Comments
萌芽論壇