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

Answer 2

为什么不尝试iscroll ..并添加滚动侦听器..

即使在初始化iscroll之前，你也必须得到你想要淡化的每个元素的位置...并使用onScroll监听器初始化iscroll ..你必须包含scroll-probe.js为了这.. 您的onScroll侦听器可以确定您需要应用动画的滚动点。例如

If( this.y == myelementsYpostion) {
  $('#myelement').fadeIn()
}

无法使用滚动动画来使用jquery

2 个答案: