Membuat Parallax Horizontal dengan CSS3

Hallo teman-teman, bertemu kembali dengan saya rizal. Dihari yang sangat indah ini semoga teman-teman masih diberikan kesehatan agar dapat mencari ilmu seputar website lebih dalam lagi.

Oke pada kesempatan kali ini saya akan membahas tentang cara Membuat Parallax Horizontal dengan CSS3. Bagi teman-teman yang sudah lebih dahulu mengenal HTML dan CSS pasti sudah tidak asing lagi dengan yang namanya Parallax. Tapi berbeda dengan kali ini, disini kita akan Membuat Parallax Horizontal dengan CSS3. Bagaimana ? penasaranÂ bukan ? oke langsung saja kita mulai

Pertama-tama buka text-editor yang teman-teman gunakan dan siapkan background untuk kita buat parallax horizontalnya, lalu kemudian ketik script html dibawah ini :

<section id="intro">
	<div class="content">
		<div class="paralax">
			<div class="layer rocks2"></div>
			<div class="layer rocks1"></div>
			<div class="layer hills"></div>
			<div class="layer foreground"></div>
		</div>
	</div>
</div>

Jika teman-teman sudah selesai dengan script HTML nya, langkah selanjutnya teman-teman ketik script CSS nya seperti dibawah ini kedalam text editor yang teman-teman gunakan :

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

section {
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #C0B3A0;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.paralax {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("background.jpg");
  background-size: cover;
  background-position: center;
}

.paralax .layer {
  position: absolute;
  width: 400%;
}

.paralax .foreground {
  height: 50%;
  bottom: 0;
  background: url("foreground.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow 30s linear infinite;
}

.paralax .hills {
  height: 40%;
  bottom: 15%;
  background: url("hills.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow 60s linear infinite;
}

.paralax .rocks1 {
  height: 35%;
  bottom: 25%;
  background: url("rocks1.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow 120s linear infinite;
}

.paralax .rocks2 {
  height: 40%;
  bottom: 15%;
  background: url("rocks2.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow 240s linear infinite;
}

@keyframes slideshow {
  0% {
    left: 0;
  }
  100% {
    left: -200%;
  }
}
@keyframes dayToNight {
  0% {
    -webkit-filter: hue-rotate(0deg) brightness(1);
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    -webkit-filter: hue-rotate(180deg) brightness(0.1);
    filter: hue-rotate(180deg) brightness(0.1);
  }
  100% {
    -webkit-filter: hue-rotate(0deg) brightness(1);
    filter: hue-rotate(0deg) brightness(1);
  }
}

Jika sudah dengan script HTML dan CSS nya, langkah selanjutnya bisa teman-teman simpan dan kemudian boleh langsung teman-teman jalankan/run dibrowser yang teman-teman gunakan dan lihat hasilnya !! amazinggg bukan ??..

Oke untuk pembahasan kali ini saya rasa cukup sampai disini dahulu tentang Membuat Parallax Horizontal dengan CSS3, semoga bermanfaat bagi teman-teman dan sampai bertemu di pembahasan selanjutnya ya.

Membuat Parallax Horizontal dengan CSS3

Kategori