blocks|key|953144|text|查看WowJS。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|953145|如果你对他们的source+code在幕后工作感到好奇，可以试着去看看。|953146|除此之外，这是一个非常好的滚动动画入门的库。|953147|entityMap|0|LINK|mutability|MUTABLE|url|http://mynameismatthieu.com/WOW/|1|https://github.com/matthieua/WOW^0|2|5|0|0|7|B|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

<p>Checkout <a href="http://mynameismatthieu.com/WOW/" rel="nofollow noreferrer">WowJS</a>.<br>
And try going through their <a href="https://github.com/matthieua/WOW" rel="nofollow noreferrer">source code</a> if you're curious about it works under the hood.  </p>

<p>Otherwise its a pretty good library to get started with scroll animations.</p>


blocks|key|4736978|text|基本上，由滚动动作触发的动画是Javascript+/+jQuery的东西(而不是CSS)。有一个很好的JS插件，你可以看看它，它可以帮助你做到这一切:+Scrollmagic，可以找到here|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4736979|entityMap|0|LINK|mutability|MUTABLE|url|http://scrollmagic.io/^0|2L|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Basically animations that are triggered by scrolling actions are Javascript / jQuery stuff (not CSS). There's a nice JS plugin which you can take a look at which helps to do all that: Scrollmagic, to be found <a href="http://scrollmagic.io/" rel="nofollow noreferrer">here</a></p>


blocks|key|4737038|text|如果你正在使用Wordpress，你很有可能会买到一个主题，其中包含一些很好的动画，并且有几个选项(比如它应该以多快的速度出现)--类似的，在codepen和类似的网站上有很多整洁的动画，所以如果你搜索足够长的时间，也许你可以找到并复制你想要的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4737039|然而，如果你真的想自己学习如何做到这一点，没有捷径可走，你必须从理解JavaScript和CSS3动画的功能开始，然后深入了解，这样你就知道哪些能做什么。|4737040|CSS+Transitions、CSS+Animations、Simple+JS+animations|4737041|这些都是w3school教程，但还有许多其他资源。从一些简单的事情开始，然后用你的方式向上。|4737042|由于您提到了滚动上的行为，因此相关的JavaScript为|4737043|object.addEventListener("scroll",+myScript);|code-block|syntax|javascript|4737044|下面是一个简单的use+case开始。|4737045|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/brandonkennedy/pen/epRBYN|1|https://www.w3schools.com/css/css3_transitions.asp|2|https://www.w3schools.com/css/css3_animations.asp|3|https://www.w3schools.com/howto/howto_js_animate.asp|4|https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll3^0|1Z|7|0|0|0|0|F|1|G|E|2|V|K|3|0|0|0|0|8|8|4|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]|$A|1H|B|1I|1|1J]|$A|1K|B|1L|1|1M]]|C|$]]|$1|H|3|I|5|6|7|1N|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1O|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1P|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|1Q|8|@]|9|@$A|1R|B|1S|1|1T]]|C|$]]|$1|S|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]|12|$5|V|W|X|C|$Y|13]]|14|$5|V|W|X|C|$Y|15]]|16|$5|V|W|X|C|$Y|17]]]]

<p>If you are using Wordpress, chances are you can buy a theme that includes very nice animations ready for use with a few options (say how fast it should occur or such) - similarly there are many neat animations on <a href="https://codepen.io/brandonkennedy/pen/epRBYN" rel="nofollow noreferrer">codepen</a> and similar sites so maybe if you search long enough you could find and copy what you want.</p>

<p>However, if you really want to learn how to do that yourself, there's no short cuts and you have to start with understanding JavaScript and the capabilities of CSS3 animations and deeply, so you know which can do what.</p>

<p><a href="https://www.w3schools.com/css/css3_transitions.asp" rel="nofollow noreferrer">CSS Transitions</a>, <a href="https://www.w3schools.com/css/css3_animations.asp" rel="nofollow noreferrer">CSS Animations</a>, <a href="https://www.w3schools.com/howto/howto_js_animate.asp" rel="nofollow noreferrer">Simple JS animations</a></p>

<p>These are all w3school tutorials but there are many other resources out there. Start with something simple and work your way up.</p>

<p>Since you mentioned the behavior on scroll, the relevant JavaScript is</p>

<pre><code>object.addEventListener("scroll", myScript);
</code></pre>

<p>Here's a simple <a href="https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll3" rel="nofollow noreferrer">use case</a> to start.</p>


blocks|key|953229|text|有很多方法可以做到这一点，但jQuery工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|953230|您可能会发现this和this很有帮助。|offset|length|953231|​|953232|++$(window).scroll(function+()+{
++++if($('body').scrollTop()+>+110)+{
++++++$('.box').css({
++++++++'width':+'50px',
++++++++'height':+'50px',
++++++++'background':+'coral'
++++++});
++++}+else+{
++++++$('.box').css({
++++++++'width':+'100px',
++++++++'height':+'100px',
++++++++'background':+'red'
++++++});
++++}
++});|code-block|syntax|javascript|953233|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;
}|953234|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div+class="box">
</div>|953235|953236|entityMap|0|LINK|mutability|MUTABLE|url|http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/|1|http://scrollmagic.io/examples/^0|0|6|4|0|B|4|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]|$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Q|3|G|5|6|7|1D|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]|Z|$5|U|V|W|A|$X|10]]]]

<p>Well there are lots of ways to do it, but jQuery works nicely. </p>

<p>You may find <a href="http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/" rel="nofollow noreferrer">this</a> and <a href="http://scrollmagic.io/examples/" rel="nofollow noreferrer">this</a> helpful.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  $(window).scroll(function () {
    if($('body').scrollTop() &gt; 110) {
      $('.box').css({
        'width': '50px',
        'height': '50px',
        'background': 'coral'
      });
    } else {
      $('.box').css({
        'width': '100px',
        'height': '100px',
        'background': 'red'
      });
    }
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="box"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>This <a href="http://demo.cms-theme.net/?theme=wp_medico" rel="nofollow noreferrer">theme demo</a> on themeforest has neat animations including for example showing text when the users scrolls down, or making icons appear from the sides.</p>

<p>I'm guessing CSS3 and JavaScript, possibly with jQuery or a framework specialized in animations would be used for this, but I have no idea where to start learning how to accomplish these kinds of animations.</p>

<p>Where do I start?</p>


How do I animate things on scroll?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

themeforest上的这个有整洁的动画，例如当用户向下滚动时显示文本，或者使图标从侧面出现。我猜CSS3和JavaScript可能会用到jQuery或一个专门做动画的框架，但我不知道从哪里开始学习如何实现这些类型的动画。我该从哪里开始呢？

问如何在scroll上为事物设置动画？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在scroll上为事物设置动画？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在scroll上为事物设置动画？
EN