簡単にできます！スクロールに合わせたアニメーション

こんにちは。私は株式会社ファストコーディングのWebディレクタ、BigViと申します。ホーチミン出身、東京に住んでいます。これから日本のお客様に向けて、フロントエンド技術のことやWeb政策のことを、ブログ記事に書いていこうと思っています。よろしくお願いいたします。

最近ですが、ウェブ制作でスクロールに連動するアニメーションを使うことが増えています。これを使うとうまくユーザーの興味を引きつけられて、ページをもっと楽しんでもらえるんです。でも注意しないと、JavaScriptをたくさん使うとページの読み込みが遅くなることも。そこで、軽いJavaScriptで効率よくスクロール連動アニメーションをつける方法をご紹介します。

なぜスクロール連動アニメーションが大事？

ウェブサイトを訪れる人にとって、見た目の印象ってすごく大事です。スクロールすると一緒に動くアニメーションがあると、注目されやすくなって、ページの内容が伝わりやすくなります。見た目が良いだけじゃなくて、情報がわかりやすくなったりして、結果としてこのサイトは使いやすいって思ってもらえるんですよ。

ただ、アニメーションをたくさん入れすぎると、ページが重たくなってしまうことも。だから、少ないコードで効果的なアニメーションを実現する方法が重要なんです。

私たちがいつも使っている、簡単にできる方法をまとめてみました。

簡単スクロールアニメーション

1. スクロールイベントは賢く使う

JavaScriptでスクロールを監視するのは、やりすぎると動きがぎくしゃくしてしまうこともあります。そこで、イベントを効率よく処理する方法が重要です。

「デバウンス」や「スロットリング」というテクニックを使って、無駄に処理されるのを防ぎます。このコードでは、その一例を紹介しています。

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // ここでアニメーションのロジックを実行します
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

これはスクロールのたびにアニメーションが動かされないように工夫してます。ブラウザへの負担を軽くするためのテクニックです。

2. CSSに頼ろう

JavaScriptはたくさんの機能があって便利ですが、動きをつけようとすると重くなることがあります。そこでCSSを使うと、パソコンとかスマホの力を借りてスムーズにできます。

たとえばシンプルなフェードインのアニメーションはこんなふうに書けます。

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in.visible {
  opacity: 1;
}

ここでは要素が画面に見えるようになったら、JavaScriptでvisibleクラスを追加するだけ。これで、JavaScriptを最低限にしつつ滑らかな動きを実現できます。

3. 必要な部分にだけアニメーションを

全ての要素にアニメーションを入れちゃうと、やっぱり重くなっちゃいます。実際には、どの部分にアニメーションを入れるかをクライアントと相談して決めるのが大事です。必要なところだけに効果をつけることで、スムーズにページが動きます。

ちなみに、やはりキービジュアルにアニメーションを入れるのはどのサイトでも行いますが、キービジュアルは最初に読み込まれるところなので、入れないほうがページは早くなります。あえてキービジュアルに何も入れず、その少し下から開始するようにしたり、お問い合わせへのリンクセクションだけに入れるほうが、より注目される効果があると思います。

実例：成功した軽量アニメーション

私のプロジェクトでは、イベントページで画像とテキストをアニメーションさせて、ユーザーが注目するように制作しました。でもJavaScriptをなるべく減らして、CSSで動きをつけたんです。

こうして、少ないコードで直感的で魅力的な動きをページに足すことができました。

最後に

スクロール連動アニメーションは、ページに少し工夫を加えるための良い手段です。ただ、パフォーマンスを考えないと逆効果ですので、スマートにコードを書くことがポイントです。ここで紹介した方法を試して、ぜひ使いやすくて魅力的なページ作りを目指してみてください。

もっと詳しいサポートやアニメーションの実装相談は、こちらからお気軽にどうぞ。私たち株式会社ファストコーディングが全力でお手伝いします！

※本記事は弊社外国人スタッフによる投稿です。言い回しや表現が不十分な個所がありますことご容赦いただきますようお願いいたします。
株式会社ファストコーディング