コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS3でページスクロールのアニメーション効果を実装するにはどうすればよいですか?

藏色散人
リリース： 2018-08-06 14:32:17
オリジナル
4515 人が閲覧しました

本篇文章主要介绍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 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3实现页面滚动动画
ソース：php.cn
前の記事：複数列レイアウトの概念は何ですか? CSSマルチカラムレイアウトの適用（サンプルコード） 次の記事：テキストを 1 行上にスクロールする効果を実現する方法 (コードは添付されています)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
スクロール背景画像の不透明度を下げ、最小不透明度を制限します 背景画像を取得して、スクロール時に不透明度を下げ、ランディングページから離れると、vanillajavascriptを使用して不透明度を最小値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、およびバニラ JavaScript で作成しました。期待される結果 ハンバーガー メニュー ボタンをクリックすると、次の...
から 2024-04-02 20:44:40
0
1
284
選択イベントが変化すると、CSS アニメーションが対応する効果をトリガーします。 私は React アプリを作ろうとしています。現在、いくつかのポケモンが入った選択入力ボックスがあります。私がしなければならないことは、選択が変更される (つまり、ポケモンが変更さ...
から 2024-04-01 09:16:28
0
1
350
Vite React プロジェクトを保存するたびに、既存のキャンバス要素を置き換えるのではなく、新しいキャンバス要素がページ本文に追加されるのはなぜですか? ThreeJs の学習を始めようとしています (JavaScript Web 開発も初めてです)。いくつかのチュートリアルを見た後、Vite と React から始め、次に基本的な...
から 2024-03-30 09:57:49
0
1
396
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート