skrollr --中文教程

使用方法

首先你需要引入skrollr.min.js文件，然后在文檔加載完成后調用init()函數

<script type="text/javascript" src="skrollr.min.js"></script>
    <script type="text/javascript">
    var s = skrollr.init();
    </script>
</body>

改變背景的例子，當滾動條在頂部的時候顏色是rgb(0,0,255)。當滾動500px顏色是rgb(255,0,0)，你只需要寫出關鍵幀的狀態，skrollr會自己添加過度幀。

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

View in browser

默認情況下skrollr認為頁面可以滾動到500px急即使你的頁面長度不夠500，如果想阻止這種情況發生只要使用forceHeight屬性就可以默認是true，將其設為false就可以阻止：

skrollr.init({
        forceHeight: false,
        easing: {
            vibrate: function(p) {
                return Math.sin(p * 10 * Math.PI);
            }
        }
    });

最好不要使用#00f或者#0000ff，最好使用rgb或者hsl因為他們會導致不一樣的動畫效果，通常情況下hsl會更加酷炫。（這里美人也沒看太懂，試了試16禁止的顏色也是有效果的）

<div style="line-height:30px;font-size:20px;background:#ccc;" data-0="transform:rotate(0deg);" data-500="transform:rotate(90deg);"></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>

View in browser

skrollr為你處理所有這些討厭的CSS前綴。

skrollr允許非線性動畫，你可以吧所謂的easing function放到屬性后面的 方括號里面，還可以的通過easings 參數自定義運動函數：

<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>

View in browser

從skrollr 0.6.0開始支持移動端

兩個模式 absolute mode和relative mode

absolute mode

格式data-[offset]-[anchor] offset可以使任意整數 默認值是0 anchor可以是 start或者end

• data-0 = data-start = data-0-start: 滾動條在位置0
• data-100 = data-100-start: 滾動條滾動100px.
• data--100 = data--100-start: 滾動條滾動-100px. (這個看起來是沒有意義的，但是在relative mode里面會用到).
• data-end = data-0-end: 滾動條距離底部為0的時候.
• data-100-end: 100px 滾動條距離底部為100px的時候.
• data--100-end: 滾動條距離底部為-100px的時候

relative mode

格式data-[offset]-(viewport-anchor)-[element-anchor] offset可以使任意整數 默認值是0 viewport-anchor表示視口的底部或者頂部可以是top、center 或者 bottom element-anchor表示相對元素的頂部或者底部 可以是top、center 或者 bottom

• data-top = data-0-top = data-top-top = data-0-top-top: 當參照元素的頂部和視口頂部對齊.
• data-100-top = data-100-top-top: 當參照元素的頂部距離視口頂部100px.
• data--100-top = data--100-top-top: 當參照元素的頂部距離視口頂部-100px.
• data-top-bottom= data-0-top-bottom: 當參照元素的底部在視口底部對齊.
• data-center-center = data-0-center-center: 當參照元素的中部在視口的中間.
• data-bottom-center = data-0-bottom-center: 當參照元素和視口的底部對齊.

有時候你可能需要參照另一個元素來確定關鍵幀你需要用到 data-anchor-target

<div data-anchor-target="#foo"></div>


View in browser

如果文檔結構有變化需要調用 refresh() 函數

 

 absolute mode 和 relative mode 的offset也可是是百分比 寫法是<div data-_foobar="left:0%;" data-10p="left:50%;" data-30p="left:100%;"></div>

分別表示滾動條滾動視口的10% 和 30%

 absolute mode 和 relative mode 的offset前面都是可以放一個常量的，但是這個常量需要一個標識符使用的時候需要在這個標識符前面加下划線：

定義：skrollr.init({
    constants: {
        foobar: 1337
    }
});

調用：

<div data-_foobar="left:0%;" data-_foobar--100="left:50%;" data-_foobar-100="left:100%;"></div>

<!--Equal to-->

<div data-1337="left:0%;" data-1237="left:50%;" data-1437="left:100%;"></div>

 

添加Class

skrollr會自動html標簽添加class"skrollr"並且會移除 class "no-skrollr"（如果存在的話）還會根據檢測結果添加class "skrollr-desktop"或者"skrollr-mobile"以表明運行的平台

會給關鍵幀添加 class e "skrollable-before","skrollable-between" 或者"skrollable-after" skrollr會根據關鍵幀所在的位置確定添加哪一個

動態改變屬性

從skrollr 0.6.24開始你可以skrollr改變屬性值用法和css一樣只需要在屬性前面加上"@"符號：

<polygon
    points='426,720   -200,720   -200,0   955,0'
    data-0="@points:426,720   -200,720   -200,0   955,0"
    data-500="@points:380,720   -200,720   -200,0   1302,0">
</polygon>注意：每次改變屬性里面的數字個數必須保持一致

自動補全css屬性

<div data-100="left:0%;" data-200="top:0%;" data-300="left:50%;" data-400="top:50%;"></div>相當於

<div data-100="left:0%;top:0%;" data-200="left:0%;top:0%;" data-300="left:50%;top:0%;" data-400="left:50%;top:50%;"></div>

所以不要這樣寫，應該每次都寫出改變了的css 屬性

注意事項

