skrollr——兼容性超強的視差滾動js插件

零、前言

我忘了第一次見到視差滾動的頁面是什么時候，但是當時的感覺我到現在都忘不了。

“原來網頁還可以這么設計！”

一、skrollr介紹

skrollr是一個開源的視差滾動js插件，兼容性極強，可以兼容各種瀏覽器（包括IE）以及手機端（IOS/Android），基本上沒有兼容不了的。

skrollr自身體積只有8k，加上兼容ie和手機端的插件也不到30k，對於一個展示用頁面來說這個體積確實不大了。

二、skrollr用法簡介

先來看一個skrollr的官方Demo吧。

怎么樣，是不是很厲害？

下面我翻譯一下官方的三個小例子，大家可以感受一下。我強烈推薦你去skrollr的github主頁自己看看，相信我，你的英語足夠用。

1、目標：滾動條在最上方時，讓div的background-color為#00f；當滾動條滾動到500px時div的background-color變化為#f00；

代碼：

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

查看效果

看出來怎么用了嗎？設置元素的“data-開始位置”和“data-結束位置”的值即可，skrollr會自動處理顏色隨滾動漸變效果。

2、目標：讓div轉起來

代碼：

<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>

查看效果

你可以定義任意多個效果，skrollr都可以讓他們隨着滾動變化。

3、目標：讓div搖滾起來

代碼：

<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>

查看效果

可以使用skrollr提供的一些easing函數，改變運動方式。

4、目標：使用相對位置而不是絕對位置

代碼：

<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>

查看效果

看到了嗎，我們把“data-500”換成了“data-top”！skrollr不僅可以處理絕對位置，也可以處理相對位置！

關於相對位置的詳細介紹請查看sskrollr的github主頁。

 

好了，簡單的教程到此結束，相信大家對skrollr已經有了一個初步的了解，剩下的，just do it by yourself！

三、注意事項

1、例子中只有兩個“data-xxx”，但是你可以添加任意多的“data-xxx”，skrollr會自動創建之間的過渡動畫。

2、兩個“data-xxx”的值最好對應，比如 data-0="top:0%;left:0%;" data-500="top:10%;left:10%;" 而不是 data-0="left:0%;" data-500="top:10%;left:10%;" 如果缺項的話skrollr可能會創建出來不符合你想法的過渡動畫。