Maison > interface Web > tutoriel CSS > le corps du texte

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

藏色散人
Libérer: 2018-08-06 14:32:17
original
4511 Les gens l'ont consulté

本篇文章主要介绍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>
Copier après la connexion
<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>
Copier après la connexion
<code><div aos="fade-down"></div></code>
Copier après la connexion
<code><div aos="fade-right"></div></code>
Copier après la connexion
<code><div aos="fade-left"></div></code>
Copier après la connexion
<code><div aos="fade-up-right"></div></code>
Copier après la connexion
<code><div aos="fade-up-left"></div></code>
Copier après la connexion
<code><div aos="fade-down-right"></div></code>
Copier après la connexion
<code><div aos="fade-down-left"></div></code>
Copier après la connexion

Flip

<code><div aos="flip-left"></div></code>
Copier après la connexion
<code><div aos="flip-right"></div></code>
Copier après la connexion
<code><div aos="flip-up"></div></code>
Copier après la connexion
<code><div aos="flip-down"></div></code>
Copier après la connexion

Zoom

<code><div aos="zoom-in"></div></code>
Copier après la connexion
<code><div aos="zoom-in-up"></div></code>
Copier après la connexion
<code><div aos="zoom-in-down"></div></code>
Copier après la connexion
<code><div aos="zoom-in-left"></div></code>
Copier après la connexion
<code><div aos="zoom-in-right"></div></code>
Copier après la connexion
<code><div aos="zoom-out"></div></code>
Copier après la connexion
<code><div aos="zoom-out-up"></div></code>
Copier après la connexion
<code><div aos="zoom-out-down"></div></code>
Copier après la connexion
<code><div aos="zoom-out-right"></div></code>
Copier après la connexion
<code><div aos="zoom-out-left"></div></code>
Copier après la connexion

Different settings examples

<code><div aos="fade-up"
     aos-duration="3000">
</div></code>
Copier après la connexion
<code><div aos="fade-down"
     aos-easing="linear"
     aos-duration="1500">
</div></code>
Copier après la connexion
<code><div aos="fade-right"
     aos-offset="300"
     aos-easing="ease-in-sine">
</div></code>
Copier après la connexion
<code><div aos="fade-left"
     aos-anchor="#example-anchor"
     aos-offset="500"
     aos-duration="500">
</div></code>
Copier après la connexion
<code><div aos="fade-zoom-in"
     aos-easing="ease-in-back"
     aos-delay="300"
     aos-offset="0">
</div></code>
Copier après la connexion
<code><div aos="flip-left"
     aos-easing="ease-out-cubic"
     aos-duration="2000">
</div></code>
Copier après la connexion

Anchor placement

<code><div aos="fade-up"
     aos-anchor-placement="top-bottom">
</div></code>
Copier après la connexion
<code><div aos="fade-up"
     aos-anchor-placement="center-bottom">
</div></code>
Copier après la connexion
<code><div aos="fade-up"
     aos-anchor-placement="bottom-bottom">
</div></code>
Copier après la connexion
<code><div aos="fade-up"
     aos-anchor-placement="top-center">
</div></code>
Copier après la connexion
<code><div aos="fade-up"
     aos-anchor-placement="center-center">
</div></code>
Copier après la connexion
<code><div aos="fade-up"
     aos-anchor-placement="bottom-center">
</div></code>
Copier après la connexion
<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!

Étiquettes associées:
source: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:Comment obtenir l'effet de faire défiler une seule ligne de texte (code ci-joint)
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal