[JS]素のJavaScriptとCSSでふわっとフェードインさせる（JSとjQueryで書き方も比較）

こんにちは、むったん（@6ttan）です。

サイト制作をしていると、こんな感じの要望が来ます。

要素が画面内に入る
　↓
要素の頭が画面下から○○○pxスクロールされる
　↓
要素が○○px上に動きながら、ふわっとフェードインする

これをjQueryで実装すると短い印象。

では素のJavaScript（Vanilla JS）で書くと…
ちょっと長くなる印象があるし、フェードイン部分の調整が面倒くさそうなのが否めない。

でもその面倒くさそうな部分をCSSで補填してあげれば、JSだって数行で済みます！

今回は比較のために同じHTMLとCSSを使用して、jQueryとJavaScriptの両方で書いていきます。

jQueryでふわっとフェードインさせる

コード（jQery）

<div class="contents">
  <div class="content js-fadeIn">
    <p>フェードインするよ</p>
  </div>
  <div class="content js-fadeIn">
    <p>フェードインするよ</p>
  </div>
</div>

.contents {
  width: 90%;
  max-width: 500px;
  height: auto;
  min-height:1.5vh;
  margin: 350px auto 100px;
  
  .content {
    width: 100%;
    height: 100px;
    opacity: 0;
    transition-duration: 0.5s;
    transition-property: opacity, transform;
    
    & + .content {
      margin-top: 50px;
    }
    
    &:first-of-type {
      background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
    }
    
    &:nth-of-type(2) {
      background-image: linear-gradient(to top, #20E2D7 0%, #F9FEA5 100%);
    }
    
    &.is-scrollIn {
      opacity: 1;
      transform: translate(0, -50px);
    }
    
    p {
      color: #fff; 
      text-align: center;
      line-height: 100px;
    }
  }
}

$(function() {
  $(window).scroll(function() {
    let fadeIn = $('.js-fadeIn');
    
    $(fadeIn).each(function() {
      let offset = $(this).offset().top;
      let scroll = $(window).scrollTop();
      let windowHeight = $(window).height();
      
      if(scroll > offset - windowHeight + 50) {
        $(this).addClass('is-scrollIn')
      }　
    });
  });
});

ではjQueryの説明です。
スクロールしたら、.js-fadeInの要素をそれぞれ見ていきます。
また要素の上の位置、スクロールで表示されている位置（上）、表示領域の高さもそれぞれ都度取得します。

最後にスクロールで表示されている位置（上）が「要素の上の位置 – 表示領域の高さ + 50」より大きければ.is-scrollInクラスを付与、としています。

またCSSでは.is-scrollInに

.is-scrollIn {
  opacity: 1;
  transform: translate(0, -50px);
}

を設定していますので、クラスが付与されると透明度が1、下(0px)から上(-50px)に移動するようになっています。
このようにtranslateを使ってあげれば右から要素が入ってくるようなフェードインも簡単に設定できます。

サンプル（jQery）

See the Pen
Untitled by むったん (@6ttan)
on CodePen.0

JavaScript + CSSでふわっとフェードインさせる

コード（JS）

HTMLとCSSは上記のjQueryと同じなので省略します。

let els = document.querySelectorAll('.js-fadeIn');

els.forEach(function(fadeIn) {
  let windowHeight = window.innerHeight;
  
  window.addEventListener('scroll', function() {
    let offset = fadeIn.getBoundingClientRect().top;
    let scroll = window.scrollY;
    
    if(scroll > offset - windowHeight + 250){
       fadeIn.classList.add('is-scrollIn');
    }
  })
})

ではJavaScriptで書いたバージョンの説明です。

まずはHTML内にある.js-fadeInを探し出し、それぞれを見ていきます。

表示領域の高さを取得します。
そしてスクロールしたら要素の位置、スクロールした量を都度取得します。

最後にスクロールした量が「要素の位置 – 表示領域の高さ + 250」より大きければ、.is-scrollInを付与、としています。

サンプル（JS）

See the Pen
[JS]スクロールでふわっとフェードイン by むったん (@6ttan)
on CodePen.0

おわりに

ほんの数行で書けそうなものに、わざわざjQueryのライブラリを読み込みたくないな…と思い書いてみました。

jQueryとJSで少々考え方（書き方）は異なりますが、最終的には同じことを表現しています。
簡単に導入したいな…という方の参考になれば嬉しいです！