手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー

アニメーションを使う時に気をつけたい事

アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。

しかし、ユーザーの注意をひこうとするあまりアニメーションを多用していると、習慣化と呼ばれる心理現象が起きてしまいます。頻繁に発生する刺激に対しては、脳が注意を払わなくなるという現象です。オオカミ少年が典型的な例ですね。

さらに、アニメーションを見るとうるさく感じてしまうユーザーもいます。対象物によっては広告と勘違いされて、無視されてしまうことも。アニメーションを実装する際は、ユーザーから好意的に見てもらえるよう、使用箇所や動作時間に気を配り、「意図のある動き」となるよう心がけましょう。

それではライブラリーをいくつか紹介します！

要素を動かす

Magic

デモ｜GitHub

ふんわりフェード、パタンと扉を開いたような動作、くるんと回転…などなど、様々なアニメーションを手軽に追加できます。

コード例

$(".yourdiv").hover(function () {
  $(this).addClass("magictime puffIn");
});

この例だと yourdiv というクラスのついた要素にカーソルを合わせると「puffIn」の効果を加えます。

Animate.css

デモ｜GitHub

こちらは CSS ライブラリーなので、「JavaScript ってなんだ？？」という人でも手軽に実装できそう。animated というクラスと共に各エフェクトのクラスを加えれば OK。アニメーションを繰り返し表示したい場合は infinite クラスを追加。

コード例

<h1 class="animated infinite bounce">Example</h1>

anime.js

デモ｜GitHub

シンプルながら多くのオプションが用意されていて、カスタマイズ次第で細かい動作にも対応できるかと思います。他にもanime.js の CodePenにて様々なデモが用意されています。

コード例

var myAnimation = anime({
  targets: [".blue", ".green"],
  translateX: "13rem",
  rotate: 180,
  borderRadius: "8px",
  duration: 2000,
  loop: true,
});

こちらのコードで上記デモが再現できます。HTML と CSS はそれぞれのタブをクリックしてご覧ください。

CSShake

デモ｜GitHub

要素をガクガクブルブル震わせられます。使いドコロに悩むかもしれませんが、ちょっと目立たせたいところやエラーメッセージに瞬間的に使うとよさそうです。多用注意！

コード例

<div class="shake shake-horizontal"></div>

ページ推移時に

Animsition

デモ｜GitHub

リンクをクリックすると、次のページに移る際に、ページ全体にフェードや回転などのアニメーションをローディング画像と共に加えられます。

コード例

<a
  href="#"
  class="animsition-link"
  data-animsition-out-class="fade-out-right"
  data-animsition-out-duration="2000"
>
  リンクテキスト
</a>

ページをスクロールすると要素が動きながら登場

ScrollTrigger

デモ｜GitHub

スクロールで、指定した div 内の要素をふんわりと表示してくれます。滑らかで気持ちいいですね。

コード例

<!-- ファイル読み込み -->
<script src="ScrollTrigger.min.js"></script>

<!-- JavaScript -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    ScrollTrigger.init();
  });
</script>

<!-- HTML -->
<div data-scroll>ここにコンテンツが入ります</div>

AOS

デモ｜ダウンロード

HTML の要素に data-aos 属性を記述し、アニメーション名リストから好みのものを追加すれば実装できます。

コード例

<!-- ファイル読み込み -->
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
<script src="bower_components/aos/dist/aos.js"></script>

<!-- JavaScript -->
<script>
  AOS.init();
</script>

<!-- HTML -->
<div data-aos="fade-up" data-aos-anchor-placement="top-center">
  ここにコンテンツが入ります
</div>

ハンバーガーメニュー（≡← こんなやつ）の形を変更

Hamburgers

デモ｜GitHub

三本線で構成されたメニューアイコン、通称「ハンバーガーメニュー」にアニメーションを加え、開閉の表示を変更します。こういった細かいところにもこだわりたいですね。

コード例

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

アニメーションの種類はGitHub ページ Usage の 3.に一覧表示されています。

サムネイル画像にホバーでテキストを表示

imagehover.css

デモ｜GitHub

サムネイル画像とテキストの組み合わせはよく利用することもあると思うので、知っていると便利なライブラリーかも。アニメーションの種類も豊富です。

コード例

<figure class="imghvr-fade">
  <img src="example.jpg" />
  <figcaption>ここにコンテンツが入ります。</figcaption>
</figure>

クラス名に好みのアニメーション名を記述すれば OK。アニメーション名はデモページに記載されています。

こういった便利なツールを使いこなせば、アニメーションの実装に苦手意識のあった方でも手軽に始められますね。冒頭でも書いたように、使いすぎに注意しながら、ページを素敵に彩ってください！