Membuat Overscroll dengan JQuery

Membuat Overscroll dengan JQuery - Hallo semuanya, pada kesempatan kai ini saya akan memberikan satu trik untuk dijadikan referensi pada website kalian, ketika kalian menggunakan android, umumnya ketika scroll maka akan terlihat seperti efek batas yang seperti ditarik. Pada artikel ini kita akan coba efek over scroll untuk diterapkan pada website kalian. Tahap yang kita perlukan adalah sebagai berikut.

Buat File Javascript

Pada kali ini saya akan membuat dengan nama myoverscroll.js dan isi seperti berikut

$("body").prepend("<style> #topScroll{ transform: rotate(180deg); position:absolute; top:0; left:0; width:100%; height:20px;}#bottomScroll{ position:fixed; bottom:0; left:0; width:100%; height:20px;} </style><img style='opacity:0' src='androidscroll.png' id='topScroll'><img style='opacity:0' src='androidscroll.png' id='bottomScroll'>");
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height()-$(window).height()){
        $('#bottomScroll').animate({height:'32px', opacity:'1'});
       $('#bottomScroll').animate({height:'20px', opacity:'0'});
    }else{
     $("#bottomScroll").css("opacity", "0");
   }
});
 $(window).scroll(function() {   
   if($(window).scrollTop() <= 0) {
   $('#topScroll').animate({height:'32px', opacity:'1'}, 500);
       $('#topScroll').animate({height:'20px', opacity:'0'}, 700);
   }
});

Menambahkan JQuery

Untuk menjalankan kode diatas kita membutuhkan bantuan dari JQuery yang bisa kalian copy seperti dibawah ini

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>

Menghubungkan Javascript

kita sudah buat sebuah file javascript diatas, dan kita akn menghubungkannya dengan html

  <script type="text/javascript" src="myoverscroll.js"></script>

Membuat Struktur HTML

Kali ini kita membutuhkan struktur HTML yang bisa dijadikan media untuk demonstrasinya.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
  <style>
  body { background-color:#fafafa; font-family:'arial';background-color: lightgrey;color: #fff}
  </style>

<title>MyOverScroll</title>

<body>
  <div style="height: 4000px; text-align:center;"><h1>OverScroll</h1>
  <h2>Scroll Down !</h2></div>
  <script type="text/javascript" src="myoverscroll.js"></script>
</body>
</html>

Baiklah pada step diatas kita sudah berhasil membuat sebuah efek over scroll pada halaman website. Efek ini sangat menarik jika dipasang pada halaman website kalian, sampai jumpa pada artikel selanjutnya, terima kasih