Parallax Scrolling Effect Menggunakan CSS

Apa itu Parallax

Dikutip dari Wikipedia bahasa Indonesia, ensiklopedia bebas.

Paralaks, atau lebih tepatnya paralaks gerak (bahasa Yunani: παραλλαγή (parallagé)) adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak.

Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu objek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.

Sumber dan penjelasan lebih lengkap : https://id.wikipedia.org/wiki/Paralaks

Parallax biasanya digunakan pada bagian atas dari konten HTML atau biasa disebut konten header, dan juga biasa digunakan pada konten block agar memberikan tampilan lebih.

Contoh HTML

<div class='parallax parallax-1'>
  <header class='header'>
    <h1>hello world</h1>
  </header>
</div>

Contoh CSS

.parallax-1 {
  height: 100vh;
  background: #333 url(image.png);
}
.parallax {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Demo [ jsFiddle ]

Daftar tambahan mengenai Parallax Effect.

• //pixelcog.github.io/parallax.js/
• Materialize CSS
• jQueryScript.net

Semoga bermanfaat.