Mengubah background website ketika user menurunkan scrollbar

Written on June 1st, 2012 by @tentucreative

 

Parallax web design adalah sebuah tren di dunia web desain yang sedang populer akhir-akhir ini. Ada beberapa tutorial tentang Parallax di internet, dan yang sedang kalian baca ini tidak termasuk salah satunya. Tips dan trik ini akan menjelaskan teknik dasar yang dapat dikembangkan menjadi sebuah Parallax Scrolling Website.

*note : A few example of Parallax web design : Living World, Smart USA

DEMO : CLICK HERE
DEMO SOURCE : CLICK HERE

Untuk tips dan trik kali ini, Saya akan menunjukkan bagaimana saya mengubah background halaman saya dari warna putih, ke warna abu abu, setelah user menurunkan (scroll down) halaman website. Yang akan saya gunakan di tips dan trik ini adalah Jquery dan CSS.

Pertama tama, kita harus yakin bahwa website kita dapat di scroll secara vertikal. Dapat di scroll secara vertikal artinya tinggi dari halaman website lebih tinggi daripada tinggi jendela browser. Kamu dapat melakukannya dengan menulis paragraph yang panjang di website kamu, tetapi saya lebih suka memberikan tinggi 2000px di CSS. (Maka, kecuali tinggi dari monitor kamu lebih tinggi dari 2000px, website kamu akan dapat di scroll secara vertikal. Berikut adalah kode CSSnya.

<style type="text/css">
body {
height:2000px;
}
</style>

Tips dan Trik ini membutuhkan Jquery dalam bekerja, maka mari kita include file Jquery yang ingin kita gunakan.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Sekarang, kita perlu sebuah fungsi di Javascript yang memberi tahu kita seberapa jauh user telah melakukan scroll di halaman website. Hal ini sangat berguna untuk menentukan kapan kita ingin mengubah background halaman website. Mari kita berterima kasih pada fungsi scrollTop() dari JQuery, yang memungkinkan terjadinya hal ini.

function getPos() {
 var Pos = $(window).scrollTop();
 return Pos;
}
scrollTop() returns the height of the red line, which equals how far user has scrolled the page

...

Pada dasarnya, scrollTop akan mengembalikan posisi vertikal dari scrollbar. seperti ilustrasi di atas. Langkah kita berikutnya adalah mendefinisikan sebuah fungsi yang akan dipanggil ketika scrollbar bergerak.

$(window).scroll(function() { //Defines that this function will be triggered as the scrollbar is moving

   if(getPos()<250) { //Jika posisi vertikal di bawah 250
   $("html").css('background','#FFFFFF');
      //Baris di atas memiliki kesamaan dengan kode CSS berikut :
      //html {
      //    background:#FFFFFF;
      //}
  }
  else { //If the vertical position of scrollbar is above 250
   $("html").css('background','#555555');
  }

 }); //function ends

Selesai! Sekarang, setelah kamu menggerakkan scrollbar ke bawah sejauh 250 pixel, warna background akan berubah menjadi abu-abu gelap. Jika kamu menggerakkan scroll kembali ke atas, warna background akan kembali menjadi putih.

*Optional : Saya menambahkan efek transisi CSS untuk membuat perubahan background menjadi lebih halus dan menarik

html {
 transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s;
}

Terima kasih telah membaca tutorial ini, dan saya harap tips dan trik kali ini dapat membantu kamu. Sampaikan pertanyaan kamu di komen, dan selamat bersenang senang membuat efek-efek web desain kreatif berdasarkan tips dan trik ini. God Bless!

 

*About The Author: Yohanes Steven is a Web Designer with a passion in coffee. He survived cancer in December 2010 and have intended to inspire the world ever since

About the author

Yohanes Steven is a creative entrepreneur with high interest in art, coffee, and technology. He is passionate in delivering happiness and inspirations. He survived cancer in 2010 and has intended to inspire the world ever since.


Discussion Box

  • Boybuilders

    bos.. kol background di ganti dengan picture jpg bisa?

    • http://www.ysteven.com Yohanes Steven

      Bisa, kalo mau diganti dengan picture, kode 

      $(“html”).css(‘background’,’#FFFFFF’);

      diganti aja jadi

      $(“html”).css(‘background’,’url(alamatImage.jpg)’ );