jQuery Scroll-based Animations的用法介紹

edithfang發表於2014-08-15

網際網路每天都在發生變化，新的技術層出不窮，已有的技術則會逐漸淡出人們的視線。因此，網頁設計師和前端開發人員必須掌握前沿的技術發展趨勢。如扁平化設計、單頁面網站、凍結行和滾動條響應，這些都是目前前端設計的趨勢。

在這個教程中，我們會介紹基於jQuery和CSS的Scroll-based Animations。
1.什麼是Scroll-based Animations？
Scroll-based Animations是基於滾動條的動畫效果，它是一個很新的技術，而且目前已經非常流行了，我們可以在各大視訊網站下拉滾動條時發現它們的蹤跡，播放視訊時，一旦原先的視訊展示位置被拉到顯示區外，視訊便開始隨著滾動條移動播放。如果你還不理解Scroll-based Animations，你可以在GBDebug中檢視它的Demo，地址如下。

http://www.gbtags.com/gb/debug/dd28a174-d262-4612-8943-9dba63c978b9.htm

毫無疑問的，Scroll-based Animations使前端開發者可以很容易地建立友好的互動式Web頁面。它們在使用者向下滾動頁面時被觸發，我們可以很容易的通過CSS和jQuery來實現它們。

我們通過jQuery的scroll()方法來監聽用滾動條向下滑動事件。一旦監聽到使用者正在操作滾動條，我們就可以通過jQuery的 scrollTop()方法來得到滾動條當前的相對位置並做出相關的響應：

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // apply effects and animations
    }
});

2.它是響應式的嗎？

如果我們想建立出響應式的Scroll-based Animation，我們必須定義以下兩個屬性：

a..瀏覽器的width屬性
b.瀏覽器的height屬性

如果沒有定義這兩個屬性，我們建立的Scroll-based Animations就是靜態的，當我們調動視窗大小的時候它就不會正常工作。

我們可以通過jQuery的width()和height()方法來得到這兩個屬性。

為了達到正常的效果，我們必須要做出如下的檢查：

$(window).scroll(function() {
if ($(this).width() < 992) {
if ($(this).height() <= 768) {
if ($(this).scrollTop() < 500) {
// apply effects
}
if($(this).scrollTop() > 1000) {
// apply effects
}
}
}
});

通過以上的簡介，我們已經大致瞭解了Scroll-based Animations, 下面我們通過四個不同的例子來具體的瞭解它的用法。

注：在實際專案中，我們可以使用物件快取和CSS Animations來代替jQuery的animate()方法，為了專注對Scroll-based Animations概念的理解，本文全部使用jQuery來演示。

Example #1

這個效果是當滾動條離頂部位置超過60px的時進行響應，顯示banner子元素h2的內容，並將原本顯示的info元素隱藏，程式碼片段表示如下：

if ($(window).scrollTop() > 60) {
$('.banner h2').css('display'， 'none');
$('.banner .info').css('display'， 'block');
} else {
$('.banner h2').css('display'， 'block');
$('.banner .info').css('display'， 'none');
}

這個例子也可以這樣寫：

if ($(window).scrollTop() > 60) {
$('.banner h2').hide();
$('.banner .info').show();
} else {
$('.banner h2').show();
$('.banner .info').hide();
}

Example #2

這個例子不侷限於對滾動條距頂部位置的監聽，同時還可以對視窗寬度進行監聽。更具體地說，我們是在監聽如下事件：

1.視窗的寬度屬性值小於或等於549 px，滾動條距頂部位置超過600 px。
2.視窗的寬度屬性值在550 px和991 px之間，滾動條距頂部位置超過480 px。
3.視窗的寬度屬性值大於991 px，滾動條距頂部位置超過450 px。

程式碼片段表示如下：

if ($(window).width() <= 549) {
if($(window).scrollTop() > 600) {
// the animation that's executed
firstAnimation();
}
} else if ($(window).width() > 549 && $(window).width() <= 991) {
if($(window).scrollTop() > 480){
// the animation that's executed
firstAnimation();
}
} else {
if ($(window).scrollTop() > 450) {
// the animation that should be executed
firstAnimation();
}
}

響應的方法firstAnimation()如下：

var firstAnimation = function () {
$('.clients .clients-info').each(
function () {
$(this).delay(500).animate({
opacity： 1，
height： '180'，
width： '250'
}， 2000);
}
);
};

上面的程式碼改變了clients-info元素的透明度、高度和寬度這三個屬性。
Example #3
這個例子的效果不僅取決於視窗的滾動條的位置，同時還可以對視窗寬度進行監聽。更具體地說，我們是在監聽如下事件：

1.視窗的寬度屬性值小於或等於549 px，滾動條距頂部位置的位置超過1750 px。
2視窗的寬度屬性值在550 px和991 px之間，滾動條距頂部位置的位置超過1150 px。
3視窗的寬度屬性值大於991 px，觸發動畫只有在頂部視窗的滾動條的位置超過850 px。

程式碼片段表示如下：

if ($(window).width() <= 549){
if($(window).scrollTop() > 1750){
secondAnimation();
}
} else if ($(window).width() > 549 && $(window).width() <= 991) {
if ($(window).scrollTop() > 1150) {
secondAnimation();
}
} else {
if ($(window).scrollTop() > 850) {
secondAnimation();
}
}

響應的方法secondAnimation()如下：

var secondAnimation = function() {
$('.method：eq(0)').delay(1000).animate({
opacity： 1
}， 'slow'，
function() {
$(this).find('h4').css('background-color'， '#b5c3d5');
}
);
 
$('.method：eq(1)').delay(2000).animate({
opacity： 1
}， 'slow'，
function() {
$(this).find('h4').css('background-color'， '#b5c3d5');
}
);
 
$('.method：eq(2)').delay(3000).animate({
opacity： 1
}， 'slow'，
function() {
$(this).find('h4').css('background-color'， '#b5c3d5');
}
);
$('.method：eq(3)').delay(4000).animate({
opacity： 1
}， 'slow'，
function() {
$(this).find('h4').css('background-color'， '#b5c3d5');
}
);
};

上面的程式碼改變了method元素的背景顏色屬性。
Example #4

這個例子的影響不僅取決於視窗中滾動條距頂部位置，同時還可以對視窗寬度進行監聽。更具體地說，我們是在監聽如下事件：

1.視窗的寬度屬性值小於或等於549 px，滾滾動條距頂部位置的位置超過3500 px。
2.視窗的寬度屬性值在550 px和991 px之間，滾動條距頂部位置的位置超過2200 px。
3.視窗的寬度屬性值大於991 px，滾動條距頂部位置的位置超過1600 px。

程式碼片段表示如下：

if ($(window).width() <= 549) {
if ($(window).scrollTop() > 3500) {
thirdAnimation();
}
} else if ($(window).width() > 549 && $(window).width() <= 991) {
if ($(window).scrollTop() > 2200) {
thirdAnimation();
}
} else {
if ($(window).scrollTop() > 1600) {
thirdAnimation();
}
}

響應的方法thirdAnimation()如下：

var thirdAnimation = function() {
$('.blogs').find('p').delay(1400).animate({
opacity： 1，
left： 0
}， 'slow'
);
 
$('.blogs').find('img').delay(2000).animate({
opacity： 1，
right： 0
}， 'slow'
);
 
$('.blogs').find('button').delay(2500).animate({
opacity： 1，
bottom： 0
}， 'slow'
);
};

上面的程式碼改變了p，img，button元素的opacity， left， right 和 bottom 屬性。

英文原文地址：http://www.sitepoint.com/introduction-jquery-scroll-based-animations/

來自：http://www.gbtags.com/gb/share/3678.htm

JQUERY SCROLLBASED ANIMATIONS

jQuery Scroll-based Animations的用法介紹

相關文章