Question

我以此网站为例

http://paultrifa.com/envato/themeforest/scrolled/

我正在学习如何只在向下滚动时使内容显得淡出。目前我可以使用animate.css来帮助我减少效果但我只能在向下滚动时才能加载它。

即使在我向下滚动之前，所有内容都已加载。有人可以请教我这个吗？真的很想学习这个。

Answer 1

我要做的是将一个方法绑定到window.scroll事件，当该滚动命中特定值时，您将触发特定的动画函数，这些函数可能通过jQuery为屏幕上的内容设置动画，或者添加具有预定义css动画的类附接。

第1步，类似这样的事情）

$(document).ready(function() {
  var firstAniWaiting = true,
      secondAniWaiting = true,
      thirdAniWaiting = true,

  checkScroll = function() {
    var currentScroll = $(window).scrollTop();

    if (currentScroll > 200 && firstAniWaiting) {
      firstAniWaiting = false;
      doMyFirstAni();

    } else if (currentScroll > 1000 && secondAniWaiting) {
      secondAniWaiting = false;
      doMySecondAni();

    } else if (currentScroll > 1500 && thirdAniWaiting) {
      thirdAniWaiting = false;
      doMyThirdAni();

      $(window).unbind();
    }
  };

  $(window).scroll(checkScroll);
}

步骤2，为其PRE动画状态中的所有元素设置css位置值（即隐藏或其他）。如果您正在使用css3动画类，请确保在本机类上包含“transition”值（意思是，始终在对象上的类而不是稍后添加的类）。排序如下：

.thingToAni1 {
  position: relative;
  top: -500px;
  left: 0;
  transition: top 0.5s;
}     

.thingToAni1MoveIt { // This class gets added later
  top: 0; 
}

步骤3，创建具有POST动画状态位置值的类。（要么）第3步，类似这样的事情）

var doMyFirstAni = function() {
  $('.thingToAnimate1').animate({
    top: '20px',
    left: '100px'
  }, 200);

  $('.thingToAnimate2').animate({
    top: '20px',
    left: '300px'
  }, 200);
}

这是非常粗糙的，但希望这会让你开始。

另外，我没有仔细检查自己，所以如果有什么我搞砸了，发表评论，我会更新我的愚蠢。

Answer 2

Scroll是javascript中的一个事件，如果你使用的是jquery，那么这就是scroll（）事件。只要有人在您的页面上滚动，您就可以启动某个功能，例如淡入某些元素。您还可以测量窗口高度，以便在页面滚动到某个部分时启动事件。

当我向下滚动时，如何使分区的内容出现

2 个答案: