communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
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 ?

藏色散人
Libérer： 2018-08-06 14:32:17
original
4524 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：
css3实现页面滚动动画
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
Opacité inférieure de l'image d'arrière-plan de défilement, limite l'opacité minimale J'essaie d'obtenir que l'image d'arrière-plan réduise l'opacité lors du défilement et une ...
Depuis 2024-04-04 23:50:53
0
1
1329
Comment puis-je transformer le texte en un nouvel élément (comme un séparateur) lorsque je clique dessus ? J'essaie de trouver un moyen de faire en sorte que certains textes de la page se transform...
Depuis 2024-04-04 11:21:03
0
1
3580
Vanilla JS setTimeout() : identifier un mauvais comportement J'ai une animation sur mon menu hamburger écrite en HTML, CSS et JavaScript vanille. Résul...
Depuis 2024-04-02 20:44:40
0
1
284
Lorsque l'événement de sélection change, l'animation CSS déclenche l'effet correspondant. J'essaie de créer une application React, en ce moment j'ai une zone de saisie de sélection...
Depuis 2024-04-01 09:16:28
0
1
350
Pourquoi chaque fois que j'enregistre mon projet Vite React, un nouvel élément de canevas est ajouté au corps de la page au lieu de remplacer l'élément de canevas existant ? J'essaie de commencer à apprendre ThreeJs (je suis également nouveau dans le développement...
Depuis 2024-03-30 09:57:49
0
1
396
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal