jQuery Waypoints - 具有相同 CLASS 的多个 div

Question

我已遵循本教程：http://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/ 成功。我想在页面上的几乎每个元素上应用淡入淡出。这意味着使用这种 jQuery 方法，我需要为每个元素创建单独的类并复制代码，因为否则具有相同 class 的每个元素当前仅在第一个 Waypoint 淡入.

这是我的：

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

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

通过关注此页面，我尝试将其调整为：

但我无法让它工作...有什么想法吗？（我的 Jquery 可能有点偏差）

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

var sticky = [];
$('.fade-in').each(function(idx){
sticky[idx] = new Waypoint.Sticky({ element: this });
$({element: this}).addClass('fadeInUp');
});

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

非常感谢

Answer 1

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

使用 waypoints 向元素添加 class 并让 CSS 处理过渡或动画。

假设您使用的是 jquery 版本的 waypoints。

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

您的 CSS 可以随心所欲，假设您只想淡入淡出元素

style.css

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

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

对于更酷一点的东西，您可以让它向上滑动和淡入，只需稍微改变一下 CSS；

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

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

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

希望对您有所帮助！

jQuery Waypoints - 具有相同 CLASS 的多个 div

jQuery Waypoints - multiple divs with same CLASS

scroll

fadein

jquery-waypoints

animate.css