快捷導(dǎo)航

velocity.js實(shí)現(xiàn)頁(yè)面滾動(dòng)切換效果

更新時(shí)間：2021年10月09日 17:08:00 作者：蟲蟲教父

這篇文章主要介紹了velocity.js實(shí)現(xiàn)頁(yè)面滾動(dòng)切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天介紹一個(gè)Javascript的小型的動(dòng)畫插件velocity.js，可以方便高效的開發(fā)一個(gè)具有多頁(yè)面滾動(dòng)切換效果的網(wǎng)站。

瀏覽器支持

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

我們開發(fā)一個(gè)工程，里面有一組相關(guān)聯(lián)系的大型頁(yè)面。不能做到在一張頁(yè)面中把它們展現(xiàn)出來，同時(shí)又希望能夠有效的閱讀到這些相關(guān)內(nèi)容，可以通過做一些有趣的效果來幫住我們實(shí)現(xiàn)，通過頁(yè)面滾動(dòng)切換效果，可以很有效的制作一個(gè)吸引人眼球的網(wǎng)頁(yè)。

所有的特效應(yīng)用都是通過velocity.js。Velocity.js是一款動(dòng)畫切換的jQuery插件，它重新實(shí)現(xiàn)了jQuery的jQuery.animate()方法從而加快動(dòng)畫切換的速度。Velocity.js只有7k的大小，它不僅包含了jQuery.animate()的所有功能，并且還包含了顏色切換、轉(zhuǎn)換(transform)、循環(huán)、緩動(dòng)、CSS切換、Scroll功能，它是jQuery、 jQuery UI、CSS變換在動(dòng)畫方面的最佳組合。Velocity.js在內(nèi)部實(shí)現(xiàn)中使用了jQuery的jQuery.queue()方法，因此它比 jQuery的jQuery.animate()、jQuery.fade()、jQuery.delay()方法更加流暢，其性能也高于CSS的animation屬性。

所有的效果在小型終端都無(wú)法實(shí)現(xiàn)展示，例如手機(jī)和智能手表。所以最好在web上面來展示他的功能，但是對(duì)于小型終端我們也做了相應(yīng)的適配，以便于瀏覽。

要點(diǎn)

velocity.js是jQuery的動(dòng)畫插件，具有更快更高效的動(dòng)畫切換效果
2014年5月3日，julian在其GitHub上發(fā)布了velocity.js
velocity.js是一款小而強(qiáng)大的插件

-

下面我們來研究它的具體實(shí)現(xiàn)方法

為了應(yīng)用動(dòng)畫和滾動(dòng)效果，我們必須得在標(biāo)簽中進(jìn)行data-hijacking和data-animation自定義的設(shè)置來實(shí)現(xiàn)這一功能

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

以上代碼的意思是啟動(dòng)動(dòng)畫效果data-animation為按比例縮減scaleDown，data-animation一共定義了7種不同的動(dòng)畫效果，分別為scaleDown,rotate,fixed,gallery,parallax,opacity,catch.我們可以根據(jù)自己的需求，進(jìn)行任意一種效果的應(yīng)用。并且我將示例代碼做了7個(gè)頁(yè)面來分別呈現(xiàn)它的效果。設(shè)置數(shù)據(jù)攔截屬性data-hijacking為關(guān)閉，你也可以設(shè)置為on,來展示它的效果。以上兩個(gè)屬性均來自velocity.js

html中Dom結(jié)構(gòu)

在這個(gè)結(jié)構(gòu)中我們想展示5個(gè)不同的一組頁(yè)面，我們把他分為五個(gè) section ,同時(shí)定義了2個(gè)用來進(jìn)行切換作用的圖標(biāo)按鈕

<body data-hijacking="off" data-animation="scaleDown">
    <section class="cd-section visible">
        <div><h2>頁(yè)面滾動(dòng)切換效果1</h2></div>
    </section>
    <section class="cd-section"><div>
            <h2>頁(yè)面滾動(dòng)切換效果2</h2></div>
    </section>
    <section class="cd-section">
        <div><h2>頁(yè)面滾動(dòng)切換效果3</h2></div>
    </section>
    <section class="cd-section">
        <div><h2>頁(yè)面滾動(dòng)切換效果4</h2></div>
    </section>
    <section class="cd-section">
        <div><h2>頁(yè)面滾動(dòng)切換效果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樣式添加

通過對(duì)每個(gè) section 進(jìn)行樣式的設(shè)計(jì)，方便我們查看和交互，大家可以根據(jù)需求在做一些相應(yīng)樣式。

.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事件處理

當(dāng)我們?cè)O(shè)定了數(shù)據(jù)攔截屬性data-hijacking為關(guān)閉后，所有動(dòng)畫效果均按照它窗口的相對(duì)位置進(jìn)行原比例縮放。當(dāng)觸發(fā)了動(dòng)畫事件之后，我們會(huì)對(duì)當(dāng)前窗口頁(yè)面的樣式包括縮放比例由小到大，或者由大到小。以及相關(guān)透明度變化講解。

下面詳細(xì)展開對(duì)以下代碼的講解。首先windowHeight是指你設(shè)備窗口的本身高度是一個(gè)固定值，jQuery(window).scrollTop()是頁(yè)面中滾動(dòng)條的高度，是一個(gè)范圍值從上往下滑動(dòng)時(shí)（0～所有頁(yè)面高度），從下往上滑動(dòng)的時(shí)候是從（所有頁(yè)面高度～0）。actualBlock.offset().top是一組固定值，代表每一個(gè) section 頁(yè)面到頂部的距離分別是（0，每張頁(yè)面高度，每張頁(yè)面高度＊2，每張頁(yè)面高度＊3。。。）每張頁(yè)面高度依據(jù)設(shè)備而定。弄明白了這些代碼的意思過后，我們可以看到下面的判斷語(yǔ)句當(dāng)offset值大于負(fù)的窗口高度時(shí)，即從下往上滑動(dòng)時(shí)，當(dāng)前頁(yè)面由大到小切換，并且透明度不改變，y軸的值不斷的增加，頁(yè)面逐漸退出當(dāng)前視圖窗口。當(dāng)offset值小于窗口高度時(shí)，即從上往下滑動(dòng)時(shí)，當(dāng)前頁(yè)面由小到大切換，并且透明度逐漸透明，y軸的值為零，進(jìn)行縮放。陰影模糊半徑改變。

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

以上事件處理之后，還有兩個(gè)點(diǎn)擊事件，點(diǎn)擊那兩個(gè)切換按鈕，進(jìn)行頁(yè)面直接切換，同時(shí)還有velocity.js的事件處理函數(shù)例如對(duì)動(dòng)畫效果 translateUp,translateDown,scaleDown等做的一些效果。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: