ホームページを作ってみたい！ - 動きをもっと！JavaScript。 - 4 スクロールイベント

スクロールをきっかけ、トリガーに表示されるJavaScriptです。

【脱jQuery】スクロールでふわっと出現するアニメーションをJavascriptのみで実装

"Scroll Down"の文字と矢印、四角を表示させるHTML部分は

<div class="msg">Scroll Down<br>↓</div>
<div class="box-inner">
　<div class="fade-in fade-in-up box"></div>
　<div class="fade-in fade-in-left box"></div>
　<div class="fade-in fade-in-right box"></div>
　<div class="fade-in fade-in-down box"></div>
</div>

CSSは以下です。

.msg{
 color: #333;
 font-size: 28px;
 font-weight: bold;
 line-height: 1.5;
 margin-top: 50px;
 text-align: center;
}
.box-inner{
 max-width: 700px;
 margin: 250px auto;
 padding: 0 40px;
}
.box{
 width: 200px;
 height: 200px;
 background-color: orange;
 margin: 50px auto 0;
}

参考サイトのものを表示させると、四角は最初表示されません。その理由はCSSで非表じとしているからです。そのCSSは、

.fade-in {
 opacity: 0;
 transition-duration: 500ms;
 transition-property: opacity, transform;
}

opacity: 0;

として非表示としています。これをスクロールした時に表示させます。そのスクロールを検知してCSSを変化させるのをJavaScriptで行います。スクロールすることで以下のCSSを実行させます。

.scroll-in {
 opacity: 1;
 transform: translate(0, 0);
}

スクロールを検知をするのが以下のJavaScripです。

let fadeInTarget = document.querySelectorAll('.fade-in');
window.addEventListener('scroll', () => {
 　　　for (let i = 0; i < fadeInTarget.length; i++){
      const rect = fadeInTarget[i].getBoundingClientRect().top;
      const scroll = window.pageYOffset || document.documentElement.scrollTop;
      const offset = rect + scroll;
      const windowHeight = window.innerHeight; 
      if (scroll > offset - windowHeight + 150) {
      fadeInTarget[i].classList.add('scroll-in');
      }
     }
  });

開いているウインドウの大きさなどを取得してスクロールがあるところまでくると以下CSS変更します。

JavaScriptです。クラス.fade-inを変数fadeInTargetに代入し命令を書いていきます。スクロール検知した時に以下が実行されます。

fadeInTarget[i].classList.add('scroll-in');

実行結果は、CSSを以下のように変更し適応させます。

.fade-in

のクラスが適応されている要素に

.scroll-in

を追加して四角を表示させます。これが実行されると以下のCSSも同時に適応されます。

.fade-in-up {
 transform: translate(0, 50px);
}
.fade-in-down {
 transform: translate(0, -50px);
}
.fade-in-left {
 transform: translate(-50px, 0);
}
.fade-in-right {
 transform: translate(50px, 0);
}

これで上下左右からゆっくり表示されます。

表示させるタイミングはウインドウの大きさなどを取得してスクロールがあるところまでくる時です。以下のスクリプトで実行できるようになります。

スクロール位置

const rect = fadeInTarget[i].getBoundingClientRect().top;
const scroll = window.pageYOffset || document.documentElement.scrollTop;
const offset = rect + scroll;

ウインドウの高さ

const windowHeight = window.innerHeight;

これら取得した値を元に判定して表示します。

if (scroll > offset - windowHeight + 150) {
fadeInTarget[i].classList.add('scroll-in');
}

これで最初は四角は表示されず、下にスクロールしていくと順番に四角が表示されるようになります。