suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie implementiert man Seitenscroll-Animationseffekte in CSS3?

Wie implementiert man Seitenscroll-Animationseffekte in CSS3?

藏色散人
藏色散人Original
2018-08-06 14:32:174518Durchsuche

本篇文章主要介绍css3实现页面滚动动画特效。那么我们首页要认识一下，什么是AOS？AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，虽然他们的效果类似，但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。希望本文介绍对大家有所帮助。

Wie implementiert man Seitenscroll-Animationseffekte in CSS3?

css3实现页面滚动动画特效具体代码示例如下：

首先要在页面中引入aos.css文件,jquery和aos.js文件

<link rel="stylesheet" href="aos.css" />
<script src="jquery.min.js">
</script><script src="aos.js"></script>
<body aos-easing="ease-out-back" aos-duration="1000" aos-delay="0">
<header class="hero">
    <div class="hero-center">
        <h1 style="font-family:Microsoft YaHei">页面滚动元素动画插件-aos.js</h1>
        <h2 class="hero__text aos-init" aos="fade-up" aos-easing="ease" aos-delay="400">Animate On Scroll <span>Library</span></h2>
    </div>
   <span class="hero__scroll aos-init" aos="fade-up" aos-easing="ease" aos-delay="800">
      Scroll down <br>
      <i class="chevron bottom"></i>
   </span>
</header>

<section class="section section--code">
    <div class="container">
        <h2 class="section-title">Fade</h2>
        <div class="code code--small code--left aos-init" aos="fade-up">
            <pre class="brush:php;toolbar:false"><code class="html"><div aos="fade-up"></div></code>
                 
            
<code>17dcaf2ef2bbe209f3dd88d72131171216b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>f8d70231aff74c3b2f87e6916cb1a79116b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>012c81d683939225cb75bf1d11fa5d2b16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>044faa00373982bb9bcbdd7fadd230bf16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>ec4e3486511ea7362e0712bb0aeaf76f16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>515b9f411e4b92f5ee06c6eac549117f16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>4279cd556ff0656ee3935b1e9fe5621116b28748ea4df4d9c2150843fecfba68</code>
        
    
    
        

Flip

        
            
<code>2f6377c38dce62e0c0401cc379b486e316b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>436768c797fcf55cb9dc9e055ddcd68416b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>7ed1d9a5de26312469461b2088b4f84416b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>c6ee12913e55951d5d8fc4d6a5feace716b28748ea4df4d9c2150843fecfba68</code>
        
    
    
        

Zoom

        
            
<code>0772252bd188f84df98b7333365ebfda16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>576c8cee0b728a181f58e9fe0ea2208e16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>d3984620f919b2e26a3ee497775c088a16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>b93963b15f8f547695f85f9f19a9e68c16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>444d926d4f17825755a57659a567bddf16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>f0a47a5be0a53fc65f0063253fd0a8c616b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>361d15f799767fa0ed6a0ad3bfbc708316b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>258a4f9749d3d2c330464bb268064f5516b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>972cef74ecdb9b471d0add08f8fa0b9b16b28748ea4df4d9c2150843fecfba68</code>
        
        
            
<code>37ecd15f8f17a6ccf7badc4dc98b62cf16b28748ea4df4d9c2150843fecfba68</code>
        
    
    
        

Different settings examples

        
         
<code>a874d857c99194ba051d6a4b9f374d27
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>d909b6838ea3cd1c8e247ccf3807c957
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>f49c796645f811720e4d37f60f0724cd
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>00a76a8969fa361793821eb448fad82b
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>dc942b766ee4d5df75075e7c56252654
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>84203a5d81d3bd54efa710dbe14bfd6f
16b28748ea4df4d9c2150843fecfba68</code>
        
    
    
        

Anchor placement

        
         
<code>dfecb4faf7d8692a6f3233d8b027fff2
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>f1d5bcabecc19567335e6a31e12bbd0d
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>745c9520f259e8eea1bdda0c2ea18e03
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>88d696055163d4cdcbb194074331a930
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>c5c9f01722c836a36e1d549491904fdc
16b28748ea4df4d9c2150843fecfba68</code>
        
        
         
<code>74b84cae8c51a865b8e083e0269ed6f3
16b28748ea4df4d9c2150843fecfba68</code>
        
    
<script></script> <script></script> <script> AOS.init({ easing: &#39;ease-out-back&#39;, duration: 1000 }); </script> <script> $(&#39;.hero__scroll&#39;).on(&#39;click&#39;, function(e) { $(&#39;html, body&#39;).animate({ scrollTop: $(window).height() }, 1200); }); </script>

Das obige ist der detaillierte Inhalt vonWie implementiert man Seitenscroll-Animationseffekte in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css css3 循环 JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist das Konzept des mehrspaltigen Layouts? Anwendung des mehrspaltigen CSS-Layouts (Beispielcode)Nächster Artikel：Was ist das Konzept des mehrspaltigen Layouts? Anwendung des mehrspaltigen CSS-Layouts (Beispielcode)

In Verbindung stehende Artikel

Mehr sehen