CssAnimation -無限スクロール-

こんにちは
普段バナー風にしてCSSのアニメーションで遊んでいます今回は架空CM作ってみました　初心者の方なら絶対やりたい無限スクロール　どんな風に作ったのか改めておさらいします

1.コンテナ設定
中に入れる為の箱を作ります

HTML


    <body>
        <div class="container">
            
        ここの中にスクロールリストなどを記述

        </div>
    </body>

コンテナの大きさと背景設定

CSS


    .container{
        width: 300px;
        height: 300px;
        background: linear-gradient(180deg, #66b5ff, #66b5ff, #0084ff, #0084ff, #66b5ff, #66b5ff);
    }

2.左へスクロールする設定
コンテナの中に左スクロール用（scroll-l）を作りその中にリスト（list-l）を記述　リストは同じものを２つ並べる
アイテムのサイズを指定したいので　 classでも良いんだけど今回はid="image"をつけた

HTML


    <div class="scroll-l">
        <div class="list-l">
            <img src="item-img/sitem0-3.png" id="image" alt="営業">
            <img src="item-img/sitem1.png" id="image" alt="大工">
        </div>

        <div class="list-l">
            <img src="item-img/sitem0-3.png" id="image" alt="営業">
            <img src="item-img/sitem1.png" id="image" alt="大工">
        </div>
    </div>

アイテムの大きさと位置決め

CSS


    #image{
        width: 50px;　※アイテムのサイズ指定
    }
    .scroll-l{
        display: flex;　※リストを横に並べる
        overflow: hidden;
        padding-top: 6px;
    }

スクロール設定

CSS


    .list-l{
        display: flex;　※アイテムを横に並べる
        animation: reform 30s infinite linear .5s both;
    }
    @keyframes reform{
        from{ transform: translate(0);}
        to{ transform: translate(-100%);}
    }

これで左へスクロールする設定は完了

3.右へスクロールする設定
コンテナの中に右スクロール用（scroll-r）を作りその中にリスト（list-r）を記述

HTML


    <div class="scroll-r">
        <div class="list-r">
            <img src="item-img/sitem21.png" id="image" alt="きれいになった家">
            <img src="item-img/sitem19.png" id="image" alt="網戸">
        </div>

        <div class="list-r">
            <img src="item-img/sitem21.png" id="image" alt="きれいになった家">
            <img src="item-img/sitem19.png" id="image" alt="網戸">
        </div>
    </div>

位置決め

CSS


    .scroll-r{
        display: flex;
        flex-direction: row-reverse; ※これ記述
        overflow: hidden;
        padding-top: 160px;
    }

スクロール設定

CSS


    .list-r{
        display: flex;
        animation: reform-r 30s infinite linear .5s both;
    }
    @keyframes reform-r{
        from{ transform: translate(0);}
        to{ transform: translate(100%);}
    }

右へのスクロール設定完了

4.キャッチコピー
コンテナのすぐ下に記述

HTML


    <p>私たちが<br>お手伝いします<br>〇工務店</p>

位置決めやフォントサイズ　色を指定

CSS


    p{
        position: absolute;
        text-align: center;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 2rem;
        font-weight: 800;
        color: aliceblue;
    }

5.HTML全体像

HTML


    <body>
        <div class="container">
            <p>私たちが<br>お手伝いします<br>〇工務店</p>
    
            <div class="scroll-l">
                <div class="list-l">
                    <img src="item-img/sitem0-3.png" id="image" alt="営業">
                    <img src="item-img/sitem1.png" id="image" alt="大工">
                </div>
    
                <div class="list-l">
                    <img src="item-img/sitem0-3.png" id="image" alt="営業">
                    <img src="item-img/sitem1.png" id="image" alt="大工">
                </div>
            </div>
        
            <div class="scroll-r">
                <div class="list-r">
                    <img src="item-img/sitem21.png" id="image" alt="きれいになった家">
                    <img src="item-img/sitem19.png" id="image" alt="網戸">
                </div>
    
                <div class="list-r">
                    <img src="item-img/sitem21.png" id="image" alt="きれいになった家">
                    <img src="item-img/sitem19.png" id="image" alt="網戸">
                </div>
            </div>
        </div>
    </body>

CssAnimation

-無限スクロール-

目次