javascript - 无法让滚动动画与 jquery 一起使用

Question

我正忙于开发一个新网站。现在，我的问题是在用户向下滚动时将动画添加为淡入。

为此，我尝试了各种 jquery 脚本和方法。甚至尝试了一个简单的脚本来在向下滚动时添加一个类。滚动方法无效。

Jquery 本身的工作。我为移动设备添加了一个简单的点击按钮，效果很好。

谁能帮帮我，我现在看不出问题所在。您可以查看网站。

http://www.royaldutchtreeservices.ca/

谢谢!

Answer 1

我建议结合 jQuery Waypoints plugin使用 CSS3 动画。当用户滚动到元素时，Waypoints 插件会向该元素添加一个类(您可以自定义像素或百分比偏移量)，并且您的 CSS 将为状态之间的过渡设置动画(例如不透明度和相对定位)。

这是一个简单的 Codepen demo .

确保链接到 Waypoints 插件。那么您的代码将如下所示。

HTML

<div class="waypoint group">
    <p>Group 1</p>

</div>

<div class="waypoint group">
    <p>Group 2</p>

</div>

<div class="waypoint group">
  <p>Group 3</p>
</div>

<div class="waypoint group">
  <p>Group 4</p>
</div>

CSS

.group {
  background:#eaeaea;
  margin-bottom:20px;
  padding:50px;
  min-height:600px;
  font:bold 12px/2 arial;
  color:#fff;
  background-color:#0196ff;
}

.group:nth-of-type(2) {background-color:#16d44b;}
.group:nth-of-type(3) {background-color:#d45016;}
.group:nth-of-type(4) {background-color:#d41666 ;}

.waypoint {
  opacity:0;
  top:50px;
  position:relative;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition:all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out; 
}

.waypoint.active {
  opacity:1;
  top:0;
}

JS

$('.waypoint').waypoint(function(direction) {
    if (direction == 'down') {
        $(this).addClass('active');
    }
},    {

    offset: function() {
        return 400 // trip waypoint when element is this many px from top 
    }
});