Table des matières
Maison
interface Web
tutoriel CSS
Comment implémenter des effets d'animation de défilement de page en CSS3 ?
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 ?
本篇文章主要介绍css3实现页面滚动动画特效。那么我们首页要认识一下，什么是AOS？AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，虽然他们的效果类似，但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。希望本文介绍对大家有所帮助。
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 id="页面滚动元素动画插件-aos-js">页面滚动元素动画插件-aos.js</h1>
<h2 id="Animate-nbsp-On-nbsp-Scroll-nbsp-span-Library-span">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 id="Fade">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
