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(残念ながらスマホだと無理です…..。)

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

関連する記事

関連記事エリアをプラグイン使って導入してみる サイトにサイドバーを追加する方法と注意したい事 サイドバーにHTMLでカレンダーコーナーを作る CSSで変更できるマウスカーソル絵一覧