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

27 Maret 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat