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
Comments