CSSで文字を表示するとき動きをつける

こんにちは！縁紡ぐです。
CSSは使いようによっては様々な表現が可能な言語です。
CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。

CSSで文字を表示するときに動きをつける

文字を表示するときに、動きがあると目が行きやすくなり、認識してもらいやすくなる効果があります。スマホで、スクロールして一気に読んでいく今の時代には、いかに見てもらいたいポイントや、読んでいる人が気になるポイントがここに書いてあるよ！ってアピールできるかが大切です。

htmlを準備する

<body>
    <div class="shop-title">
        <div class="animation-name">
            <span class="char">C</span>
            <span class="char">a</span>
            <span class="char">f</span>
            <span class="char">e</span>
            <span class="char">　 </span>
            <span class="char">p</span>
            <span class="char">u</span>
            <span class="char">-</span>
            <span class="char">a</span>
            <span class="char">-</span>
            <span class="char">p</span>
            <span class="char">u</span>
        </div>
    </div>
</body>

divのブロック要素の中に、spanでインライン要素で、店名を並べいます。

cssを設定する

最初に画面いっぱいに表示して、店名やイメージを伝えているホームページが多いと思います。その中で、店名を動きをつけて表示するようにします。

vh でデバイスに合わせて表示領域を指定する

ユーザーさんは、パソコンだけでなく、タブレットやスマホで閲覧にくるので、デバイスに合わせて画面に合わせて最大に表示するという、　『vh』を使います。

.shop-title {
    /* 親 */
    position: relative;
    /* 画面幅100％ */
    height: 100vh;
    /* 背景色 */
    background-color: black;
}

こうすることで、画面幅いっぱいのバックグラウンドが黒に変わります。

初期表示では、画面いっぱいが黒くなっています。新たな、div要素を加えてスクロールすると、ちゃんとバックグラウンドカラーが黒でなくなっていることが確認できます。

左下に　concept　という文字が表示されていますの気づきましたか？ここからがバックグラウンドカラーが黒でないことが分かりました。なので、デバイスに合わせた１００％という設定ができたことがわかります。

アニメーションを設定する

これが、完成したＣＳＳになります。

.shop-title {
    /* 親 */
    position: relative;
    /* 画面幅100％ */
    height: 100vh;
    /* 背景色 */
    background-color: black;
}

.animation-name {
    /* 親を基準とする */
    position: absolute;
    /* 上左50%幅をあける */
    top: 50%;
    left: 50%;
    /* 自要素の半分を戻すことで画面中央に表示 */
    transform: translate(-50%, -50%);
    /* 文字色白 */
    color: white;
}

.animation-name .char{
    /* ブロックに変更 */
    display: inline-block;
    /* 終了までの時間指定 */
    animation-duration: 3s;
    /* ループ方法指定 */
    animation-iteration-count: 1;
    /* keyframeを指定 */
    animation-name: kf-animation-name;  
}

.animation-name .char:nth-child(1) { 
    /* 開始までの時間 */
    transition-delay: 0.2s; 

}

.animation-name .char:nth-child(2) { 
    /* 開始までの時間 */
    transition-delay: 0.4s;
}

.animation-name .char:nth-child(3) { 
    /* 開始までの時間 */
    transition-delay: 0.6s;
}

.animation-name .char:nth-child(4) { 
    /* 開始までの時間 */
    transition-delay: 0.8s;
}

.animation-name .char:nth-child(6) { 
    /* 開始までの時間 */
    transition-delay: 1s;
}

.animation-name .char:nth-child(7) { 
    /* 開始までの時間 */
    transition-delay: 1.2s;
}

.animation-name .char:nth-child(8) { 
    /* 開始までの時間 */
    transition-delay: 1.4s;
}

.animation-name .char:nth-child(9) { 
    /* 開始までの時間 */
    transition-delay: 1.4s;
}

.animation-name .char:nth-child(10) { 
    /* 開始までの時間 */
    transition-delay: 1.6s;
}

.animation-name .char:nth-child(11) { 
    /* 開始までの時間 */
    transition-delay: 1.8s;
}

.animation-name .char:nth-child(12) { 
    /* 開始までの時間 */
    transition-delay: 2s;
}

@keyframes kf-animation-name {
    0% {
        opacity: 0;
        transform: translateY(-80%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

文字ひとつひとつに対して、表示されるタイミングを調整しています。

これをforなどで短く書けないかなって思って、少し調べるとSCSSなら使えるらしいです。いきなりSCSSを使うよりCSSを理解してからSCSSを使った方がいいいという情報もありますので、どちらで実現してもいいと思います。