Cara Membuat Parallax Scrolling dengan Stellar.js

Berbicara tentang perkembangan suatu desain website pastinya tidak akan ada habis habisnya, dimana kita bisa lihat sendiri bagaimana perkembangan tampilan website saat awal tahun 2000 an sampai sekarang yang desainnya semakin memanjakan mata. Desain suatu website tentu sangat perlu kita perhatikan karena user yang berkunjung ke website kita akan mendapatkan pengalaman yang baik jika desain web yang dibuat menarik.

Salah satu bidang desain web yang populer saat ini yaitu adalah parallax scrolling, dimana tampilan antara background a dengan background b akan memiliki kecepatan scroll yang berbeda. (untuk lebih jelasnya bisa lihat contohnya pada awal postingan ini). Postingan kali ini ditujukan bagi teman teman yang belum mengetahui apa itu parallax atau yang masih membuat parralax dengan cara yang sangat panjang.

Oleh karena itu dalam postingan ini saya ingin memberikan tutorial tentang Bagaimana Cara Membuat Parallax Scrolling dengan Stellar.js.

Ok, mari kita mulai tutorialnya... (semua kelengkapan source code bisa di download pada akhir postingan ini)

script html

<div class="box1" data-stellar-background-ratio='0.5'>
 <h3> Box 1 , scroll ke bawah</h3>
</div>
<div class="box2">
 <h3> Box 2 , scroll ke bawah</h3>
</div>
<div class="box3" data-stellar-background-ratio='0.5'>
 <h3> Box 3 , scroll ke bawah</h3>
</div>
<div class="box4">
 <h3> Box 4</h3>
</div>

Dari script di atas saya membuat contoh 4 tag div yang nantinya div dengan class box1 dan box3 akan diberikan background gambar agar proses parallax scrolling bisa terlihat. Dan juga atribut data-stellar-background-ratio untuk mendefinisikan tag div tersebut merupakan parallax. Untuk atribut lainnya dapat kalian baca secara detail di http://markdalgleish.com/projects/stellar.js/docs/

script css

html,body {
  height: 100%;
  }
 h3 {
  margin : 0;
  text-transform:uppercase;
  transform: translate(0%, 200%)
  }
 div {
  position:relative;
  text-align:center;
  vertical-align:middle;
  
  
  }
 .box1 {
  height: 100%;
  background: url("./images/image1.jpg") no-repeat scroll center center / cover;
  }
 .box2 {
  height: 100%;
  }
 .box3 {
  height: 100%;
  background: url("./images/image2.jpg") no-repeat scroll center center / cover;
  }
 .box4 {
  height: 100%;
  }

Script css diatas untuk menambahkan style dan gambar dari class box1 dan box3

script javascript

$.stellar({
   responsive: true,
   positionProperty: 'position',
   horizontalScrolling: false
     });

Pada script javascript digunakan untuk memanggil library stellar.js dengan beberapa parameter yang dapat kalian lihat secara detail di http://markdalgleish.com/projects/stellar.js/docs/

Silahkan simpan project anda dan jalankan pada browser.

berikut adalah keseluruhan dari script di atas :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>my web</title>

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">

<style>


 html,body {
  height: 100%;
  }
 h3 {
  margin : 0;
  text-transform:uppercase;
  transform: translate(0%, 200%)
  }
 div {
  position:relative;
  text-align:center;
  vertical-align:middle;
  
  
  }
 .box1 {
  height: 100%;
  background: url("./images/image1.jpg") no-repeat scroll center center / cover;
  }
 .box2 {
  height: 100%;
  }
 .box3 {
  height: 100%;
  background: url("./images/image2.jpg") no-repeat scroll center center / cover;
  }
 .box4 {
  height: 100%;
  }

  
</style>

</head>
<body>

<div class="box1" data-stellar-background-ratio='0.5'>
 <h3> Box 1 , scroll ke bawah</h3>
</div>
<div class="box2">
 <h3> Box 2 , scroll ke bawah</h3>
</div>
<div class="box3" data-stellar-background-ratio='0.5'>
 <h3> Box 3 , scroll ke bawah</h3>
</div>
<div class="box4">
 <h3> Box 4</h3>
</div>

<script src="js/jquery-1.11.2.min.js"></script>


<script src="js/bootstrap.js"></script>
<script src="js/stellar.js"></script>

<script type="text/javascript">
 $(document).ready(function(){
  $.stellar({
   responsive: true,
   positionProperty: 'position',
   horizontalScrolling: false
     });
 });
</script>
</body>
</html>