Question

这个theme demo主题森林拥有整洁的动画，包括例如在用户向下滚动时显示文字，或者从侧面显示图标。

我猜测CSS3和JavaScript，可能会使用jQuery或专门用于动画的框架，但我不知道从哪里开始学习如何完成这些动画。

我从哪里开始？

Answer 1

结帐WowJS。
如果你对它有用的话，可以试试看source code {{3}}。

否则它是一个非常好的库，可以开始使用滚动动画。

Answer 2

基本上由滚动动作触发的动画是Javascript / jQuery的东西（不是CSS）。有一个很好的JS插件，你可以看看哪个有助于做到这一切：Scrollmagic，找到here

Answer 3

如果你正在使用Wordpress，你很可能会购买一个主题，其中包含非常好的动画，可以使用几个选项（比如它应该发生多快等） - 同样在{{3}上有很多整洁的动画和类似的网站所以如果你搜索的时间足够长，你可以找到并复制你想要的东西。

但是，如果你真的想自己学习如何做到这一点，那就没有捷径了，你必须从理解JavaScript和CSS3动画的功能开始深入了解，所以你知道哪些可以做什么。

codepen，CSS Transitions，CSS Animations

这些都是w3school教程，但还有很多其他资源。从简单的事情开始，逐步完成。

由于您在滚动时提到了行为，因此相关的JavaScript是

object.addEventListener("scroll", myScript);

这是一个简单的Simple JS animations开始。

Answer 4

有很多方法可以做到，但jQuery运行得很好。

您可能会发现this和this有帮助。

  $(window).scroll(function () {
    if($('body').scrollTop() > 110) {
      $('.box').css({
        'width': '50px',
        'height': '50px',
        'background': 'coral'
      });
    } else {
      $('.box').css({
        'width': '100px',
        'height': '100px',
        'background': 'red'
      });
    }
  });

body {
  padding-top: 175px;
  background: whitesmoke;
  height: 600px;
}

.box {
  margin-top: 150px;
  background: red;
  width: 100px;
  height: 100px;
  margin:  0 auto;
  transition: all .6s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
</div>

如何在滚动上制作动画？

4 个答案: