Javascript – Membuat Scroll Reveal, tanpa plugin jQuery

Di tutorial kali ini saya akan membuat fungsi javascript scroll reveal.

Secara konsep sangat sederhana, dimana method javascript yang kita gunakan yaitu getBoundingClientRect()

Method tersebut adalah untuk mengetahui lebar, tinggi, posisi X dan Y serta posisi top, bottom, right dan left pada elemen.

Berikut ini fungsinya :

/* isElementOut(el)
/* Param id or class element
/* Return True or False
*/
var isElementOut = function (el) {
  
    var bound = el.getBoundingClientRect();
  
    var isOut = {};
    isOut.top = bound.top < 0;
    isOut.left = bound.left < 0;
    isOut.bottom = bound.bottom > (window.innerHeight || document.documentElement.clientHeight);
    isOut.right = bound.right > (window.innerWidth || document.documentElement.clientWidth);
 
    return isOut;
};

// Elemen yang akan di cek viewportnya
var header = document.querySelector("#header");

var viewPortCheck = function(){
  
  // elemen yang akan muncul setelah header keluar dari viewport
  var panelToShow = document.getElementById("panelToShow");
  
   // check apakahh header sudah keluar dari viewport
   var isOut = isElementOut(header);
  
      if (isOut.top) {        
           panelToShow.classList.add("show");
        } else {
           panelToShow.classList.remove("show");;
       }
}

// scroll event
window.addEventListener('scroll', viewPortCheck, false);

untuk lebih jelasnya bisa lihat demo dibawah ini.

See the Pen Simple Check Viewport Javascript by Lufti Nurfahmi (@luftinur) on CodePen.0