【自作関数】「スクロールするとフワッと表示する」が簡単に実現できるjavascript関数を作った

はじめに

スクロールしていくと、ふわっと要素が登場するサイト、カッコよくないですか?
「いいなー」と思ったので、作ってみました。

構想

cssをできるだけ書かずに、javascriptを理解していなくても設置できるように
by ぼく

設置方法

HTMLを用意する

まずはHTMLを用意してください。
サンプルということで、こんなものを想定します。

  <div class="div1" style="height: 300px;">
    1
  </div>
  <div class="div2">
    2
  </div>
  <div class="div3">
    3
  </div>

ポイントは、一番上の初めから表示しておくdivは高さを指定しておくことです。

CSSを用意する

お次はcss。
この時に、好きなクラス名をつけてもらいます。

.好きなクラス名 {
  height: 600px;
  opacity: 0;
  transition: all 1s ease-out;
  background-color: red;
}

.好きなクラス名.nikoniko-on {
  opacity: 1;
  transition: all 1s ease-out;
}

javascriptをコピペし、アレンジ

const set_query = ".好きなクラス名"; // 着火css
const set_grace = 0; // 着火猶予

window.addEventListener('DOMContentLoaded', function(){
  let querys
  window.addEventListener('scroll', function(){
    querys = document.querySelectorAll(set_query)
    querys.forEach((element) => {
      if(element.getBoundingClientRect().top + window.pageYOffset < window.scrollY+set_grace+element.clientHeight){
        element.classList.add("skpr-on")
      }else{
        element.classList.remove("skpr-on")
      }
    })
  })
});

HTMLを修正

最初から表示しておく要素以外全てに先程決定した好きなクラス名を入れます。

  <div class="div1" style="height: 300px;">
    1
  </div>
  <div class="div2 好きなクラス名">
    2
  </div>
  <div class="div3 好きなクラス名">
    3
  </div>

完成!

おめでとーございます^^