Cara Mengeksekusi Script saat dalam Viewport

Cara Mengeksekusi Script saat dalam Viewport

Code Pelajar - Pernahkah kamu berfikir atau mencari tahu bagaimana mengeksekusi kode saat terlihat dilayar? misalnya ketika kamu ingin menambahkan script Alert atau Subscription saat banner/gambar tertentu tampil pada layar? dan ketika kamu melakukan scrolling sampai gambar tersebut naik keatas dan tidak terlihat dilayar, alert/subscription kamu otomatis menghilang? ini adalah trik menggunakan javascript pendeteksi viewport.



Apa itu viewport dalam website? menurut beberapa referensi ada yang mengatakan tag khusus untuk responsif desain, ada yang mengatakan ketelihatan dalam layar, dan sebagainya jika kamu mencari-di internet. Yang saya tangkap Viewport adalah sebuah area dimana area itu terlihat (nampak) pada screen/layar perangkat pengguna. Viewport ini bisa kita temukan pada tag <meta> dan merupakan syarat utama untuk menerapkan desain responsif pada website.


Baca Juga: Cara Memasang Lazyload Image, CSS, dan Javascript


Lalu apa itu script jQuery Viewport? umm agak sulit sih menjelaskannya tapi ini adalah script yang bisa kita gunakan jika kita mengeksekusi javascript ketika suatu element sebagai parameter terlihat pada layar/ viewport. Mudahnya kamu bisa melihat gambar dibawah ini.


Cara Mengeksekusi Script saat dalam Viewport

Pada gambar terlihat ada 2 bagian yaitu bagian gelap dan bagian terang. Yang bagian terang ini adalah yang bagian terlihat oleh layar pengguna atau bisa disebut bagian viewportnya. Nah pada bagian yang terlihat juga kamu bisa melihat bagian-bagian website apa saja yang terlihat. Nah kondisi seperti ini bisa kita manfaatkan untuk mengeksekusi sebuah kode javascript.


Cara Menerapkan jQuery pendeteksi Viewport

Sebenarnya banyak sekali tutorial tentang javascript viewport ini, dan ada juga yang menggunakan pure js dan beberapa juga menggunakan plugin. Namun dari beberapa cara, hanya yang inilah menurut saya gampang menerapkanya. Untuk menerapkan trik ini pertama kamu harus memasukan jQuery dari @RokoCB(codepen) seperti berikut ini:


(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el){
       function visPx(){
         var H = $(this).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
       } visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));

Kode Javascript diatas biarkan seperti itu, karena ia bersifat seperti plugin siap pakai. Nah sekarang kita mulai cara menerapkannya seperti berikut ini:


$(".element").inViewport(function(px){
  if(px) {
   //eksekusi kode disini!
  }; 
 });

Cara diatas merupakan cara dasar menerapkan skripnya. bagaimana cara skrip ini bekerja?

  1. Pertama, selector $(".element") sebagai parameter elemen html yang terlihat di layar. ini bisa kita ketahui karena elemen ini menjalankan method inViewport() sebagai pendeteksi ketika terlihat pada layar/viewport.
  2. Kedua, saat elemen yang menjadi selector ini terlihat dalam layar/ masuk viewport baru menjalankan fungsi dengan parameter yang otomatis mendeteksi layar. Pada kode ini juga diberi kondisi ketika parameter px ini masuk layar, maka kode yang didalam kondisi itu akan di eksekusi.

Jika belum paham coba perhatikan kode berikut ini:


$(".element").inViewport(function(px){
  if(px) {
   alert( "Terlihat di layar"); 
  } else {
   alert("Tidak terlihat dilayar");
 } 
 });


Nah seperti itulah cara menerapkannya. Untuk beberapa trik juga bisa kamu gunakan seperti memasang fungsi interval atau waktu habis, atau bisa juga disaat kondisi tertentu kamu menjalankanscript jQuery viewport ini seperti saat kamu melakukan scrolling.


$(window).on("scroll", function(){
 $(".my-class").inViewport(function(px){
   if(px) {
   alert("Hooray!");
  }; 
 });
})


Itulah tutorial yang bisa saya sampaikan seputar cara mendeteksi viewport hanya dengan Menggunakan jQuery. cukup simpel bukan? sederhana sih tapi setidaknya kamu bisa mendapatkan ilmu baru disini. Nantikan tutorial lainnya seputar Web desain, trik css dan js serta artikel antimainstream dengan template website blog yang akan rilis dari Code pelajar.


Template Terbaru: Themw Wordpress Magazine, FaizMagz - Wordpress Theme Responsive

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel