jQuery基于滚动的动画简介

网络每天都在变化。 新技术和新技术应运而生。 因此，网页设计师和前端开发人员必须熟悉许多最新的网页设计趋势。 视差滚动，固定页眉，平面设计，一页网站和动画是当前最热门的Web趋势。

在本教程中，我们将介绍使用CSS和jQuery的基于滚动的动画和效果。

在本演示中可以查看我们将要创建的四个效果。 但是在获得效果之前，我们先做一个简短的介绍。

注意：本教程中使用的代码可以通过对象缓存和CSS动画的使用来改进，而不是使用jQuery的“ animate（）”方法，但是为了简单起见，我们重复了对象声明，并将所有内容保留在jQuery中以保持事情集中在概念上。

什么是基于滚动的动画和效果？

基于滚动的动画和效果是一种新的但众所周知的技术，它使前端开发人员能够创建丰富的交互式Web体验。 当用户向下滚动页面时会触发它们，并且可以使用CSS和jQuery轻松地操纵和实现它们。

为了检测用户是否向下滚动页面，我们使用jQuery的scroll（）事件。

一旦知道用户正在滚动，就可以使用jQuery的scrollTop（）方法获取窗口滚动条的垂直位置，并应用所需的效果：

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

他们反应灵敏吗？

如果我们有兴趣创建基于响应的滚动效果，则必须定义以下属性：

1. 浏览器窗口的width属性。
2. 浏览器窗口的height属性。

如果没有定义这些属性，我们将创建基于滚动的效果，这些效果是“静态的”，并且当用户在水平或垂直方向上调整窗口大小时将无法正常工作。

我们可以使用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
            }
        }
    }
});

既然我们已经介绍了基于滚动效果的基础知识，下面将通过四个不同的示例来了解它们的实际作用。

注意：为简单起见，我们仅关注基于窗口的width属性的不同值来检查这些效果的变化。 同样的过程也可以用于其height属性。

例子1

当窗口的滚动条的顶部位置超过60px时，将触发此效果。 在这种情况下，执行的代码段如下：

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

上面的代码隐藏了.banner元素的h2子元素，并显示了最初被隐藏的.info子元素。

该代码也可以编写如下：

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

要查看实际效果，请查看CodePen上的完整演示 。

范例＃2

下一个效果不仅取决于浏览器滚动条的顶部位置，还取决于窗口的宽度。 更具体地说，我们做出以下假设：

1. 窗口的width属性的值小于或等于549px。 在这种情况下，仅当窗口滚动条的顶部位置超过600px时才触发动画。
2. 窗口的width属性的值介于550px和991px之间。 在这种情况下，仅当窗口滚动条的顶部位置超过480px时才触发动画。
3. 浏览器的width属性的值大于991px。 在这种情况下，仅当窗口滚动条的顶部位置超过450px时才触发动画。

上述假设导致产生以下代码段：

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

包含要执行的动画的代码如下：

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

上面的代码为.clients-info元素的opacity ， height和width属性设置了.clients-info 。

要查看实际效果，请查看CodePen上的完整演示 。

例子＃3

第三种效果不仅取决于窗口滚动条的顶部位置，还取决于窗口的width属性。 更具体地说，我们做出以下假设：

1. 窗口的width属性的值小于或等于549px。 在这种情况下，仅当窗口滚动条的顶部位置超过1750px时才触发动画。
2. 窗口的width属性的值介于550px和991px之间。 在这种情况下，仅当窗口滚动条的顶部位置超过1150px时才触发动画。
3. 窗口的width属性的值大于991px。 在这种情况下，仅当窗口滚动条的顶部位置超过850px时才触发动画。

这是基于上面的代码：

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

包含要执行的动画的代码如下：

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元素的opacity属性进行动画处理，然后更改其h4子元素的background-color属性。

要查看实际效果，请查看CodePen上的完整演示 。

例子＃4

这种效果不仅取决于窗口滚动条的顶部位置，还取决于窗口的width属性。 进一步来说：

1. 如果窗口的width属性的值小于或等于549px，则仅当窗口滚动条的顶部位置超过3500px时才触发动画。
2. 如果窗口的width属性的值介于550px和991px之间，则仅当窗口滚动条的顶部位置超过2200px时才触发动画。
3. 如果窗口的width属性的值大于991px，则仅当窗口滚动条的顶部位置超过1600px时才触发动画。

这将导致以下代码：

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

动画的代码如下：

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属性进行动画处理。

要查看实际效果，请查看CodePen上的完整演示 。

结论

我希望这里的四个示例演示如何使用jQuery创建基于滚动的动画和效果。

如果您对所使用的代码有任何想法，或者对此类效果有任何好的高级示例或演示，请随时在注释中分享。

From: https://www.sitepoint.com/introduction-jquery-scroll-based-animations/