タイトルがパラパラと回転しながら落ちてくるアニメーションをつくってみた

2021/07/10 2021/07/18

サイトタイトルにちょっとした遊び心でアニメーションをつけたいなー、と思いパラパラと回転しながら落ちてくるアニメーションを作成しましたのでご紹介します！

デモ

まずはどんなものかをみて頂くためにこちらをどうぞ。

See the Pen
by omoshio (@omoshio)
on CodePen.

サンプルファイルも作成しました（こちら）。

CSSのアニメーションで回転と落ちてくる動作をつける

実際のコードを詳しくみていきましょう！
まずはHTMLです。

<h1>	
	<span class="dropTitle">サ</span>
	<span class="dropTitle">ン</span>
	<span class="dropTitle">プ</span>
	<span class="dropTitle">ル</span>
	<span class="dropTitle">テ</span>
	<span class="dropTitle">キ</span>
	<span class="dropTitle">ス</span>
	<span class="dropTitle">ト</span>
</h1>

HTMLはわかりやすいように超シンプルにしました。
h1タグで囲むタイトルを1文字づつspanタグで囲っています。
これは、後述もしますが1文字づつアニメーションのタイミングを変えるためです。
1文字を囲っているspanタグにはクラス「dropTitle」を付与します。

CSSは次の通り。

h1{
	text-align: center;
	font-size: 64px;
}

.dropTitle{
	display: inline-block;
	position: relative;
	top:0;
	transform: rotateX(-90deg);
	animation: dropTitleAnimation 1.2s ease 1 normal forwards;
}



@keyframes dropTitleAnimation {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 0.8;
        top: 40vh;
        transform: rotateX(-360deg);
    }
    100% {
        opacity: 1;
        top: calc(50vh - 48px);
        transform: rotateX(360deg);
    }
}

クラス「dropTitle」にはアニメーションで2つの動きを設定します。

ひとつめは、上から画面中央まで落ちてくる動きですが、
これはposition:abusorutでtopの位置を指定し、それをアニメーションすることで実現します。

最初は「top:0」の位置、アニメーションがはじまって20%時点では「top:40vh」、100％の時点では「top:calc(50vh – 48px)」の位置と、順番にしたに落ちるようにしています。
ちなみに最終的な位置をcalcで「-48px」しているのは、h1タグの高さの半分だけ上に戻しています。

これは、画面上中央に配置するためです。
画面中央配置にはposition:absoluteとtransform:translate()で

  position: absolute;
  top: 50%; /*親要素を起点に上から50%*/
  left: 50%;  /*親要素を起点に左から50%*/
  transform: translateY(-50%) translateX(-50%); /*要素の大きさの半分ずつを戻す*/

というような設定がよく使われていますが、今回はこれ以降で文字を回転させる動きの実現のためtransformプロパティを使用するため、transform:translate()が使用できません。
なので、−48pxしているのは、transform:translateY(-50%)と同じような意味合いと考えていただければと思います。

続いては回転です。
transform:skewX()を使用します。
その最初の手順として、クラス「dropTitle」をdisplay:inline-block;にします。
理由はtransform:skewX()はインライン要素には効かないからです。

設定値は最初はskewX（90deg）からはじまり、20%時点でskewX(-360deg)、100％時点でskewX(360deg)を設定します。
これをアニメーションすると縦方向にクルっと回転する動きになります。

JavaScriptでアニメーションのタイミングを操作する

次にJavaScriptでspanタグで囲んだ1文字づつのアニメーションのタイミングを変更します。

  let number = 1

  for ( let i = 0; i < 8; i++){
    let random = Math.floor( Math.random() * 8 );
    let className = "delay" + (random + 1);
	let dropTitle = document.querySelector('.dropTitle:nth-of-type(' + number + ')');
	dropTitle.classList.add(className);
	++number;
  }

記述内容としてはランダム関数で1から8までの数字をランダムに生成し「delay○」という文字列を作成、それをspanタグがもつクラス「dropTitle」にクラスを追加しています。
これにより、各spanタグが「delay○」というランダムなクラス名を持つことになります。

そして、最後はCSSに追記。
「delay○」のクラスが各アニメーションの開始タイミングがバラバラになるように、animation-delayを設定します（今回は0.2秒ごとに遅らせています）。

.delay1{
	animation-delay: 0.2s;
}
.delay2{
	animation-delay: 0.4s;
}
.delay3{
	animation-delay: 0.6s;
}
.delay4{
	animation-delay: 0.8s;
}
.delay5{
	animation-delay: 1.0s;
}
.delay6{
	animation-delay: 1.2s;
}
.delay7{
	animation-delay: 1.4s;
}
.delay8{
	animation-delay: 1.6s;
}

ここまでの記述で冒頭のサンプルのような動きが完成します。

おわりに

今回のデモはテキストでしたが、画像データでも同じ動作をします。
ことたびデザインのトップページでは画像のSVGデータを同じ方法でアニメーションさせています。
また、タイトルだけでなく見出しや本文にも応用できる方法です！

本日も最後までお読みいただき、ありがとうございました！