好用的67個前端工具、函式庫和資源

這個清單包含許多種類的資源，所以這裡我將它們分組整理。

Javascript 函式庫

Particles.js — 一個用來在web 中創建酷炫的浮動粒子的函式庫

#Three.js  — 一個用來在web 中建立3d 物件和3d 空間的函式庫

Fullpage.js— 快速實作全螢幕滾動特性

Typed. js — 打字機效果

Waypoints.js — 捲動到某個元素位置時觸發一個功能

Highlight.js — web語法高亮

Chart.js — 使用JavaScript 建立漂亮的圖表

Instantclick — 能夠明顯加速網站載入時間，滑鼠hover 時預載入資源

Chartist — 另一個圖表庫

Motio — 一個基於動畫和平移的雪碧圖庫

#Animstion — CSS 實作動畫過渡的jQuery 外掛程式

Barba.js — 串流頁面過渡

#TwentyTwenty 

#TwentyTwenty 

##的視覺化diff 工具

Vivus.js

 — 在SVG 上繪製動畫

Wow.js

 — 滾動時展現動畫########Wow.js### — 滾動時展現動畫##### ####Scrolline.js### — 頁面滾動時顯示滾動進度##########Velocity.js### — 快速流暢的JavaScript 動畫###

Animate on scroll — 漂亮的頁面滾動元素動畫

Handlebars.js — Javascript 範本

jInvertScroll

— 視差滾動

One page scroll — 又一個頁面滾動庫

Parallax.js — 對智慧型裝置方向變化做出回應的視差引擎

Typeahead.js — 搜尋補全

Dragdealer.js — 酷炫拖曳

Bounce .js — 創造酷炫的CSS3 動畫

Pagepiling.js — 全螢幕捲動

#Multiscroll.js — 兩列垂直反反向滾動

Favico.js — 動態favicon

Midnight.js — 固定頭部切換效果

# Anime.js — 動畫庫

Keycode — 取得鍵盤按鍵的JavaScript keycode

Sortable — 拖曳外掛程式

Flexdatalist — 自動補全

Slideout.js — 行動應用程式存取權

#######Jquerymy### — 使用jQuery實現雙向資料綁定#########Cleave.js ###— 即時格式化輸入內容#########Page### — 客戶端單頁應用程式路由###

Selectize.js — 用來新增tag 的Hybrid 選擇框

Nice select — 建立漂亮的選擇框的jQuery 函式庫

Tether — 使用固定定位來建立相關元素

Shepherd.js — 為應用程式建立新手引導

Tooltip — tooltip 提示框

Select2 — Jquery 選擇框外掛

IziToast — 通知彈窗實作

IziModal — 模態框實作

CSS 函式庫/ 設計相關

Animate.css — 動畫庫

#Flat UI Colors — 扁平化設計配色

Material design lite— 基於Google material design 的框架

Colorrrs — 隨機顏色產生器

##Colorrrs — 隨機顏色產生器

Section separators — CSS 實作區域分割

Topcoat — 框架

#Create ken burns effect — 使用CSS3 動畫實作Ken burns 特效

DynCSS — 為CSS 加入function，動態化CSS

Magic animations — CSS3 實作動畫特效

#CSSpin — css spinners 集合

####Feather icons### — Icon 集合####

Ion icons — Icon 集合

Font awesome — Icon 集合

Font generator — 組合多個字型創建混合字體

On/Off switch — 使用CSS 建立on/off 開關、radio 按鈕

UI Kit — 框架

Bootstrap — 框架

Foundation — 框架

有用的產品/連結

cheatsheet — 可以寫在中的所有標籤

Ghost — 基於Node.js 的部落格平台

What runs — 一個用於網站技術分析的Chrome 外掛程式

Learn anything — 一個強大的用於分析某個主題的心智圖

#

以上是好用的67個前端工具、函式庫和資源的詳細內容。更多資訊請關注PHP中文網其他相關文章！