scrollreveal

まずは実装サンプルを確認

写真

写真

写真

写真

写真

写真

写真

写真

HTML

scrollrevealを入れたい箇所に以下のソースを張り付け、適宜内容を修正する。

<div class="moveleft">
  <p><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p>
</div>
<div class="moveright">
  <p><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p>
</div>
<div class="moveup">
  <p><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p>
</div>
<div class="movedown">
  <p><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p>
</div>
<p class="moveleft"><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p>
<p class="moveright"><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p>
<p class="moveup"><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p>
<p class="movedown"><img src="/images/img/SCT_7628s.jpg" width="600" height="399" alt="写真"></p>

JSの読み込み

footerに以下のソースを追加(掲載順序注意)。速度の変更や表示方法は適宜変更。

<script src="https://unpkg.com/scrollreveal"></script>
<script>
  window.left = ScrollReveal();
  left.reveal('.moveleft', {
        origin: 'left',
        easing: 'ease',
        duration: 1000,
        distance: '100px',
        opacity: 0,
        scale: 1
        }
    );
  window.right = ScrollReveal();
  right.reveal('.moveright', {
        origin: 'right',
        easing: 'ease',
        duration: 1000,
        distance: '100px',
        opacity: 0,
        scale: 1
        }
    );
    window.fade = ScrollReveal();
  fade.reveal('.moveup', {
        easing: 'ease',
        duration: 1000,
        distance: '100px',
        opacity: 0,
        scale: 1
        }
    );
    window.fade = ScrollReveal();
  fade.reveal('.movedown', {
        easing: 'ease',
        duration: 1000,
        distance: '-100px',
        opacity: 0,
        scale: 1
        }
    );
</script>

実装サンプル

https://www.s-contigo.com/solution/consulting

参考サイト

  1. LIG ScrollReveal.jsを使ってスクロールしたらふわっと表示される動き
  2. 公式サイト