1.單頁式滾動動畫(PC端常見JS)###
skrollr.js (感覺前幾年在國外使用率比較高)
e.g:
國外網(wǎng)站：
1）http://www.flatvsrealism.com/
2 ) http://www.fontwalk.de/03/
3 ) http://fluger.com/
4 ) http://www.evanshalshaw.com/more/bondcars/c25.html
5 ) http://guibento.com/ScrollMagic
e.g:
1）http://buntspenden.bleech.de/de/
2 ) http://www.flyacts.com/multi-channel-app/
3 ) http://alfredservice.com/
4 ) http://appliancetecltd.com/
5 ) http://www.lempens-design.com/
JQuery 插件
-
jQuery Waypoints.js
(兼容zepto)
e.g:
http://guibento.com/
2.canvas###
creat.js (國內(nèi)常用谱邪，其中preload.js作為預加載的JS使用率最高)
-
pixi.js
e.g:
1 ) http://www.flatvsrealism.com/
2）http://www.fontwalk.de/03/canvas下的矢量圖像繪制
paper.js
矢量圖型繪制腳本，即使AI腳本環(huán)境的Scriptographer
e.g:
http://fluger.com/error ( 該網(wǎng)站的404頁面 )jQuery.tagcanvas
JQuery插件
e.g:
http://budoucnost.utb.cz/
3.翻頁式JS###
JQuery插件
-
jquery.fullPage.js
國內(nèi)常用的一款
e.g:
1 ) 百度百科——年終盤點
2 ) 網(wǎng)易郵箱6.0版：改變庶诡，不止所見
3 ) 郵箱大師2014
4）騰訊互動娛樂-騰訊互動娛樂官方網(wǎng)站-讓想象綻放
4.SWF控制###
JQuery插件
5.GIF實現(xiàn)###
- css3實現(xiàn)
（使用keyframes控制background-position的變化惦银，在animation配合steps使用）
-js實現(xiàn)（配合控制 background-position）
【以上兩種實現(xiàn)方法詳情見\Component\frames animation文件下的frames animation.html】
JQuery插件
-
jani.js
e.g:
國外網(wǎng)站：
1)http://www.flatvsrealism.com/
6.檢測&優(yōu)雅降級###
-
Modernizr.js
簡單介紹：
HTML5 Modernizr - HTML5 中文教程 - 極客學院Wiki
http://wiki.jikexueyuan.com/project/html5/modernizr.html
7.兼容###
- html5shiv.js
(兼容IE6-8)
8.數(shù)字動畫效果###
9.美化滾動條###
JQuery插件
-
jquery.nicescroll.js
(還有對應的插件jquery.nicescroll.plus.js)
e.g:
http://www.flatvsrealism.com/
10.圖片預加載###
- preload.js (creat.js的)
JQuery插件
jQueryLoader
e.g:
http://www.fontwalk.de/03/
11.UI###
JQuery UI
jQuery UI 教程 | 菜鳥教程
http://www.runoob.com/jqueryui/jqueryui-tutorial.html
e.g:
http://budoucnost.utb.cz/
12. JS模塊化###
- require.js
- sea.js
- vue.js
-
head.js
相比于前者，更加輕量級末誓，適合用于小型項目
e.g:
http://whois.wildlife.la/
13.布局###
14.3D###
15. SWF 轉換 HTML###
- swiffy.js
e.g:
http://17grad.com/like
16.動畫###
JQuery插件
-
Velocity.js
實現(xiàn)頁面元素中的飛入扯俱，飛出，旋轉喇澡、顏色變換迅栅，esaing效果的jquery動畫插件
e.g:
http://budoucnost.utb.cz/
17.鼠標滾動方向與位置判斷###
JQuery.waypoints
一款非常不錯的jQuery滾動監(jiān)聽插件Waypoints.js插件_Jquery教程_B5教程網(wǎng)
http://www.bcty365.com/content-47-2583-1.html
非常用###
sprintf.js
JS中實現(xiàn)sprintf
sizzle.js
解析jQuery DOM的選擇器引擎,13年左右在國外PC網(wǎng)站比較常見，當時號稱業(yè)界第一快晴玖，可不依賴JQuery單獨使用
e.g:
http://www.fontwalk.de/03/
jQuery Form.js
JQuery插件 - 表單插件
e.g:
http://guibento.com/
jquery.isotope.js
JQuery插件 - 分類過濾與排序布局插件
e.g:
http://guibento.com/
jquery-ui-rotatable
JQuery插件 - div隨鼠標滾動而旋轉（此時屏幕無滾動條）
e.g:
http://budoucnost.utb.cz/
國內(nèi)：
1.網(wǎng)易###
PC端：
1.全屏式動畫#####
jquery(mixNIE).1.11.js
(1.9以上版本不兼容IE8 读存，推測是為了兼容性)snsShare.js
網(wǎng)易的分享插件jquery.swfobject.1-1-1.js
jquery 的swf插件jquery.mousewheel.min.js
jquery的滾動事件插件jquery.fullPage.js
jquery的全屏swpie類插件
案例：
1）史詩級新坐騎毒魘來襲-《天諭》官方網(wǎng)站
http://tianyu.163.com/2016/duyan/?from=banner
2.騰訊###
PC端：
1.下拉翻頁式
jquery-1.12.4.min.js
(1.9以上版本不兼容IE8 ，推測是為了兼容性)jquery.easing.1.3.js
jquery的easing插件jquery.fullPage.js
jquery的全屏swpie類插件milo-min.js
這是個短小精悍的樣式選擇庫呕屎，如果用jquery只是用來選取樣式對象的让簿，那么，用mini吧秀睛，更小更快
案例：
1）靈芝派對-劍靈官方網(wǎng)站-騰訊游戲
http://bns.qq.com/act/a20161120version/index.html#home
