Tutorial Web Design

Merubah background ketika scroll cukup menarik untuk diterapkan pada halaman website, hal ini bisa untuk menarik perhatian pengunjung website asalkan penggunaannya benar, soft, dan menggunakan warna yang sesuai.

Dengan bantuan jquery hal tersebut tidaklah sulit untuk diterapkan, cukup beberapa baris kita sudah bisa mendapatkan efek tersebut. Salah satu website yang sudah menerapkan trik seperti ini adalah website digital telepathy.

Artikel Terkait

• Membuat Animasi Backround Website Barubah-Ubah Warna

Langsung saja kita buat terlebih dahulu dari struktur HTML

HTML

<header>
  <ul>
    <li><a href="#first">One</a></li>
    <li><a href="#second">Two</a></li>
    <li><a href="#third">Three</a></li>
  </ul>
</header>

<section id="first">

	<article>
		<h2>SCROLL</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
	</article>
	
	...

</section>

<section id="second">
	
	<article>
		<h2>Section 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
	</article>

	<article>
	
	...

</section>

<section id="third">
	
	<article>
		<h2>Section 3</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</article>

	...

</section>

Disitu kita melihat ada ID #first, #two, #third, semunya sebenarnya tidak penting dalam membuat scroll, itu hanya digunakan untuk kepentingan klik pada menu, namun tidak ada pengaruhnya untuk efek scroll, jadi tidak perlu jadi perhatian.

CSS

body{
	background-color: yellow;
	transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	margin: 0;
	padding: 0;
	font-family: Helvetica, arial, sans-serif;
	color: #1A2B2A;
	overflow-x:hidden;
}

Jquery

Inilah bagian yang paling penting untuk menciptakan efek perubahan warna ketika halaman website di scroll.

		$(window).scroll(function(){
		  var y = $(window).scrollTop()
		  if (y <= 1600){
		    $('body').css('background-color','yellow');
		  } else if(y <= 3200){
		    $('body').css('background-color','orange');
		  } else {
		    $('body').css('background-color','red');
		  }
		});

Disitu kita menggunakan fungsi scroll, dan memanfaatkan fungsi scrollTop() dari jquery untuk mengetahui posisi halaman yang dihitung dari halaman paling atas 0px. Disitu kita lihat ada angka 1600 dan 3200, itu maksudnya ketika posisi kita 1600 px dari atas maka background akan berubah, begitu juga ketika mencapai 3200px maka background berubah lagi, jika anda masih ingin lagi tinggal tentukan pada angka berapa lagi akan berubah warna.

DEMO | Download Script

Semoga tutorial ini bisa berguna untuk anda, membuat website yang sedang anda bangun menjadi lebih menarik. Perlu di ingat ini hanya dasar-dasarnya saja, anda bisa menggunakan trik untuk website yang lebih serius. Salah satu website yang sudah menerapkan trik seperti ini adalah website digital telepathy.

Salam web design indonesia