CSS を使用して fullpage.js のフルスクリーンスクロール効果を実装するサンプルコード

最近 CSS を勉強していたとき、 2 つの CSS プロパティだけを使用して全画面スクロール効果を作成できることを発見しました。

スクロールスナップタイプ
スクロールスナップ位置合わせ

これを使用すると、 fullpage.jsの全画面スクロール効果を実現できます。実際、この全画面スクロール効果の理論は非常に単純です。つまり、 js を使用してインターフェイスのスクロールを監視し、インターフェイスが特定の値までスクロールすると、インターフェイスが次の画面にスクロールし続けるようにします。画面サイズによって生じる互換性の問題を考慮するのは非常に面倒です。

今日言及した 2 つのプロパティは、次の 2 つの理由によりfullpage.jsを置き換えることはできません。

ブラウザとの互換性の問題があります。
CSS プロパティはイベントをリッスンできないため、アニメーションが完了したときのコールバック関数を提供することはできません。

1. 互換性

現在、主流のブラウザはすでにこれら 2 つの CSS プロパティをサポートしているため、安心して使用できます。 IE ブラウザとの互換性が必要な場合は、 fullpage.js選択してください。

2. 使用

使用方法は実はとても簡単です。 scroll-snap-type属性は、フルスクリーンスクロールが必要なコンテナの親コンテナに配置し、 scroll-snap-alignはフルスクリーンスクロールコンテナに配置する必要があります。これ以上説明する意味はありません。コードを直接見れば、この 2 つの CSS 属性の使い方がはっきりとわかります。

ウェブページ全体の完全なコードは非常にシンプルなので、以下に貼り付けるだけです。

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>CSS スクロール スナップ</title>
    <スタイル>
      体 {
        マージン: 0;
      }

      。容器 {
        高さ：100vh;
        overflow-y: スクロール;
        /* 親コンテナの scroll-snap-type プロパティを使用します */
        scroll-snap-type: y 必須;
      }

      セクション {
        パディング: 112px;
        高さ: calc(100vh - 224px);
        色: 白;
        /* スクロールする必要があるコンテナに scroll-snap-align プロパティを使用します */
        スクロールスナップ位置合わせ: 開始;
      }

      セクション:n番目の型(1) {
        背景色: #60af15;
      }

      セクション:n番目の型(2) {
        背景色: #158baf;
      }

      セクション:n番目の型(3) {
        背景色: #af1581;
      }

      セクション h3 {
        フォントサイズ: 48px;
      }

      セクション p {
        フォントサイズ: 20px;
      }
    </スタイル>
  </head>
  <本文>
    <div class="コンテナ">
      <セクション>
        <h3>ここにサブタイトルがあります</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          失った尊厳は速やかに回復され、最大の利益が得られる
          voluptatibus。期間としてaccasamusは想定されます。
          結果的に過失が起こり、その結果、誤りが起こり、例外が起こります
          これは素晴らしいことですが、目立たず、目立つ場所に置くと、
          quo quod reiciendis は拒否されましたが、解決策はいつ見つかるでしょうか?
          運動はボリュームを反映する主な場所です
          voluptatum。広告はcommodi culpa cumque debitis delectus dolorum、eiusで
          エラーとexplicobはipsumで無意味ですiste labore laborum libero magni
          良い人であることがどういうことかは分かりませんが、
          recusandae reprehenderit saepe 同様の液体 vero vitae voluptas
          voluptatem! 素晴らしい。
        </p>
      </セクション>
      <セクション>
        <h3>ここにサブタイトルがあります</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          失った尊厳は速やかに回復され、最大の利益が得られる
          voluptatibus。期間としてaccasamusは想定されます。
          結果的に過失が起こり、その結果、誤りが起こり、例外が起こります
          これは素晴らしいことですが、目立たず、目立つ場所に置くと、
          quo quod reiciendis は拒否されましたが、解決策はいつ見つかるでしょうか?
          運動はボリュームを反映する主な場所です
          voluptatum。広告はcommodi culpa cumque debitis delectus dolorum、eiusで
          エラーとexplicobはipsumで無意味ですiste labore laborum libero magni
          良い人であることがどういうことかは分かりませんが、
          recusandae reprehenderit saepe 同様の液体 vero vitae voluptas
          voluptatem! 素晴らしい。
        </p>
      </セクション>
      <セクション>
        <h3>ここにサブタイトルがあります</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          失った尊厳は速やかに回復され、最大の利益が得られる
          voluptatibus。期間としてaccasamusは想定されます。
          結果的に過失が起こり、その結果、誤りが起こり、例外が起こります
          これは素晴らしいことですが、目立たず、目立つ場所に置くと、
          quo quod reiciendis は拒否されましたが、解決策はいつ見つかるでしょうか?
          運動はボリュームを反映する主な場所です
          voluptatum。広告はcommodi culpa cumque debitis delectus dolorum、eiusで
          エラーとexplicobはipsumで無意味ですiste labore laborum libero magni
          良い人であることがどういうことかは分かりませんが、
          recusandae reprehenderit saepe 同様の液体 vero vitae voluptas
          voluptatem! 素晴らしい。
        </p>
      </セクション>
    </div>
  </本文>
