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

Question

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

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

使用航点向元素添加类并让 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%'
    });
});

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

style.css

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

这里的 CSS 非常简单；只需将元素的 opacity 默认设置为 0，当添加 show 类时，将 opacity 更改为 1。transition 属性和 duration 将使这一切顺利进行。

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

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

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

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

希望这会有所帮助！