CSS3はリストの無限スクロール/カルーセル効果を実現します

効果プレビュー

アイデア

現在のリストを最後の項目までスクロールし、すぐに最初の項目に戻ります。

問題

1. 無限カルーセルを実装するにはどうすればいいですか? 問題は、リストを最後までスクロールすると、下部に空白スペース (余分なスペース) ができてしまうことです。どのように対処すればよいですか?
リストの先頭にある重複項目をリストの末尾に追加するだけです (たとえば、図の 10 以降の 1、2、3、4、5 は重複項目です)。
追加される重複項目の数は、現在のリストの高さとリスト項目の高さによって決まります。例:
リストの高さが150pxで、リスト項目の高さ30px場合、空白を削除するには、現在のリストの末尾に150 / 30 = 5の重複項目を追加する必要があります。

2. ユーザーが気付かないうちに最初の項目に戻れるようにするにはどうすればよいでしょうか。重複した項目を追加した後、切り替えのタイミングを制御し、リストが最後の項目の末尾（重複した項目の最初の項目の先頭）までスクロールするとすぐに切り替えます。例えば：
リストに10項目がある場合、リスト10 * 30px = 300pxまで移動したときにすぐに切り替えて、気づかれない切り替えを実現します。

コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>無限スクロールリスト</title>
</head>
<スタイル>
    。容器 {
        位置: 相対的;
        背景色: #a4ffcc;
        /* 親コンテナには明確な高さが必要です */
        高さ: 150px;
        幅: 200ピクセル;
        マージン: 自動;
        オーバーフロー: 非表示;
    }

    .コンテナ > .スクロールリスト {
        位置: 絶対;
        上: 0;
        左: 0;
        幅: 100%;
        アニメーション: 6 秒のスクロール、線形、無限、通常;
    }

    .container > .scroll-list > div {
        幅: 100%;
        /* スクロール可能なアイテムには特定の高さが必要です */
        高さ: 30px;
        背景色: #1ea7ff;
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
        色: 白;
    }

    .container > .scroll-list > div:nth-child(2n) {
        背景色: #18d9f8;
    }

    @keyframes スクロール {
        100% {
            /*スクロールするコンテンツの合計高さ*/
            上: -300px;
        }
    }
</スタイル>
<本文>
    <div class="コンテナ">
        <div class="スクロールリスト">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <!-- 次のコードは、スクロール コンテンツをもう 1 画面表示できるようにします (空白スペース/無限カルーセルを削除)。高さに応じて数値を計算してください -->
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</本文>
</html>

CSS3 でリストの無限スクロール/カルーセルを実装する方法についての記事はこれで終わりです。CSS3 リストスクロールとカルーセルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSS スタイルを HTML 外部スタイルシートにインポートする方法

>>: HTMLファイルで外部CSSファイルを導入する場合のパスの書き方について簡単にまとめます