简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

css3怎麼實現頁面滾動動畫特效？

藏色散人
發布： 2018-08-06 14:32:17
原創
4502 人瀏覽過

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

css3怎麼實現頁面滾動動畫特效？

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

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

<link rel="stylesheet" href="aos.css" />
<script src="jquery.min.js">
</script><script src="aos.js"></script>
登入後複製
<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>
登入後複製
<code><div aos="fade-down"></div></code>
登入後複製
<code><div aos="fade-right"></div></code>
登入後複製
<code><div aos="fade-left"></div></code>
登入後複製
<code><div aos="fade-up-right"></div></code>
登入後複製
<code><div aos="fade-up-left"></div></code>
登入後複製
<code><div aos="fade-down-right"></div></code>
登入後複製
<code><div aos="fade-down-left"></div></code>
登入後複製

Flip

<code><div aos="flip-left"></div></code>
登入後複製
<code><div aos="flip-right"></div></code>
登入後複製
<code><div aos="flip-up"></div></code>
登入後複製
<code><div aos="flip-down"></div></code>
登入後複製

Zoom

<code><div aos="zoom-in"></div></code>
登入後複製
<code><div aos="zoom-in-up"></div></code>
登入後複製
<code><div aos="zoom-in-down"></div></code>
登入後複製
<code><div aos="zoom-in-left"></div></code>
登入後複製
<code><div aos="zoom-in-right"></div></code>
登入後複製
<code><div aos="zoom-out"></div></code>
登入後複製
<code><div aos="zoom-out-up"></div></code>
登入後複製
<code><div aos="zoom-out-down"></div></code>
登入後複製
<code><div aos="zoom-out-right"></div></code>
登入後複製
<code><div aos="zoom-out-left"></div></code>
登入後複製

Different settings examples

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

Anchor placement

<code><div aos="fade-up"
     aos-anchor-placement="top-bottom">
</div></code>
登入後複製
<code><div aos="fade-up"
     aos-anchor-placement="center-bottom">
</div></code>
登入後複製
<code><div aos="fade-up"
     aos-anchor-placement="bottom-bottom">
</div></code>
登入後複製
<code><div aos="fade-up"
     aos-anchor-placement="top-center">
</div></code>
登入後複製
<code><div aos="fade-up"
     aos-anchor-placement="center-center">
</div></code>
登入後複製
<code><div aos="fade-up"
     aos-anchor-placement="bottom-center">
</div></code>
登入後複製
<script> $(&#39;.hero__scroll&#39;).on(&#39;click&#39;, function(e) { $(&#39;html, body&#39;).animate({ scrollTop: $(window).height() }, 1200); }); </script>

以上是css3怎麼實現頁面滾動動畫特效？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css3实现页面滚动动画
來源：php.cn
上一篇：多列佈局的概念是什麼？ CSS多列佈局的應用（實例程式碼） 下一篇：如何實現單行文字向上捲動的效果（附程式碼）
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
降低捲動背景影像的不透明度，限制最小不透明度 我試圖讓背景圖像減少滾動時的不透明度，一旦離開登陸頁面，使用vanillajavascript將其降至最低0.5。我嘗試在滾動函數中添加Math.max()使其僅降至0.5，但它會...
來自於 2024-04-04 23:50:53
0
1
1329
如何使文字在點擊時變成新元素（如分隔線）？ 我正在嘗試找到一種方法，使頁面上的某些文字在單擊時變成分隔符號/新元素。我不知道如何解釋它，但是就像，想像一個下面帶有標題的圖像-單擊標題，然後上面的圖像變得像一個文本框/不同的圖...
來自於 2024-04-04 11:21:03
0
1
3580
Vanilla JS setTimeout()：辨識錯誤行為 我的漢堡式選單上有一個用HTML、CSS和VanillaJavaScript寫的動畫。預期結果當您單擊漢堡菜單按鈕時，應該發生以下事件：單擊漢堡菜單圖標時：main旋轉180°並在...
來自於 2024-04-02 20:44:40
0
1
284
選擇事件改變時，CSS動畫觸發對應效果 我正在嘗試製作一個React應用程序，現在我有一個選擇輸入框，裡面有一些寶可夢，我需要做的是每當選擇改變（即寶可夢改變）時，寶可夢精靈會進行一個小的搖晃動畫。目前我只有一個改變的精...
來自於 2024-04-01 09:16:28
0
1
350
為什麼每次儲存我的vite react專案時，都會在頁面主體中新增新的canvas元素，而不是取代現有的canvas元素？ 我正在嘗試開始學習ThreeJs（我也是JavascriptWeb開發的新手）。看了一些教學後，我從vite和react開始，然後從基本的旋轉立方體開始。該部分有效。但是根據我所讀...
來自於 2024-03-30 09:57:49
0
1
396
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！