Question

我正在尝试动画元素的动画部分或在滚动到其位置后完全显示。我正在使用的代码在滚动到绝对位置（而不是对象的位置）时执行该操作。

我使用的动画是SlideUp。我没有任何想法来编写代码来做到这一点。我想要一点帮助来编写代码。任何人都可以提出这种方法（更好的是一个小例子）吗？

代码如下：

＆＃13;

function reveal() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myDiv").className = "slideUp";
  }
}

＆＃13;

/* When Class changed to slideUp, Animation will start */

.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  visibility: visible;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

@-webkit-keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

＆＃13;

<!-- Div has absolutely positioned to avoid showing when page load first time|Because, User should scroll to it for animate it. -->
<div id="myDiv" style="position:absolute;top:1500px;left:1px;">
  <p>Example text</p>
</div>

＆＃13;

Answer 1

要在元素滚动显示时为其设置动画，wow.js是与animate.css结合的最佳资源

这样做的基本示例：

<div class="wow bounceInUp">
    Content to Reveal Here
</div>

不要忘记初始化它。

<script>
    new WOW().init();
</script>

如何在滚动和显示时为元素设置动画

1 个答案: