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

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

ページをスクロールすると要素が画面に表示されているか判別しアニメーションを表示するCSSの記述

※demo.cssファイルを読み込みます。demo.cssにはアニメーション表示する丸や三角タグを表示する要素の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>

ページをスクロールすると要素が画面に表示されているか判別しアニメーションを表示するHTMLの記述

※丸や三角タグ要素（svg）を複数用意します。必要に応じて変更して下さい。

<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>

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.jsを使ってページをスクロールすると要素が画面に表示されているか判別しアニメーションを表示するデモページ

jquery.qrcode.jsを使ってQRコードを生成するデモページ

ソース元：Emergence.js

Emergence.js

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。