</html>

コードが複雑ではないことがわかります。これら 2 つの CSS プロパティに注目してみましょう。

3. スクロールスナップタイプ

この CSS プロパティには次の値があります。

none: このスクロールコンテナーの表示可能なビューポートがスクロールされても、処理は実行されません。

x : スクロールコンテナーは、水平軸上の位置にのみスナップします。
y : スクロールコンテナーは垂直軸上の位置にのみスナップします。
block: スクロールコンテナーは、ブロック軸上のスナップ位置にのみスナップします。
inline: スクロールコンテナーは、インライン軸上のスナップ位置にのみスナップします。
both: スクロールコンテナーは、両方の軸の位置に独立してスナップします (各軸の異なる要素にスナップする可能性があります)。
必須: スクロールコンテナーをスクロールすると、臨界値を超えると自動的に次のコンテナーにスクロールします。
近接性: スクロールコンテナーがスクロールされた場合、臨界値を超えると次のコンテナーに自動的にスクロールしなくなります。

注意する必要があるのは、上記の太字でmandatoryされたプロパティです。mandatory を使用すると、全画面スクロールになります。スクロールが一定のしきい値を超えると、自動的に次の画面にスクロールします。一定のしきい値を超えてスクロールしない場合は、リバウンドします。

proximityの違いは、一定のしきい値を超えてスクロールした後は通常通りスクロールできる（一方、 mandatory次の画面に直接進む）ことと、一定のしきい値を超えてスクロールしなかった場合はリバウンドすることです。

これら 2 つのプロパティを理解するのは実はとても簡単です。上記のコードを変更して、自分で体験してみてください。

注意:スクロールコンテナーの高さが画面の高さよりも既に大きい場合は、強制スクロールによって一部のコンテンツが読みにくくなる可能性があるため、 mandatoryは注意して使用してください。

4. スクロールスナップアライン

この CSS プロパティには次の値があります。

none: コンテナーは、親コンテナーで定義された対応する軸にスナップしません。 start: コンテナがキャプチャされる位置がコンテナの開始部分です。 end: コンテナがキャプチャされる位置がコンテナの終了位置になります。 center: コンテナがキャプチャされる場所はコンテナの中央部分です。

次の属性によって表されるコンテナの位置は、画像で明確に示せます。

5. 最後に

scroll-snapの他のプロパティのほとんどには重大な互換性の問題があることがわかったため、ここでは詳しく説明しません。興味がある場合は、CSS Scroll Snap にアクセスして直接確認してください。ただし、上記の 2 つのプロパティを使用するだけで十分です。

参考記事:

スクロールスナップアラインメント MDN

スクロールスナップ型 MDN

実用的な CSS スクロールスナップ

以上で、fullpage.js のフルスクリーンスクロール効果を CSS で実装するサンプルコードについての説明は終了です。CSS フルスクリーンスクロールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript で実装された 6 つの Web ページ画像カルーセル効果の詳細な説明

>>: Apache Log4j2 が核レベルの脆弱性と迅速な修正を報告