こんにちは!縁紡ぐです。
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 という文字が表示されていますの気づきましたか?ここからがバックグラウンドカラーが黒でないことが分かりました。なので、デバイスに合わせた100%という設定ができたことがわかります。
アニメーションを設定する
これが、完成したCSSになります。
.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を使った方がいいいという情報もありますので、どちらで実現してもいいと思います。
コメント