Scroll jQuery航路点-具有相同类别的多个div_Scroll_Fadein_Jquery Waypoints_Animate.css

Scroll jQuery航路点-具有相同类别的多个div

scroll

Scroll jQuery航路点-具有相同类别的多个div,scroll,fadein,jquery-waypoints,animate.css,Scroll,Fadein,Jquery Waypoints,Animate.css,我已经成功地学习了本教程。我想在页面上的几乎每个元素上应用fadein。这意味着使用jQuery方法，我将为每个元素创建单独的类并复制代码，因为否则，具有相同类的每个元素当前只会随着第一个航路点淡入以下是我所拥有的： // hide our element on page load $('.fade-in').css('opacity', 0); $('.fade-in').waypoint(function() { $('.fade-in').addClass('fadeInUp'); }

我已经成功地学习了本教程。我想在页面上的几乎每个元素上应用fadein。这意味着使用jQuery方法，我将为每个元素创建单独的类并复制代码，因为否则，具有相同类的每个元素当前只会随着第一个航路点淡入

以下是我所拥有的：

// hide our element on page load
$('.fade-in').css('opacity', 0);

$('.fade-in').waypoint(function() {
$('.fade-in').addClass('fadeInUp');
}, { offset: '95%' });

通过阅读本页，我尝试将其改编为：

但我没法让它工作…有什么想法吗？（我的Jquery可能有点不对劲）

我也不知道如何添加偏移部分

非常感谢

我不确定我是否能按照上面的代码进行操作，但我想我理解您试图实现的目标，我也做了类似的事情

使用航路点向元素添加一个类，并让CSS处理过渡或动画

这假设您使用的是jquery版本的航路点

site.js

$(document).ready(function(){
    //set a waypoint for all the page parts on the page
    var ppWaypoint = $('.pp').waypoint(function(direction) {
        //check the direction
        if(direction == 'down') {
            //add the class to start the animation
            $(this.element).addClass('show');
            //then destroy this waypoint, we don't need it anymore
            this.destroy();
        }
    }, {
        //Set the offset
        offset: '80%'
    });
});

.pp {
    transition-property: opacity;
    transition-duration: 0.8s;
    opacity: 0;
}
.pp.show {
    opacity: 1;
}

你的CSS可以做任何你喜欢的事情，让我们假设你只是想淡入元素

style.css

$(document).ready(function(){
    //set a waypoint for all the page parts on the page
    var ppWaypoint = $('.pp').waypoint(function(direction) {
        //check the direction
        if(direction == 'down') {
            //add the class to start the animation
            $(this.element).addClass('show');
            //then destroy this waypoint, we don't need it anymore
            this.destroy();
        }
    }, {
        //Set the offset
        offset: '80%'
    });
});

.pp {
    transition-property: opacity;
    transition-duration: 0.8s;
    opacity: 0;
}
.pp.show {
    opacity: 1;
}

CSS在这里非常简单；只需将元素的不透明度默认设置为0，添加show类时，不透明度更改为1。过渡属性和持续时间将使这一切顺利进行

对于一些更酷的东西，你可以通过稍微改变你的CSS使它向上滑动和淡入

.pp {
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  opacity: 0;
  transform: translateY(5px);
}
.pp.show {
  transform: translateY(0px);
  opacity: 1;
}

我在这里所做的就是添加transformtranslatey属性来处理向上的移动

我省略了所有额外的浏览器CSS定义，但您肯定希望包含它们

希望这有帮助

我不确定我是否能遵循上面的代码，但我想我理解你想要实现的目标，我也做了类似的事情