視差滾動(Parallax Scrolling)插件補充

13. Windows

Windows (github) 是一個讓你用占據整個屏幕的section來構建單面網站的插件。該插件提供給你一些回調函數，當新的section出現在可視區并且并且處理快照時被調用，所以你可以輕松的繼承它來自定義導航菜單或更多的東西。下面是一個例子：譯者注：點擊每個章節，僅Chrome和Safari可用。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$('.window').<a title="windows" href="http://www.woiweb.net/tag/windows">windows</a>({ ????snapping: true, ????snapSpeed: 500, ????snapInterval: 1100, ????onScroll: function(scrollPos){ ????????// scrollPos:Number ????}, ????onSnapComplete: function($el){ ????????// after window ($el) snaps into place ????}, ????onWindowEnter: function($el){ ????????// when new window ($el) enters viewport ????} });

14. Cool Kitten

Cook Kitten (github) 是一個用于視差滾動網站的響應式的框架，它把你網站中的section組織成一個幻燈片并且使用 jQuery Waypoints 插件來檢測它們何時進入到可視區，并觸發導航菜單的更新。譯者注：點擊導航菜單看效果，支持Firefox,Chrom,Opera,Safari,IE9+。

15. Sticky

Sticky (github) 是一個當頁面滾動時使你頁面上的任何元素始終保持顯示的插件，這能使你單頁網站展示一個粘性的導航菜單或者分享工具條很便利。 它可直接使用，僅有的選項是頂部的offset：

1	$("#sticker").sticky({topSpacing:0});

16. Super Scrollorama

Super Scrollorama (github)是一個滾動動畫很酷的jQuery插件，它可使你定義當一個元素出現在視圖中或特定的滾動點上的tweens和animations。

1 2 3 4 5

$(document).ready(function() { ??var controller = $.superscrollorama(); ??controller.addTween('#fade', ????TweenMax.from($('#fade'), .5, {css:{opacity:0}})); });

?

17. Stellar.js

Stellar.js (github)是一個對任何滾動元素提供視差滾動效果的jQuery插件，它在特殊元素中尋找任何視差背景和元素，并且當元素滾動時重新放置它們。你可通過使用data 屬性控制元素的滾動速度：

1	$('#main').stellar();

18. Scrollpath

Scrollpath (github)是另一個滾動插件，但與前面的插件有所不同的是你可以自己定義滾動路徑。該插件使用canvas的寫作風格來繪制路徑，使用 moveTo, lineTo 和arc. 為幫助路徑正確，在初始化插件時可使帶路徑的canvas遮罩層。譯者注：這個真心贊一下。

參考：

• http://woiweb.iteye.com/blog/1878697
• http://www.woiweb.net/50-amazing-jquery-plugins-2.html