recherche

Maison >interface Web >tutoriel CSS >Comment implémenter des effets d'animation de défilement de page en CSS3 ?

Comment implémenter des effets d'animation de défilement de page en CSS3 ?

藏色散人
藏色散人original
2018-08-06 14:32:174543parcourir

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

Comment implémenter des effets danimation de défilement de page en 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css css3 循环 JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quel est le concept de mise en page multi-colonnes ? Application de la mise en page multi-colonnes CSS (exemple de code)Article suivant：Quel est le concept de mise en page multi-colonnes ? Application de la mise en page multi-colonnes CSS (exemple de code)

Articles Liés

Voir plus