• 所有的數字值都需要單位0也不例外
• 復合寫法 margin:0px 0px 0px 0px;對應 margin:0px 100px 50px 3px; 但是不能對應 margin:10px;值的數量必須保持一致，否則會出錯
• css3 transform 里面的屬性順序必須一致 例如 rotate(0deg) translate(10px) 可以對應 rotate(0deg) translate(10px) 但是不可以寫成 translate(10px) rotate(0deg)
• 動態改變顏色不支持 名稱（例如：red ，green）和 16進制色值（例如：#ff0）必須使用 rgb(),rgba(), hsl()或者 hsla()
• 而且必須對應使用 不能第一個關鍵幀使用rgba()下一個就換成hsla()

參數options skrollr.init([options])

smoothScrolling=true在滾動條停止的時候動畫不會立即停止，而是有一個過渡，這個過渡時間用smoothScrollingDuration來設定在元素上可以通過設置data-smooth-scrolling屬性為on或者off來確定當前元素是否執行此緩動

代碼：

<div style="line-height:30px;font-size:20px;background:#ccc;" data-0="background:rgb(253,246,232);transform:rotate(0deg);" data-500="background:rgb(246,135,242);transform:rotate(360deg);" data-smooth-scrolling='off'><div>

<script type="text/javascript">
            skrollr.init({
        forceHeight: false,
        smoothScrolling:true,
        smoothScrollingDuration:500,
        easing: {
            vibrate: function(p) {
                return Math.sin(p * 10 * Math.PI);
            }
        }
    });

constants={}

<script type="text/javascript">
            skrollr.init({
        forceHeight: false,
        smoothScrolling:true,
        smoothScrollingDuration:500,
        easing: {
            vibrate: function(p) {
                return Math.sin(p * 10 * Math.PI);
            }
        }

　　constants:{

　　　　myconst:300

　　}
    });

<div data-_myconst></div> 相當於 <div data-_300></div>

<div data-_myconst-200></div>相當於<div data-500></div>

<div data-_myconst-top></div>相當於<div data-300-top></div>

注意使用的時候要在常量標識符之前加下划線

 

scale=1

比例尺（這個沒看太懂）貌似就是說文檔默認是使用最大 的關鍵幀來確定文檔高度，文檔高度加上視口高度是默認的最大高度，skrollr會盡可能的滾動上去，如果你的animation過快或者過慢可以調整這 個值，如果設置了forceHeight=false這個值將會被忽略，scale也會影響constants但是scale只會在absolute mode中起作用

forceHeight=true

當你設置了data-1200而視口的滾動到文檔底部還沒有達到這個值的時候，會繼續向下滾，設置了forceHeight=false就可以阻止它繼續滾動

mobileCheck=function() {...}

這個參數是可以自己定義一個檢測移動端的檢測函數來覆蓋默認的檢測函數：

function() {
    return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
}

mobileDeceleration=0.004 

慣性參數，在移動端滑動，抬起手指之后加速或減速1表示不使用慣性

edgeStrategy='set'

定義滾動條超過所定義的關鍵幀范圍之外的時候元素的狀態默認值是set，可能的值set，ease，reset，set和ease類似都會保持第一幀或者最后一幀的狀態，只不過ease會根據easing里面定義的函數變化，reset會使元素的狀態回到最初定義的（注意：並不是第一個關鍵幀）

skrollrBody='skrollr-body'

 beforerender 和 render

每一次渲染之前或之后調用的函數

eg. skrollr.init({
    render: function(data) {
        //Log the current scroll position.
        console.log(data.curTop);
    }
});

兩個函數一個在渲染之前調用，一個在渲染之后調用，所需參數是一個對象，格式如下：

{
    curTop: 10, //the current scroll top offset
    lastTop: 0, //the top value of last time
    maxTop: 100, //the max value you can scroll to. curTop/maxTop will give you the current progress.
    direction: 'down' //either up or down
}

beforerender如果返回值是false的話，就會阻止渲染

    var param={
        curTop: 10, //the current scroll top offset
        lastTop: 0, //the top value of last time
        maxTop: 100, //the max value you can scroll to. curTop/maxTop will give you the current progress.
        direction: 'down' //either up or down
    }
        skrollr.init({
        constants:{
            myconst:300
        },
        render:function(param){
            console.log(param.maxTop)
            console.log(document.body.offsetHeight)
        
    });}

 

keyframe（沒看明白）

 easing

運動曲線，定義新的或者覆蓋原有的曲線：

• linear: default 線性.
• quadratic: To the power of two. So 50% looks like 25%.
• cubic: To the power of three. So 50% looks like 12.5%
• begin/end: They always return 0 or 1 respectively. No animation.
• swing: Slow at the beginning and accelerates at the end. So 25% -> 14.6%, 50% -> 50%, 75% -> 85.3%
• sqrt: Square root. Starts fast, slows down at the end.
• outCubic
• bounce: Bounces like a ball. See https://www.desmos.com/calculator/tbr20s8vd2 for a graphical representation.

skrollr.init({
    easing: {
        //This easing will sure drive you crazy
        wtf: Math.random,
        inverted: function(p) {
            return 1 - p;
        }
    }
});

skrollr.get()

返回skrollr對象

refresh([elements])

刷新可以傳入dom對象 ，Array, NodeList 或者jquery對象。不傳入參數表示刷新所有

getScrollTop()

獲取當前的scrollTop

getMaxScrollTop()

獲取最大scrollTop

setScrollTop(top[, force = false])

設置當前scrollTop

如果force=true那么會直接無動畫的到達設置的scrollTop默認是有動畫的

isMobile()

返回是否運行在移動端