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