【CSS】実際のサイトからアニメーションパーツを考察していく(#1 見出しのアニメーション)

投稿日:

プログラミング初心者の勉強ブログ #105

CSSアウトプットを兼ねて、実在サイトのCSSアニメーションを考察していきます。@keyframesとanimationプロパティを用いて、実際に存在するサイトではどのようなデザインが作られているか把握し、コードを見て作れるようになることで、今後のオリジナルWebサイトのUI向上を図っていきます。

 

目次

 

今回の参考サイト

napla

ヘアケアメーカー ナプラの リクルート(採用情報)サイト

今回参考にするのはヘアケアメーカー「ナプラ」のリクルートサイトです。開いてすぐ、がっつりアニメーションが動き出します。コードを確認したら、@keyframesとanimationプロパティが色々と書いてあり、ギリギリわかりそうだったので選定しました。(JSは読み解くの難しすぎます。20個以上に分割された関数のまとまりがオブジェクト型として引数に渡されており、thisが何のthisなのか追うのが難しいです。フレームワークの構造?なのかもしれないので、reactとかvueとかやったことあれば少しはわかるものなのかもしれません。とりあえずCSSアニメーションを抽出して仕組みを理解していきます。)

 

真似するアニメーション

napla1

今回考察するのは、上の画像のような見出し部分の表示です。 最初にラインが描画され、ラインが消えるとともに文字が表示されます。

作業工程としては、

  1. ラインの表示・非表示
  2. 文字「MESSAGE」の表示

の2つですが、アニメーション構造はもう少し複雑に構成されてます(具体的には@keyframesを3つ使用されてます)。いかにして文字を流れるように表示させる表示を構成しているかが、今回のアニメーションのポイントになります。

 

アニメーション構造の考察

構造を整理するために、「ラインの表示・非表示」と「文字の表示」を分けて考えます。

ラインの表示・非表示

まずはラインの表示・非表示についてです。コードを確認したところ、「borderInOut」という@keyframesで設定したアニメーション一つで、ラインを書いたり消したりしています。以下ソースコードの抜粋です。

main.css

※「-webkit」はベンダープレフィックスです。Chromeやsafari対応用です。詳しくは自分で調べてください。

 

上のコードのように、opacityが1、scaleXが1になるにつれて、ラインが現れます。

コードを見て不思議に思ったのが、「transform: scaleX( )」を使っている点です。ラインを伸ばす場合、widthを0%→100%にしてdurationをつければそれでも大丈夫なのでは、と思っていたのですが、

これだと「transform-origin」でアニメーションの原点を変更できませんでした。

 

「原点」とは、アニメーションが実行されるにあたって基準となる軸のことです。

transform-origin - MDN

詳しくは上のリンクから確認してください。この原点を変更しないと、ラインを消すアニメーションが想定した挙動になりません。

 

文字の表示

次に文字の表示です。こちらでは2つの@keyframesを組み合わせてアニメーションが構成されています。

イメージとしては、

イメージ図

親子関係のdivを2つ用意し、親要素のdivに「overflow: hidden」をかけることで、2つのdivが重なっている部分のみが表示されることを利用した構造となっております。

 

実際に真似して作成してみた

作成物

 

とりあえず真似して作成してみたので、コードを載せます。

index.html(抜粋)

 

styles.css

 

まとめ

アニメーションのタイミング調整が難しくアバウトにやったので、本家のように綺麗にラインの表示・非表示が切り替わらないです。もっとうまいことできると思います。アニメーション設定のdurationとdelayのタイミング調整は、こだわりポイントかもしれません。同じサイトから他にもいくつかアニメーションパーツを参考にできたので良かったです。仕組みを把握するのはなかなか難しかったですが、結構楽しいのでオススメです。今回はメインの記事で時間結構費やしたのでまとめはこのくらいにします。

以上ありがとうございました。

-プログラミング学習
-, ,

Copyright© s u p ? , 2019 All Rights Reserved.