CSSアニメーションで背景に猫を流してみた笑
公開:2019.10.10 更新:2019.10.11

こんにちは!台風を前に色々と悟っておこうと決めた木彫り猫です。

告白。このサイト、実はこの前プライバシーポリシーと、お問い合わせフォームを設置したので、フッターメニューを追加したんです。

…..すいません!そんなことどうでもいいとか言わないで……!

問題は、その背景がめちゃ質素ってことなんですよ。いやまあ真面目ページに繋がるメニューだから質素の方が良いのかもしれないけどさ…..。

それでも!おもしろくしたい!!

という訳で、フッターメニューの背景に猫を流すアニメーションを作っていきます(誰得)

実装方法

実装にはCSSを使います。@keyframesってやつです。アニメーション進捗を区切ってスタイリングを入力するだけでアニメーション的な事が出来ます。

例としてこれ。

HTML

<div class="backanimation">
<p>ここの背景が変わります~</p>
</div>

CSS

.backanimation {
  background-color: red;
  animation-name: redblue;
  animation-duration: 10s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

@keyframes redblue {
  0% { background-color:red;}
  100% { background-color:blue;}
}

ここの背景が変わります~

猫を動かしてみる

さあ~例が終わったので本題入りますよ~。

まずは画像を用意しなきゃですが、今回はこの前撮ったこれにします。

うん!木猫!

HTML

<div class="p_o_area">
<div class="ryuudouneko">
      <img class="nekonekoimg" src="https://kiborineko.com/wp-content/uploads/2019/10/woodcatcut.png">
<!--ここにフッターメニュー-->
</div>

CSS

.p_o_area {
    position: relative;
  }
  
  .ryuudouneko {
    position: absolute;
    animation-name: nekonekofly;
    animation-duration: 5s;
    animation-delay: 5s;
    transform: rotate(0deg);
    left: 1000px;
    top: 10px;
    animation-iteration-count: infinite;
  }
  
  img.nekonekoimg {
    width: 70px;
  }
  
  @keyframes nekonekofly {
   0% { transform: rotateZ(0deg);left: 1000px;top: 0;}
    100% { transform: rotateZ(3000deg);left: -200px;top: 50px; }
  }

流れる猫にありがたみを感じるため、5秒かけて右から左に回転しながら移動することにしました。

さてどうなった………?

流れてるwwwww猫がwwwwww流れてるwwwwwww(;’∀’)

駄目だwww笑いが抑えきれないwwwwww

ふう……。

位置間違えてたのか、厳密な右から左では無くなってしまったので実際に使う時はleftをいじった方が良いですね。

まとめ

さて、今回はこれにて終了です。

なんともCSSアニメーションのインパクトを体感した回になりました…….笑。サイトが重くならないほどに程ほどに追加していきたいですね!笑

ちなみにもう本実装してあるので下にスクロールすれば流れる猫が見れると思いますw(残念ながらスマホだと無理です…..。)

それでは皆さんも、楽しきねこねこアニメーションライフを~

おすすめ商品

[基本を学ぶにはこれ]
参考にしているWordpress教本

[テーマ作成のお供に!]
WordPressデザインレシピ集

コメント

内容をご確認の上、送信してください。