velocity.js實現頁面滾動切換效果

今天介紹一個Javascript的小型的動畫插件velocity.js,可以方便高效的開發一個具有多頁面滾動切換效果的網站。

瀏覽器支持

velocity.js支持IE8+、Chrome、Firefox等瀏覽器,並支持Andriod以及IOS。

我們開發一個工程,裡面有一組相關聯系的大型頁面。不能做到在一張頁面中把它們展現出來,同時又希望能夠有效的閱讀到這些相關內容,可以通過做一些有趣的效果來幫住我們實現,通過頁面滾動切換效果,可以很有效的制作一個吸引人眼球的網頁。

所有的特效應用都是通過velocity.js。Velocity.js是一款動畫切換的jQuery插件,它重新實現瞭jQuery的jQuery.animate()方法從而加快動畫切換的速度。Velocity.js隻有7k的大小,它不僅包含瞭jQuery.animate()的所有功能,並且還包含瞭顏色切換、轉換(transform)、循環、緩動、CSS切換、Scroll功能,它是jQuery、 jQuery UI、CSS變換 在動畫方面的最佳組合。Velocity.js在內部實現中使用瞭jQuery的jQuery.queue()方法,因此它比 jQuery的jQuery.animate()、jQuery.fade()、jQuery.delay()方法更加流暢,其性能也高於CSS的animation屬性

所有的效果在小型終端都無法實現展示,例如手機和智能手表。所以最好在web上面來展示他的功能,但是對於小型終端我們也做瞭相應的適配,以便於瀏覽

要點

velocity.js是jQuery的動畫插件,具有更快更高效的動畫切換效果
2014年5月3日,julian在其GitHub上發佈瞭velocity.js
velocity.js是一款小而強大的插件

下面我們來研究它的具體實現方法
為瞭應用動畫和滾動效果,我們必須得在標簽中進行data-hijacking和data-animation自定義的設置來實現這一功能

<body data-hijacking="off" data-animation="scaleDown">

以上代碼的意思是啟動動畫效果data-animation為按比例縮減scaleDown,data-animation一共定義瞭7種不同的動畫效果,分別為scaleDown,rotate,fixed,gallery,parallax,opacity,catch.我們可以根據自己的需求,進行任意一種效果的應用。並且我將示例代碼做瞭7個頁面來分別呈現它的效果。設置數據攔截屬性data-hijacking為關閉,你也可以設置為on,來展示它的效果。以上兩個屬性均來自velocity.js

html中Dom結構

在這個結構中我們想展示5個不同的一組頁面,我們把他分為五個 section ,同時定義瞭2個用來進行切換作用的圖標按鈕

<body data-hijacking="off" data-animation="scaleDown">
    <section class="cd-section visible">
        <div><h2>頁面滾動切換效果1</h2></div>
    </section>
    <section class="cd-section"><div>
            <h2>頁面滾動切換效果2</h2></div>
    </section>
    <section class="cd-section">
        <div><h2>頁面滾動切換效果3</h2></div>
    </section>
    <section class="cd-section">
        <div><h2>頁面滾動切換效果4</h2></div>
    </section>
    <section class="cd-section">
        <div><h2>頁面滾動切換效果5</h2></div>
    </section>
    <nav>
        <ul class="cd-vertical-nav">
            <li><a href="#0" class="cd-prev inactive">Next</a></li>
            <li><a href="#0" class="cd-next">Prev</a></li>
        </ul>
    </nav> <!-- .cd-vertical-nav -->
</body>

css樣式添加

通過對每個 section 進行樣式的設計,方便我們查看和交互,大傢可以根據需求在做一些相應樣式。

.cd-section:first-of-type > div {
  background-color: #2b334f;
}
.cd-section:nth-of-type(2) > div {
  background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
  background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
  background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
  background-color: #f06a59;
}

js事件處理

當我們設定瞭數據攔截屬性data-hijacking為關閉後,所有動畫效果均按照它窗口的相對位置進行原比例縮放。當觸發瞭動畫事件之後,我們會對當前窗口頁面的樣式包括縮放比例由小到大,或者由大到小。以及相關透明度變化講解。

下面詳細展開對以下代碼的講解。首先windowHeight是指你設備窗口的本身高度是一個固定值,jQuery(window).scrollTop()是頁面中滾動條的高度,是一個范圍值從上往下滑動時(0~所有頁面高度),從下往上滑動的時候是從(所有頁面高度~0)。actualBlock.offset().top是一組固定值,代表每一個 section 頁面到頂部的距離分別是(0,每張頁面高度,每張頁面高度*2,每張頁面高度*3。。。)每張頁面高度依據設備而定。弄明白瞭這些代碼的意思過後,我們可以看到下面的判斷語句當offset值大於負的窗口高度時,即從下往上滑動時,當前頁面由大到小切換,並且透明度不改變,y軸的值不斷的增加,頁面逐漸退出當前視圖窗口。當offset值小於窗口高度時,即從上往下滑動時,當前頁面由小到大切換,並且透明度逐漸透明,y軸的值為零,進行縮放。陰影模糊半徑改變。

//actualBlock is the section we are animation
var offset = $(window).scrollTop() - actualBlock.offset().top,
    windowHeight = $(window).height();

if( offset >= -windowHeight && offset <= 0 ) {
    // section entering the viewport
       translateY = (-offset)*100/windowHeight;
       scale = 1;
      opacity = 1;
} else if( offset > 0 && offset <= windowHeight ) {
    //section leaving the viewport 
       scale = (1 - ( offset * 0.3/windowHeight));
    opacity = ( 1 - ( offset/windowHeight) );
    translateY = 0;
    boxShadowBlur = 40*(offset/windowHeight);
}

以上事件處理之後,還有兩個點擊事件,點擊那兩個切換按鈕,進行頁面直接切換,同時還有velocity.js的事件處理函數例如對動畫效果 translateUp,translateDown,scaleDown等做的一些效果。

$.Velocity
    .RegisterEffect("scaleDown", {
        defaultDuration: 800,
        calls: [ 
            [ { opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1]
        ]
    });

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: