emergence.jsを使ってページをスクロールすると要素が画面に表示されているか判別しアニメーションを表示する方法｜DAD UNION

Webページを訪れたユーザーの注目を集めるために、スクロールに連動したアニメーション効果を取り入れる手法が注目されています。特に、要素が画面内に現れたタイミングでアニメーションを表示する仕組みは、視覚的なインパクトを与えるだけでなく、ユーザー体験の向上にも寄与します。

この記事では、「emergence.js」を使用して、ページスクロール時に要素が表示されたかを判別し、アニメーションを適用する方法を解説します。簡単に実装できるよう、CSS、HTML、JavaScriptの具体例を含めて詳細に説明します。

Contents

CSSによるアニメーションの基礎準備
HTML構造の作成
JavaScriptでemergence.jsを活用
emergence.jsを使ってページをスクロールすると要素が画面に表示されているか判別しアニメーションを表示するデモページ
ソース元：Emergence.js
まとめ

CSSによるアニメーションの基礎準備

アニメーションを適用するには、事前にCSSで要素の見た目や動きを定義しておく必要があります。demo.cssファイルを読み込みます。demo.cssでは、丸や三角、四角形の図形がスクロール時に現れるアニメーションを設定する例を紹介します。

<link rel="stylesheet" type="text/css" href="demo.css">
<style>
body {
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 1.6em;
  padding-top: 20px;
}
</style>

このCSSでは、要素が画面に現れる際に「opacity」や「transform」を使って滑らかなアニメーションを作成します。

HTML構造の作成

次に、アニメーションを適用するHTML要素を用意します。以下は、丸、三角、四角形の図形を表示するためのHTMLコード例です。

<h1>emergence.jsを使ってページをスクロールすると要素が画面に表示されているか判別しアニメーションを表示<br>下にスクロールしてみてください。</h1>


      <div class="container container--fluid">
        <div class="column column1">
          <div class="shape shape--circle" data-emergence="hidden">
            <div class="shape__svg">
              <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
            </div>
          </div>
          <div class="shape shape--triangle" data-emergence="hidden">
            <div class="shape__svg">
              <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
            </div>
          </div>
          <div class="shape shape--square" data-emergence="hidden">
            <div class="shape__svg">
              <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
            </div>
          </div>
          <div class="shape shape--circle" data-emergence="hidden">
            <div class="shape__svg">
              <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
            </div>
          </div>
          <div class="shape shape--triangle" data-emergence="hidden">
            <div class="shape__svg">
              <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
            </div>
          </div>
          <div class="shape shape--square" data-emergence="hidden">
            <div class="shape__svg">
              <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
            </div>
          </div>
          <div class="shape shape--circle" data-emergence="hidden">
            <div class="shape__svg">
              <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
            </div>
          </div>
          <div class="shape shape--triangle" data-emergence="hidden">
            <div class="shape__svg">
              <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
            </div>
          </div>
        </div>
      </div>

このHTMLでは、data-emergence属性を使用して要素の初期状態を設定しています。

JavaScriptでemergence.jsを活用

最後に、emergence.jsを使用してスクロール時の要素表示を判定し、アニメーションを適用するためのJavaScriptコードを記述します。
emergence.js、demo.jsファイルを読み込みます。emergence.init({初期設定オプション})を記述します。

  <script src="emergence.js"></script>
  <script>
    emergence.init({
      reset: true,
      handheld: true,
      elemCushion: 0.50,
      offsetTop: 100,
      offsetBottom: 100,
      throttle: 300
    });
  </script>
  <script src="demo.js"></script>

このスクリプトでは、emergence.onメソッドを使用して、要素が画面に現れた時や非表示になった時の動作を指定しています。