BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSS3] CSS3リスト無限スクロール/回転効果

2022-01-21 10:03:34

効果プレビュー

感想

現在のリストを最後のアイテムまでスクロールし、瞬時に最初のアイテムに戻ります。

発行ポイント

1. 無限回転を実現するための最適な方法とは
この質問は、リストが最後までスクロールしたときに、下の方にあるホワイトスペース（余分なスペース）をどのように処理するかということです。
で リストの末尾にある 追加 リストの先頭の項目が重複している (例：図の10の後に表示される1,2,3,4,5は、いずれも重複項目)
追加する繰り返しアイテムの数は、現在のリストの高さとリストアイテムの高さによって決まります。
リストの高さ 150px リストアイテムの高さ 30px を追加するか、現在のリストの末尾に 150 / 30 = 5 の項目で空白を削除します。

2. 認識させずに最初の項目に戻させる方法
繰り返し項目を追加した後、リストが最後の項目の最後（繰り返し項目の最初の項目の最初）までスクロールしたら、すぐに切り替えるようにタイミングを制御します。例
リスト項目合計 10 アイテムに移動させ、リストを 10 * 30px = 300px まで移動したらすぐに切り替え。

コード 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>List infinite scroll</title>
</head>
<style>
    .container {
        position: relative;
        background-color: #a4ffcc;
        /* The parent container needs to have an explicit height */
        height: 150px;
        width: 200px;
        margin: auto;
        overflow: hidden;
    }

    .container > .scroll-list {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        animation: scroll 6s linear infinite normal;
    }

    .container > .scroll-list > div {
        width: 100%;
        /* Scrolling items need to have a specific height */
        height: 30px;
        background-color: #1ea7ff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }

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

    @keyframes scroll {
        100% {
            /* Total height of content to be scrolled */
            top: -300px;
        }
    }
</style>
<body>
    <div class="container">
        <div class="scroll-list">
            <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>
            <! -- The following code is to allow scrolling content to be displayed on one more screen (remove white space/infinite rotation): please do your own calculations based on height -->
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</body>
</html>

リストの無限スクロール/回転を実現するためのCSS3に関するこの記事は、より関連するCSS3リストスクロール回転コンテンツは、スクリプトホームの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトホームをサポートして願っています！に導入されています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します