Selamat Datang

Tutorial Membuat Perubahan Warna Background Ketika Scroll

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.

background scroll animation

Artikel Terkait

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;
}
potongan kode css

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.

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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

10 thoughts on “Tutorial Membuat Perubahan Warna Background Ketika Scroll

  1. squirell says:

    di demonya bisa, abis copas scriptnya, tapi kok gak mau yah?

  2. gusti says:

    kalo warna tersebut diganti picture bisa apa tidak ya??

  3. Damara says:

    Kalau memasukan code jquery nya tersebut gimana ya ? , maklum masih awam baru lulus smk

  4. Freddy says:

    tanya donk ?

    pengertian scroll sedikit paham tapi itu ada $window itu apa ya ?

    Thanks for any respon :D

  5. Freddy says:

    oh wait window itu adalah buat parameter di dalam page, terus parameter itu di ambil tinggi nya untuk mengubah warna, is that right Admin ?

    tapi kok scroltop ya bukan nya hanya scrool saja ya ?

    kalau ada waktu respon donk penjelasan detail ya, Mauliate , Horas

  6. teguhsiswanto says:

    kok tidak berubah warnanya?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development