【HTML/CSS】CSSのみでwebページにアニメーションをつける方法(模写学習 #3)

投稿日:

【Rails】プログラミング初心者の勉強ブログ #56

模写学習3回目。アニメーションを意識した回です。transformや@keyframes、擬似要素を用いてtrasitionで動かす方法を解説。よくわからなかったCSSプロパティもわかると楽しいです。

 

目次

 

実施内容

今後アプリ開発を行うにあたって、webサイトの「見た目」の部分の向上を少しでも図るべく実施した、今回の「模写学習」内容です。(どのように勉強しているかについて書いているだけなので、興味なければ目次使って飛ばしてください。)

 

実施目的・内容・達成条件

webサイトデザインの基礎固めを行うこと。ヘッダーやナビゲーション、フッター、各セクションの構成の組み立て方から、色使いやフォント、余白の取り方などの「デザイン」について、実際に真似して作成することにより自分の中でサイト作成時にデザインの「型」が頭に浮かぶようにするため。また、デザインの基礎固めと並行し、CSSの挙動に慣れる機会を作るため実際にコーディングを行う。なお、学習にあたり参考にするサイトは「レスポンシブデザイン」であることを条件とし、CSSでの基本的なデザインの模写の作成に加え、検証ツールで構成を見ながらレスポンシブデザイン対応までを実装できた段階で完了とする。

 

実施の流れ

  1. 参考サイト選定
  2. 検証ツールの「Sources」でHTMLをテキストエディタに写す
  3. 参考サイトを見ながら、写したHTMLの各要素を装飾
  4. わからなければ検証ツール「Elements」で確認しコーディング
  5. わかった場合も検証ツールでオリジナルのコーディングを確認し修正
  6. おおよそ参考サイトと同じデザインと動きになったら完成

※HTMLとCSSの作業は同時並行でも別々でも可。

 

今回の参考サイト

「Standard Inc. アプリやWebサービスのUXデザイン会社」

 

成果物

【PC表示】

PC表示

【スマホ表示】

スマホ表示

 

CSSのみでアニメーションを付ける

今回は真似したサイトをまんま作るのではなく、色々追加でアニメーションを加えながら取り組みました。その中でCSSのみで実装していったものを紹介します。

 

Top画面の画像切り替え表示(@keyframesの利用)

本物もTop画面の画像が切り替わるのですが、JSを使っておりコードから読み解くのは時間がかかってしょうがないので、CSSだけでなんとかできないかと思い、調べてみたら@keyframesを使った方法があったので、そちらで実装しました。JSと比べるとカクカクしますが、簡単なので文句は言えないです。

実装の流れとイメージ

  1. HTMLにimgタグで切り替えたい画像を複数用意する
  2. その画像の透明度を「opacity」プロパティで、0→1→0・・・と切り替えていく
  3. opacityプロパティの実行速度を、@keyframesで設定する
  4. CSSでimgタグに対し、設定した@keyframesを当てる
  5. 2枚目以降に表示したい画像は、@keyframesの実行を数秒ずつずらして実行させる

こんな感じです。透明度が0で何も表示されなくなり、1で完全表示されます。パッパと画像が切り替わってもアレなので、@keyframesで透明度の実行速度を調整します。あとは各画像ごとに透明度の切り替えのタイミングをずらしていくことで、画像が切り替わって表示されるように見えるようになります。

 

 

@keyframesコーディング

今回記入したコードです。時間の設定やタイミングは適宜調整できます。

index.html

style.css

 

4枚の画像の切り替えなので、一周を28秒とし、おおよそ4分の1ずつで調節してます。綺麗に4等分して1画像7秒にすると、切り替わるタイミングの一瞬が真っ白になってしまいます。それを避けるために食い気味の調節をかけて真っ白の時間を無くすよう設定してます。

 

擬似要素を用いたアニメーション(transitionとtransformの利用)

次は擬似要素を用いた方法です。今回の場合、以下のようなボタンを作成しております。

ボタン

 

右に配置している矢印をdivタグの擬似要素として作成し、transformプロパティでhover時に右に10px移動させてます。動きの緩急のことを「イージング」と言い、このイージングはtransitionプロパティで設定できます。

実際の流れとイメージ

  1. divタグとaタグでボタンを作成
  2. divタグに:afterを付け、擬似要素を作成し、そこに矢印の背景画像を埋め込む
  3. それぞれにtransitionプロパティでイージングを設定する
  4. :hoverでアクションを付け、transformプロパティで擬似要素を動かす設定をする

 transitionとtransformコーディング

index.html

 

style.css

 

「transform: translate」が要素を動かすプロパティです。X方向に正の数値を持たせることで右、負の数値を持たせることで左に移動します。また、translateYは上下方向を表します。正の数値で下、負の数値で上への移動が可能になります。

イージングはhoverのみに書き込むのではなく、要素自体にも入れておくべきです。ロード時やhover解除時のアニメーションの緩急となります。付けないと元の位置へ緩急なく戻ってしまいます。

 

その他のtransformプロパティの使い方(scaleの利用)

transformプロパティにはtranslate以外にも色々指定できるものがあり、もう一つ今回実装したものを紹介します。

拡大率scaleの変更です。画像をでhover時に拡大すると、下の画像ようなよく見るアニメーションが実装できます。

scaleの値変更によるアニメーション

 

transform: scaleコーディング

index.html

 

style.css

 

やり方さえわかれば、cssだけで簡単にこのようなアニメーションが設定できます。

 

まとめ

今回はCSSで割と簡単に設定できるアニメーションをまとめました。PC表示の場合、CSSだけでもだいぶリッチになるかと思います。スマホだとhoverが意味なくなってしまうので残念ですが。

引き続き模写続けていきます。

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

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

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