Parallax Scrolling Tutorial menggunakan CSS

Seperti yang anda ketahui, Parallax adalah efek visual dimana posisi objek pada website terlihat berbeda ketika kita melihat dari posisi yang berbeda. Parallax Scrolling membuat ilusi 2 objek yang saling berhadapan, tetapi bergerak dengan kecepatan yang berbeda. Efek ini dapat kita lihat dalam kehidupan sehari-hari , seperti saat kita melihat suatu benda yang dekat bergerak jauh lebih cepat daripada benda yang jauh, saat mengendarai mobil, kita dapat melihat pohon-pohon terlewati dengan cepat. Efek ini adalah gerak parallax.

Efek ini dapat diterapkan ke halaman web, kita dapat menerapkan efek parallax untuk blok yang memiliki gambar latar belakang dan beberapa konten internal. Ketika kita scroll halamannya, konten tersebut bergerak, namun latar belakangnya tetap di posisi. Kali ini kita akan coba membuatnya menggunakan CSS.

Langkah Pertama – HTML

<!DOCTYPE html>
<html>
<head>
  <title>Tutorial Parallax Scrolling</title>
</head>
<body style="margin:0 auto;">
  <section class="section parallax parallax-1">
  <div class="container">
    <h1>Section 1</h1>
  </div>
</section>
 
<section class="section content">
  <div class="container">
    <h2>Simple title 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus id nunc ut gravida. Vestibulum ac...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>
 
<section class="section parallax parallax-2">
  <div class="container">
    <h1>Section 2</h1>
  </div>
</section>
 
<section class="section content">
  <div class="container">
    <h2>Simple title 2</h2>
    <p>Nam imperdiet posuere bibendum. Aliquam nec consectetur metus. Aliquam egestas a elit at malesuada...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>
 
<section class="section parallax parallax-3">
  <div class="container">
    <h1>Section 3</h1>
  </div>
</section>
 
<section class="section content">
  <div class="container">
    <h2>Simple title 3</h2>
    <p>Proin tempor urna vitae tortor porttitor, ac malesuada elit lacinia. Nulla ac tellus nulla. Donec iaculis...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>
</body>
</html>

Seperti yang kalian lihat, script html di atas tidak terlihat kompleks. Pada script di atas terdapat 6 bagian alternatif yang 3 diantaranya memiliki gambar latar belakang(section dengan class  parallax), dan 3 bagian berisi contoh konten(section dengan class  content)

Langkah Kedua – Gambar sebagai latar belakang

Semua gambar dengan ukuran tetap 1600 × 600 piksel. Gambar ini dapat digunakan pada semua resolusi layar(responsive). Semua blok parallax memiliki tinggi yang sama (600px).

Langkah Ketiga – CSS

Sekarang kita harus membuat gambar agar mengisi seluruh ruang yang tersedia pada halaman website, kita tetapkan background-size: cover dan atur background-attachment: fixed agar gambar latar belakang menjadi fixed.

.container {
  max-width: 960px;
  margin: 0 auto;
}
section.section:last-child {
  margin-bottom: 0;
}
section.section h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.section p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.section p:last-child {
  margin-bottom: 0;
}
section.section.content {
  padding: 40px 0;
}
section.section.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.section.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  margin: 0 auto;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.section.parallax-1 {
  background-image: url("11111.jpg");
}
section.section.parallax-2 {
  background-image: url("aa.jpg");
}
section.section.parallax-3 {
  background-image: url("../imgages/3.jpg");
}
 
@media all and (min-width: 600px) {
  section.section h2 {
    font-size: 42px;
  }
  section.section p {
    font-size: 20px;
  }
  section.section.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.section.parallax h1 {
    font-size: 160px;
  }
}

Bagi yang ingin mencoba, berikut prewiev/demo parallax scrolling.

Sekian tutorial membuat efek scroll parallax, semoga bisa membantu.

Comments

comments