スクロールベースのアニメーション🔥🔥

11682 ワード
テキストリンク
いくつかの時点で、私たちのほとんどは、gsapを使用しているIntersectionObserver またはjQuery(C ' monの人、そのJavaScriptの代わりにjQueryを使用しているのは、Web開発のためにIEを使用するようなものです)、将来的には、これはCSSを使用して行うことができます!
いいえ、それはタイポではないと私は正気ではない.を使用することが可能です@scroll-timeline . しかし、すべては罰金でダンディではありません、これはまだドラフトにあります.

The Scroll-linked Animations is a new addition to CSS that defines a way for creating animations that are linked to a scroll offset of a scroll container. The specification is still in draft, and in no way finalised nor official, it already has experimental support in Chromium.


いつか、多分1年かそこらで、すべての主要なブラウザーはそれをサポートします(誰でも、インターネットエクスプローラーについて心配します?

セットアップ
私は、アニメーションを示すために、Codepenを使用しています.のは、期限切れの機能を有効にすることから始めましょう.移動するchrome://flagsと“実験的なWebプラットフォーム機能”を有効にします.
若干の基本的なHTMLを加えてください
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=">
    <title></title>
</head>

<body>
    <p>scroll down</p>

<div class="container">
    <div class="inner">
        <h1>Scroll based animations in CSS is so coooool</h1>
        <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="placeholder image" class="image" id="image">
    </div>
</div>

<section></section>
ここでは何も複雑です.ちょうど体のための基本的なアウトライン.その中でp と2div とのh1 and img . 高さのセクションがあります100vh いくつかのスクロールスペースを与えるために以下.
私はこのチュートリアルのためにsassを使用しますが、これはあまりにもCSSで行うことができます.ポストの終わりにCSSバージョンのリンクを追加します.私はスクロールベースのアニメーションに関連していないいくつかのクイックスタイリングを追加するつもりです.
// Unimportant and boring styling

body {
    background-color: #ffd9d1;
}

section {
    height: 100vh;
}

p {
    font-size: 1.5em;
    display: grid;
    text-transform: uppercase;
    letter-spacing: 1em;
    place-items: center;
    margin-top: 100px;
}

.inner {
    width: 60%;
}

.container {
    text-align: center;
    min-height: 80vh;
    display: grid;
    place-items: center;

    h1 {
        font-size: 3em;
        font-family: Poppins;
    }

    .image {
        height: 400px;
        background-size: cover;
        margin-top: 3em;
    }
}
私はちょうど位置、寸法、フォントを追加しました.あなたはアイデアを得る.ではなく、このデモに関連する.コードのcruxに行きましょう.我々は非常にシンプルな作成しますpulse 画像のスケールで動作するキーフレームアニメーション.
@keyframes demo {
    0% {
        border: 20px solid yellow;
    }

    25% {
        border: 20px solid green;
    }

    50% {
        border: 20px solid blue;
    }

    100% {
        border: 20px solid red;
    }
}
ここでは何も複雑です.ちょうどアニメーションの様々な段階で国境を変更します.私は、あなたがスクロールバーの位置を変更するたびに色を変更し、それがデバッグに役立つ(私は境界をアニメーション化することはよく知っているが、私は物事を複雑にしたくない)知っているので、境界線を移動することを選択しました.次に、タイムラインを作成する必要があります.
@scroll-timeline timeline {
    time-range: 1s;
}
我々は@scroll-timeline タイムラインを作る規則.電話しましたtimeline . この中で、私はtime-range すなわち、私がアニメーションを実行したい時間の量.我々が定義したようにanimation-duration 1 sになるためにtime-range その同じ期間を反映する.だから、上から下までスクロール(例えば0 %〜100 %)から1秒でアニメーションを進めるべきです.
The time-range プロパティは時計の時刻ではありません.マッピングです.このプロパティは、@scroll-timeline ルール.いくつかの例を見て、これをよく理解してみましょう.
  • animation-duration & time-range is 1 second私の言ったとおりtime-range マッピングです.だから、我々のキーフレームの0 %は1秒に0秒と100 %のマップにマップされます.この場合、アニメーションは、ユーザーが一番上から下にスクロールするように、最初から最後まで移動します
  • animation-duration is 1s & time-range is 2sこの時間、我々のキーフレームの0 %は0秒と100 %のマップに2秒にマップします.
    • したがって、アニメーションは2倍速く行きます.

    タイムラインのプロパティ
    スクロールタイムラインには、いくつかのプロパティがあります.
  • source
  • orientation
  • scroll-offsets
    • チュートリアルを通るので、これらを見ていきます.

    ビットと断片のリンク
    我々はリンクする必要がありますscroll-timeline , keyframe animation 我々の目的で.アニメーションするオブジェクトに次のプロパティを追加します.
    #image {
    animation: 1s linear forwards demo;
    animation-timeline: pulse-timeline;
}
    最初の行は何も新しいです、ちょうどそれのために1回繰り返すためにオブジェクトのアニメーションを設定する1 第二につ目のラインは面白い.私はanimation-timeline それは、我々が以前に作ったタイムラインをリンクします.
    このことから、スクロールベースのアニメーションの3つのコンポーネントは次のようになります.
  • アニメーション( EG Keyframe )
  • スクロールタイムライン(我々が作ったEGパルスタイムライン)
  • リンク

    • スクロールオフセット
    コードを実行すると、オブジェクトがビューポートから出てもアニメーションが継続します.ここがどこですscroll-offsets プロパティが画像に入ります.The scroll-property 2つの値すなわち開始点のオフセットと終わりのオフセットをとります.
    @scroll-timeline pulse-timeline {
    time-range: 1s;
    scroll-offsets: 0%, 100vh;
}
    私は私たちのために私たちのための作品として出発値をだますが、私は2番目の値を設定する100vh これは100vh . あなたが気づくならば、マッピング速度が減少したことを示すアニメーション速度も減速しました.

    スクロール方向
    デフォルトでscroll-timeline 上から下、すなわち垂直方向にスクロールします.水平方向の向きを指定すると、水平スクロール中にアニメーションが動作します.

    ソース
    ソースはスクロール可能な要素またはコンテナー(デフォルトはbody)です.スクロールはアニメーションの活性化をトリガーし、タイムラインを変更します.

    完全なデモ

    結論
    通常、スクロールリンクされたアニメーションのために、私はScrollMagicとともにGSAP/交差点オブザーバーを使います.GSAPのいくつかの部分は無料ではありません、そして、私はスクロール魔法が大きい学習曲線を持っていると感じます(あるいは、ドキュメンテーションは素晴らしいです).これらはまた、バンドルサイズを増やします.
    CSSでスクロールベースのアニメーションを見るのは素晴らしいです、そして、私はかなりこれが行く方法であると確信しています.
    それは今のところ、あなたはこのポストが好き願っています.閉じるこの動画はお気に入りから削除されています.バイ👋
    vueのv-ifとv-else-if判断の応用
    ローマへの整数