tRikSonic
Tema
  • Original
  • Translate

Parallax Scrolling Effect Menggunakan CSS

Terakhir diperbarui : 1 Juni 2019 - 02.54

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.
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. Semoga bermanfaat.

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.