搜尋

首頁 >web前端 >css教學 >css3怎麼實現頁面滾動動畫特效？

css3怎麼實現頁面滾動動畫特效？

藏色散人
藏色散人原創
2018-08-06 14:32:174536瀏覽

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

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>

以上是css3怎麼實現頁面滾動動畫特效？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

jquery css css3 循环 JS
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：多列佈局的概念是什麼？ CSS多列佈局的應用（實例程式碼）下一篇：多列佈局的概念是什麼？ CSS多列佈局的應用（實例程式碼）

相關文章

看更多