jquery滚动条设置动画_jQuery基于滚动的动画简介

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

他们React灵敏吗？

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

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).scrol