Question

我已成功完成本教程：http://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/。我想在页面上的几乎每个元素上应用fadein。这意味着使用这个jQuery方法，我将为每个元素创建单独的Classes并复制代码，因为否则每个具有相同类的元素当前都会与第一个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非常简单;只是将元素的不透明度默认设置为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;
}

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

我遗漏了所有额外的浏览器CSS定义，但您肯定想要包含它们。

希望这有帮助！

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

1 个答案: