溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何用velocity.js實現頁面滾動切換效果”，在日常操作中，相信很多人在如何用velocity.js實現頁面滾動切換效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用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
在這個結構中我們想展示5個不同的一組頁面，我們把他分為五個 section ,同時定義了2個用來進行切換作用的圖標按鈕
<body data-hijacking="off" data-animation="scaleDown"> <section class="cd-section visible"> <div><h3>頁面滾動切換效果1</h3></div> </section> <section class="cd-section"><div> <h3>頁面滾動切換效果2</h3></div> </section> <section class="cd-section"> <div><h3>頁面滾動切換效果3</h3></div> </section> <section class="cd-section"> <div><h3>頁面滾動切換效果4</h3></div> </section> <section class="cd-section"> <div><h3>頁面滾動切換效果5</h3></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>
通過對每個 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]
]
});到此，關于“如何用velocity.js實現頁面滾動切換效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
