简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

css3怎么实现页面滚动动画特效？

藏色散人
Lepaskan： 2018-08-06 14:32:17
asal
4458 orang telah melayarinya

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

9a6fb61c4f09c8080d28028458f2a2e.png

css3实现页面滚动动画特效具体代码示例如下：

首先要在页面中引入aos.css文件,jquery和aos.js文件

<link rel="stylesheet" href="aos.css" />
<script src="jquery.min.js">
</script><script src="aos.js"></script>
Salin selepas log masuk
<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">&lt;div aos="fade-up"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="fade-down"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="fade-right"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="fade-left"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="fade-up-right"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="fade-up-left"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="fade-down-right"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="fade-down-left"&gt;&lt;/div&gt;</code>

Flip

<code>&lt;div aos="flip-left"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="flip-right"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="flip-up"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="flip-down"&gt;&lt;/div&gt;</code>

Zoom

<code>&lt;div aos="zoom-in"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="zoom-in-up"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="zoom-in-down"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="zoom-in-left"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="zoom-in-right"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="zoom-out"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="zoom-out-up"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="zoom-out-down"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="zoom-out-right"&gt;&lt;/div&gt;</code>
<code>&lt;div aos="zoom-out-left"&gt;&lt;/div&gt;</code>

Different settings examples

<code>&lt;div aos="fade-up"
     aos-duration="3000"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="fade-down"
     aos-easing="linear"
     aos-duration="1500"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="fade-right"
     aos-offset="300"
     aos-easing="ease-in-sine"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="fade-left"
     aos-anchor="#example-anchor"
     aos-offset="500"
     aos-duration="500"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="fade-zoom-in"
     aos-easing="ease-in-back"
     aos-delay="300"
     aos-offset="0"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="flip-left"
     aos-easing="ease-out-cubic"
     aos-duration="2000"&gt;
&lt;/div&gt;</code>

Anchor placement

<code>&lt;div aos="fade-up"
     aos-anchor-placement="top-bottom"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="fade-up"
     aos-anchor-placement="center-bottom"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="fade-up"
     aos-anchor-placement="bottom-bottom"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="fade-up"
     aos-anchor-placement="top-center"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="fade-up"
     aos-anchor-placement="center-center"&gt;
&lt;/div&gt;</code>
<code>&lt;div aos="fade-up"
     aos-anchor-placement="bottom-center"&gt;
&lt;/div&gt;</code>
<script> $(&#39;.hero__scroll&#39;).on(&#39;click&#39;, function(e) { $(&#39;html, body&#39;).animate({ scrollTop: $(window).height() }, 1200); }); </script>
Salin selepas log masuk

Atas ialah kandungan terperinci css3怎么实现页面滚动动画特效？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css3实现页面滚动动画
sumber：php.cn
Artikel sebelumnya：多列布局的概念是什么？CSS多列布局的应用（实例代码） Artikel seterusnya：如何实现单行文字向上滚动的效果（附代码）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk menghalang halaman daripada menatal selepas perubahan laluan dalam Nuxt? Saya mempunyai projek Nuxt. Apabila saya menukar laluan dari http://localhost:3000/catalog...
daripada 2023-11-06 18:56:58
0
1
266
XMLHttpRequest tidak boleh memuatkan XXX, tiada pengepala 'Access-Control-Allow-Origin' tl;dr; Mengenai dasar asal yang sama, saya mempunyai proses Grunt yang memulakan contoh pe...
daripada 2023-09-21 16:34:22
0
2
260
Komponen butang tengah dalam apl Next.js? Saya menggunakan butang dalam halaman nextjs saya yang berada pada barisnya sendiri. Saya ...
daripada 2023-09-18 22:05:21
0
1
318
Adakah mungkin untuk mencapai peralihan yang lancar daripada teks yang dilukis dalam satu warna kepada kecerunan animasi? Terdapat teks putih pada halaman dan butang di bawahnya. Selain itu, kecerunan animasi dig...
daripada 2023-09-16 09:22:05
0
1
459
Tatal secara automatik ke bawah apabila melanggan dalam pengaki Apabila saya berada dalam pengaki dan menyerahkan borang, ia mengubah hala ke halaman lain...
daripada 2023-09-15 10:03:57
0
1
241
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！