Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > Wie implementiert man Seitenscroll-Animationseffekte in CSS3?

Wie implementiert man Seitenscroll-Animationseffekte in CSS3?

藏色散人
Freigeben： 2018-08-06 14:32:17
Original
4651 Leute haben es durchsucht

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

Wie implementiert man Seitenscroll-Animationseffekte in CSS3?

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

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

1

2

3

<link rel="stylesheet" href="aos.css" />

<script src="jquery.min.js">

</script><script src="aos.js"></script>

Nach dem Login kopieren

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<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>

Nach dem Login kopieren

1

<code><div aos="fade-down"></div></code>

Nach dem Login kopieren

1

<code><div aos="fade-right"></div></code>

Nach dem Login kopieren

1

<code><div aos="fade-left"></div></code>

Nach dem Login kopieren

1

<code><div aos="fade-up-right"></div></code>

Nach dem Login kopieren

1

<code><div aos="fade-up-left"></div></code>

Nach dem Login kopieren

1

<code><div aos="fade-down-right"></div></code>

Nach dem Login kopieren

1

<code><div aos="fade-down-left"></div></code>

Nach dem Login kopieren

Flip

1

<code><div aos="flip-left"></div></code>

Nach dem Login kopieren

1

<code><div aos="flip-right"></div></code>

Nach dem Login kopieren

1

<code><div aos="flip-up"></div></code>

Nach dem Login kopieren

1

<code><div aos="flip-down"></div></code>

Nach dem Login kopieren

Zoom

1

<code><div aos="zoom-in"></div></code>

Nach dem Login kopieren

1

<code><div aos="zoom-in-up"></div></code>

Nach dem Login kopieren

1

<code><div aos="zoom-in-down"></div></code>

Nach dem Login kopieren

1

<code><div aos="zoom-in-left"></div></code>

Nach dem Login kopieren

1

<code><div aos="zoom-in-right"></div></code>

Nach dem Login kopieren

1

<code><div aos="zoom-out"></div></code>

Nach dem Login kopieren

1

<code><div aos="zoom-out-up"></div></code>

Nach dem Login kopieren

1

<code><div aos="zoom-out-down"></div></code>

Nach dem Login kopieren

1

<code><div aos="zoom-out-right"></div></code>

Nach dem Login kopieren

1

<code><div aos="zoom-out-left"></div></code>

Nach dem Login kopieren

Different settings examples

1

2

3

<code><div aos="fade-up"

     aos-duration="3000">

</div></code>

Nach dem Login kopieren

1

2

3

4

<code><div aos="fade-down"

     aos-easing="linear"

     aos-duration="1500">

</div></code>

Nach dem Login kopieren

1

2

3

4

<code><div aos="fade-right"

     aos-offset="300"

     aos-easing="ease-in-sine">

</div></code>

Nach dem Login kopieren

1

2

3

4

5

<code><div aos="fade-left"

     aos-anchor="#example-anchor"

     aos-offset="500"

     aos-duration="500">

</div></code>

Nach dem Login kopieren

1

2

3

4

5

<code><div aos="fade-zoom-in"

     aos-easing="ease-in-back"

     aos-delay="300"

     aos-offset="0">

</div></code>

Nach dem Login kopieren

1

2

3

4

<code><div aos="flip-left"

     aos-easing="ease-out-cubic"

     aos-duration="2000">

</div></code>

Nach dem Login kopieren

Anchor placement

1

2

3

<code><div aos="fade-up"

     aos-anchor-placement="top-bottom">

</div></code>

Nach dem Login kopieren

1

2

3

<code><div aos="fade-up"

     aos-anchor-placement="center-bottom">

</div></code>

Nach dem Login kopieren

1

2

3

<code><div aos="fade-up"

     aos-anchor-placement="bottom-bottom">

</div></code>

Nach dem Login kopieren

1

2

3

<code><div aos="fade-up"

     aos-anchor-placement="top-center">

</div></code>

Nach dem Login kopieren

1

2

3

<code><div aos="fade-up"

     aos-anchor-placement="center-center">

</div></code>

Nach dem Login kopieren

1

2

3

<code><div aos="fade-up"

     aos-anchor-placement="bottom-center">

</div></code>

Nach dem Login kopieren
<script> $(&#39;.hero__scroll&#39;).on(&#39;click&#39;, function(e) { $(&#39;html, body&#39;).animate({ scrollTop: $(window).height() }, 1200); }); </script>

Das obige ist der detaillierte Inhalt vonWie implementiert man Seitenscroll-Animationseffekte in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
css3实现页面滚动动画
Vorheriger Artikel：Was ist das Konzept des mehrspaltigen Layouts? Anwendung des mehrspaltigen CSS-Layouts (Beispielcode) Nächster Artikel：So erzielen Sie den Effekt, eine einzelne Textzeile nach oben zu scrollen (Code im Anhang)
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage