skrollr 中文教程

時間 2019-12-09

標籤 skrollr 中文教程简体版

原文原文鏈接

個人博客搬家到https://www.w2le.com/了

skrollr 0.6.29

skrollr是一個單獨的視差滾動的JavaScript庫，移動端（Android，iOS，等）和pc均可以使用，壓縮後大小僅僅不到12Kjavascript

使用方法

首先你須要引入skrollr.min.js文件，而後在文檔加載完成後調用init()函數css

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

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

View in browsercss3

默認狀況下skrollr認爲頁面能夠滾動到500px急即便你的頁面長度不夠500，若是想阻止這種狀況發生只要使用forceHeight屬性就能夠默認是true，將其設爲false就能夠阻止：git

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

最好不要使用#00f或者#0000ff，最好使用rgb或者hsl由於他們會致使不同的動畫效果，一般狀況下hsl會更加酷炫。（這裏美人也沒看太懂，試了試16禁止的顏色也是有效果的）dom

<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
    }
});

調用：

添加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>至關於

因此不要這樣寫，應該每次都寫出改變了的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來肯定當前元素是否執行此緩動

代碼：

constants={}

　　constants:{

　　　　myconst:300

　　}
});

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

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;
        }
    }
});