【Web制作過程】CSSとJavaScriptで動きをつける

こんにちは、コンスキです。

Webサイトの印象って、結構デザインによって左右されますよね。

ただ、印象を変えるのはデザインだけではなくて、サイト内に動きがあるかないかということも印象に大きな影響を与えると思います。

「①これといって動きのないサイト」と、「②スクロールする度に画像が徐々に表示されるようなサイト」だと、②の方が完成度が高いと感じる人が多いと思います。

そこで今回は、JavaScriptやCSSを使って、サイト内に動きのある部分を追加していこうと思います。

ライブラリは使用しない
マウスオーバー時の左右に傾くアニメーション
マウスオーバ時に上下に動かすアニメーション
スクロールするとフェードイン

ライブラリは使用しない

JavaScriptでアニメーションを作る際、GSAPやAnime.jsなどのライブラリを使用すると便利だと思いますが、今回はあえて使わないことにします。

これは僕の勝手な都合です。

ライブラリを使ってあると、「ここをもっとこうしたい」と思ったときに、微調整することが難しいからです。

その分時間は少しかかってしまいます。

そこでその代わりに、他のサイトに載っているスクリプトを積極的に活用していこうと思います。

マウスオーバー時の左右に傾くアニメーション

ナビゲーションのリンクにマウスカーソルが重なった時、画像が左右に傾くようにしてみます。

この部分はJavaScriptを使わなくてもCSSだけでできそうです。

#navigation li:hover img {
  animation: navigation_tilt 1s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes navigation_tilt {
  0% { transform: rotate(0) }
  33.33333% { transform: rotate(-20deg) }
  50% { transform: rotate(0) }
  66.66667% { transform: rotate(20deg) }
  100% { transform: rotate(0) }
}

ちなみにこのCSSアニメーションは、全ページで読み込んでいる「top.css」に書いています。

「top.css」は全HTMLファイルで読み込んでいるため、全ページのナビゲーションメニューで同じアニメーションが実行されます。

マウスオーバ時に上下に動かすアニメーション

マウスオーバー時のアニメーションが全て同じだとつまらなくなってしまうと思うので、動きのバリエーション増やします。

こちらのアニメーションも、CSSアニメーションです。

CSSのスクリプトもほとんど同じです。

#menu li:hover img {
  animation: menu_float 1s linear infinite;
  transform-origin: 50% 50%;
} 
@keyframes menu_float {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-6px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}