スクロール画像バーを実現するための CSS サンプルコード

一部の Web サイトでは、画像が連続的にスクロールしているのをよく見かけます。この効果は、CSS アニメーション効果によって実現できます。具体的な効果は以下のとおりです

アニメーションを通じて左に移動することが基本原則です。

まず、同じ行にある 2 セットの同一の画像がある場合、画像全体を 1 セットの画像の長さだけ左に移動します。

こうすることで、アニメーションが終了するとすぐに元の位置に戻り、このとき 2 番目の画像セットと交互に表示されるため、一連の画像が連続して左にスクロールしているように見えます。

具体的な手順は次のとおりです。

1. メインコードの各部分に同じ画像を2セット設定する

 <ナビ>
        <ul>
            <li><img src="画像/1 (2).jpg" alt=""></li>
            <li><img src="画像/2 (2).jpg" alt=""></li>
            <li><img src="画像/3 (2).jpg" alt=""></li>
            <li><img src="画像/1 (2).jpg" alt=""></li>
            <li><img src="画像/2 (2).jpg" alt=""></li>
            <li><img src="画像/3 (2).jpg" alt=""></li>
        </ul>
    </nav>

2. ナビゲーションのサイズを設定します。幅は、合計した写真のグループの幅で、高さは写真の高さです。

        ナビゲーション{
            幅: 750ピクセル;
            高さ: 170ピクセル;
            境界線: 1px 実線の赤;
            マージン: 100px 自動;
}

3. ulのサイズを設定します。幅はnavの2倍、高さはnavと同じで、アニメーション関連のプロパティを指定します。

ul {
            幅: 200%;
            高さ: 100%;
            アニメーション: picmove 5 秒線形無限前進;
        }

4.アニメーションを定義します。主に、一連の画像の長さを左に移動します。

 @keyframes picmove {
            から {
                変換: translate(0);
            }
            に {
                変換: translate(-750px);
            }
        }

5. マウスホバーとアニメーション一時停止の効果を追加する

ul:ホバー{
            アニメーション再生状態: 一時停止;
        }

6. 最後に、余分な部分を非表示にするために、overflow:hidden を nav に追加して、スクロール画像バーのセット全体が完成します。

全体のコードは以下のとおりです

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        ul {
            リストスタイル: なし;
        }
        ナビゲーション{
            幅: 750ピクセル;
            高さ: 170ピクセル;
            境界線: 1px 実線の赤;
            マージン: 100px 自動;
            オーバーフロー: 非表示;
        }
        ul {
            幅: 200%;
            高さ: 100%;
            アニメーション: picmove 5 秒線形無限前進;
        }
        @keyframes picmove {
            から {
                変換: translate(0);
            }
            に {
                変換: translate(-750px);
            }
        }
        画像 {
            幅: 250ピクセル;
            高さ: 170ピクセル;
            フロート: 左;
        }
        ul:ホバー{
            アニメーション再生状態: 一時停止;
        }
    </スタイル>
</head>
<本文>
    <ナビ>
        <ul>
            <li><img src="画像/1 (2).jpg" alt=""></li>
            <li><img src="画像/2 (2).jpg" alt=""></li>
            <li><img src="画像/3 (2).jpg" alt=""></li>
            <li><img src="画像/1 (2).jpg" alt=""></li>
            <li><img src="画像/2 (2).jpg" alt=""></li>
            <li><img src="画像/3 (2).jpg" alt=""></li>
        </ul>
    </nav>
</本文>
</html>

要約する

上記はエディターが紹介した CSS スクロール画像バーのサンプルコードです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: フォーム入力ボックスに関するWebデザインのヒント

>>: 乱数、文字列、日付、検証コード、UUIDを生成するMySQLメソッド