Dalam tutorial ini, kita melihat efek pengguliran paralaks yang indah dengan cara yang paling sederhana, dengan latar belakang stasioner dan konten pengguliran.

Unduh File Sumber Lihat Demo

Perkenalan singkat

Paralaks adalah efek dimana posisi suatu objek tampak berbeda jika dilihat dari posisi yang berbeda. Gerakan paralaks, atau dalam kasus kami, pengguliran paralaks, kemudian memberi kita ilusi bahwa dua objek dalam garis pandang yang sama, tetapi dengan jarak di antara mereka, tampaknya bergerak dengan kecepatan yang berbeda. Jika Anda pernah melihat ke luar jendela mobil saat mengemudi dengan kecepatan 100 km per jam di jalan raya, Anda akan melihat bahwa tiang listrik tampak melaju dengan kecepatan tinggi, sementara pegunungan di latar belakang tampak bergerak sangat lambat. , hampir terhenti. Ini adalah gerakan paralaks dalam aksi.

Sejauh web berjalan, kami dapat menginduksi efek paralaks pada wadah yang memiliki gambar latar belakang dan teks di atasnya. Dalam bentuknya yang paling sederhana, pengguliran paralaks akan menyebabkan konten bergulir seperti biasa, dan latar belakang tetap diam. Keindahan tentang teknik ini dalam bentuknya yang paling sederhana adalah hanya membutuhkan CSS. Mari kita menggali.

Markup & Struktur

Jika Anda memiliki perbaikan dengan situs yang tidak responsif, maka tidak akan ada tipu daya untuk mencapai ini. Kami berada di era desain web responsif, jadi itu tidak boleh dilakukan. Jangan takut! Kami memiliki beberapa CSS yang bagus yang kami miliki. Tapi pertama-tama, lihat beberapa markup. Markupnya sederhana – kita akan memiliki sections latar belakang/teks judul dan sections konten untuk efek maksimum. Berikut tampilannya:

  

    
Tenang
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, conectetur adipisicing elit...
  



  

    
Bangkit
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, conectetur adipisicing elit...
  



  

    
Tenang
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, conectetur adipisicing elit...
  

Setiap section dengan kelas parallax akan berisi gambar latar belakang dan teks judul, sementara setiap section dengan kelas content akan menjadi bagian berisi konten sederhana. Kelas container adalah div cair dengan lebar maksimum, membuat responsivitas semuanya sangat sederhana. Sekarang, mari kita menggali CSS.

Styling & Membuatnya Bekerja Dengan CSS

Hal pertama yang perlu diperhatikan adalah bahwa semua gambar latar belakang saya memiliki width 1600px dan height 600px. Itu memungkinkan saya untuk mengatur bagian paralaks saya ke ketinggian tetap 600px. Ada sedikit lebih dari itu meskipun. Karena saya tidak ingin latar belakang yang berulang (saya menggunakan gambar yang besar dan tebal), saya tidak dapat selalu mengharapkan pengguna berada pada lebar maksimum (yang akan memungkinkan gambar latar dalam tampilan penuh). Beruntung bagi kami, kami dapat memanfaatkan properti background-size CSS, dan mengaturnya menjadi cover . Ini memaksa gambar latar belakang untuk menempati total ruang yang tersedia dengan memperluasnya secara proporsional. Itu perlu diawali untuk dukungan maksimal, jadi perhatikan itu.

Sejauh ini bagus, kecuali untuk hal yang paling penting. Kami membutuhkan gambar latar belakang kami untuk tetap di tempatnya sementara konten kami bergulir melewatinya. Sekali lagi, CSS membuat hidup kita mudah. Kami menggunakan properti background-attachment dan mengaturnya ke fixed . Sederhana! Inilah tampilan CSS saya, dengan beberapa contoh kueri media:

 /* ================================================ ==============
  STRUKTUR UTAMA
================================================== ========== */
.wadah {
  lebar maks: 960 piksel;
  margin: 0 otomatis;
}
/* ================================================ ==============
  BAGIAN
================================================== ========== */
bagian.modul: anak terakhir {
  margin-bawah: 0;
}
bagian.modul h2 {
  margin-bawah: 40px;
  font-family: "Roboto Slab", serif;
  ukuran font: 30px;
}
bagian.modul p {
  margin-bawah: 40px;
  ukuran font: 16px;
  font-berat: 300;
}
bagian.modul p:anak terakhir {
  margin-bawah: 0;
}
bagian.modul.konten {
  bantalan: 40 piksel 0;
}
bagian.modul.paralaks {
  tinggi: 600 piksel;
  posisi latar belakang: 50% 50%;
  background-repeat: tidak-ulangi;
  lampiran latar belakang: diperbaiki;
  ukuran latar belakang: sampul;
}
bagian.modul.paralaks h1 {
  warna: rgba(255, 255, 255, 0.8);
  ukuran font: 48px;
  tinggi garis: 600 piksel;
  font-berat: 700;
  perataan teks: tengah;
  transformasi teks: huruf besar;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
bagian.modul.parallax-1 {
  background-image: url("../img/demo/_small/1.jpg");
}
bagian.modul.parallax-2 {
  background-image: url("../img/demo/_small/2.jpg");
}
bagian.modul.parallax-3 {
  background-image: url("../img/demo/_small/3.jpg");
}

@media semua dan (lebar minimum: 600px) {
  bagian.modul h2 {
    ukuran font: 42px;
  }
  bagian.modul p {
    ukuran font: 20px;
  }
  bagian.modul.paralaks h1 {
    ukuran font: 96px;
  }
}
@media semua dan (lebar minimum: 960px) {
  bagian.modul.paralaks h1 {
    ukuran font: 160px;
  }
}

Dukungan Browser & Info Properti

Dukungan browser secara umum sangat bagus. IE8 dan ke bawah tidak akan mendukung properti background-size , tetapi gaya bersyarat sederhana harus menanganinya. Selain itu, semuanya didukung dan Anda seharusnya tidak memiliki masalah. Untuk info lebih lanjut tentang properti CSS yang digunakan dalam tutorial ini, lihat MDN:

• Posisi Latar Belakang – referensi MDN
• Ukuran Latar Belakang – referensi MDN
• Lampiran Latar Belakang – referensi MDN

Bungkus

Di sini, kami telah menerapkan sesuatu yang sederhana, efektif, dan sedikit berbeda dari tampilan semua-menggulir-sekaligus biasa. Kami menggunakan beberapa teknik CSS yang bagus tetapi kurang dikenal untuk mencapai efek yang kami inginkan. Dan itu bungkus! Jangan lupa, Anda dapat melihat demo dan mengunduh sumbernya dengan mengklik tautan di bawah ini, dan jika Anda memiliki pertanyaan, komentar, atau umpan balik, Anda juga dapat meninggalkannya di bawah.