Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Parallax Scrolling

Menciptakan Efek Latar Belakang Masked Dengan CSS

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Final product image
What You'll Be Creating

Hari ini, kita akan melangkah melalui teknik yang sangat keren yang bisa anda gunakan untuk menciptakan efek yang sedikit serupa dengan pengguliran paralaks, namun tidak memerlukan JavaScript; efek tersebut bisa dicapai dengan sangat sederhana melalui CSS belaka.

Mulailah dengan memeriksa demo langsung untuk melihat apa yang akan anda pelajari (anda harus melihat ke desktop / laptop untuk mengetahui hasilnya).

Teknik ini dapat digunakan untuk membuat halaman deskripsi produk yang hebat, atau bahkan mencipatakan sesuatu yang mirip dengan presentasi Powerpoint / Keynote, dan akan sangat sesuai untuk ilustrasi cerita online.

Begini cara melakukannya.

Semuanya ada di CSS

Kunci teknik CSS ini adalah background-attachment:fixed tersedia bagi kita sejak CSS 2.1. Setiap gambar latar belakang dengan styling ini yang dipergunakan padanya akan tetap berada dalam posisi relatif tetap terhadap jendela (bukan elemen yang menggunakannya). Kami akan menggunakan CSS untuk menyimpan ilustrasi kami di tempat nya sementara konten kami bergulir secara independen di sampingnya.

Beberapa hal yang harus diperhatikan dengan properti CSS ini adalah gambar-gambar latar akan tetap relatif  terhadap jendela, posisi mereka tidak akan terpengaruh oleh hal-hal misalkan margin sedangkan gambar latar belakang biasa akan terpengaruh.

Anda juga harus tahu bahwa saat properti berfungsi dengan luar biasa di semua browser desktop, saat ini, ia tidak berfungsi di Chrome seluler dan terkadang bisa sedikit tersendat di browser seluler lainnya. Jadi, ketika pengunjung anda akan tetap melihat gambar anda dengan baik, efek bergulir itu sendiri sebaiknya dilihat pada platform desktop.

Bagaimana Hal Itu Dilakukan

Langkah dasar untuk mencapai apa yang anda lihat dalam demo adalah:

  1. Buat elemen wadah dan tambahkan konten anda ke dalamnya.
  2. Atur wadah (sebuah div dalam bidang kami) untuk membuat padding pada satu sisi dengan lebar sekitar 50%, sehingga mendorong konten ke sisi yang lain.
  3. Tambahkan gambar latar belakang, juga dengan lebar sekitar 50%, dan posisikan di sisi yang berlawanan dengan konten.
  4. Tetapkan background-attachment:fixed; dan perhatikan sihir bergulir!

Mari kita lihat bagaimana semua ini terjadi selangkah demi selangkah. Anda akan ingin mengambil file sumber untuk tutorial ini sehingga anda memperoleh gambar-gambar yang dibutuhkan.

1. Aturan Dasar

Mulailah dengan membuat folder proyek dan menambahkan file index.html ke dalamnya, serta folder css dengan sebuah file bernama style.css ditambahkan ke dalamnya. Salin dan tempelkan empat gambar dari zip file sumber yang telah anda download ke dalam folder bernama Images.

Tambahkan HTML ini ke index.html:

Apa yang kami lakukan di sini adalah menyiapkan shell HTML dasar kami, memasukkan stylesheet dan beberapa Google Font kami, lalu membuat wadah konten div pertama kami yang akan kami gunakan untuk menerapkan teknik ini.

Wadah div memiliki tiga kelas:

  1. .content - digunakan untuk mengatur beberapa properti yang umum untuk semua wadah konten.
  2. .right - mengidentifikasi bahwa wadah ini harus memiliki konten kanan-kanan (kami juga akan bekerja dengan wadah kiri-kanan nanti)
  3. .illustration_01 - digunakan untuk mengatur gambar latar dan warna spesifik untuk wadah ini

Styling

Sekarang kita siap untuk beberapa CSS. Mulailah dengan menambahkan beberapa kode pemformatan dan kode normalisasi dasar ke file style.css anda:

Sekarang untuk kelas .content. Tambahkan ini ke bagian bawah stylesheet anda:

Kelas ini merupakan tempat sebagian besar keajaiban terjadi. Untuk teks, kami menetapkan ukuran dan warna font kami. Untuk latar belakang, anda akan melihat kita mulai dengan mengatur background-size menjadi 49% otomatis.

Ini berarti gambar latar belakang akan selalu meregang atau mengecil hingga mengisi 49% lebar halaman, dan tingginya akan menyesuaikan secara proporsional. Kami menggunakan nilai 49% dan bukan 50%, kalau tidak Firefox akan menunjukkan artefak garis aneh di tengah layar.

Kami kemudian menetapkan background-fixed, seperti yang sudah anda ketahui dari deskripsi di atas, akan membuat gambar latar tetap dipakai saat kami gulir, dan membuat posisinya saling berhubungan dengan jendela daripada wadah yang menerapkannya.

Akhirnya kita atur background-repeat: no-repeat; Untuk memastikan gambar kita muncul sekali saja di halaman.

Selanjutnya, tambahkan kelas .right ke stylesheet Anda:

Kelas terakhir ini menempatkan konten teks pada satu setengah layar dan gambar latar di sisi lain.

Pengaturan background-position memerintahkan gambar latar belakang untuk memposisikan dirinya menjadi nol piksel dari sisi kiri jendela dan menyesuaikan diri setengah jalan dari bagian atas jendela.

Terakhir, tambahkan kelas .illustration_01:

Kelas ini menentukan gambar dan warna latar belakang yang kami inginkan untuk wadah konten ini.

Periksa situs anda dan sekarang anda harus melihat ini:

Saat anda gulir ke bawah, anda akan terus melihat slide konten sementara gambar tetap berada di tempat yang sebenarnya.

2. Tambahkan Wadah Kedua

Mari tambahkan wadah konten lain, yang satu ini dengan konten sejajar dengan kiri.

Tambahkan container konten HTML di bawah div terakhir Anda:

Perhatikan saat ini kita menggunakan kelas .left bukan .right dan kita sudah menaikkan angka ilustrasi jadi kelas .illustration_01 diganti dengan .illustration_02

Tambahkan dua kelas baru berikut ke stylesheet anda:

Kali ini kita memiliki padding 50% yang diterapkan ke sisi kanan wadah sehingga isinya akan terdorong ke kiri, dan latar belakang diposisikan secara horizontal pada 100%, yaitu sepanjang jalan ke kanan. Kami juga menambahkan warna dan gambar yang berbeda ke latar belakang wadah ini.

Periksa situs anda lagi dan mulailah bergulir ke bawah. Ketika anda mencapai akhir wadah pertama, anda harus melihat yang kedua mulai muncul, usap bagian atas gambar pertama anda dan secara bertahap gambar ke dua anda akan muncul.  

3. Masukkan Separator

Separator meningkatkan efek teknik ini jika ada pemisah antara kedua wadah jadi mari kita tambahkan itu sekarang.

Di antara dua wadah div anda, tambahkan HTML ini:

Dan tambahkan kelas .separator ke stylesheet anda:

Saat merefresh situs anda, sekarang anda harus memiliki pemisah yang bagus antara wadah anda:

4. Wadah Ketiga dan Keempat

Sekarang anda dapat memasukkan kode untuk pemisah dan wadah konten yang tersisa.

Tambahkan HTML ini di bawah divs yang ada:

Dan CSS ini ke stylesheet anda:

Anda sekarang anda telah memiliki seluruh layar anda di tempat dengan menampilkan wadah ketiga dan keempat:

Serta pemisah akhir untuk menutupnya:

5. Buatlah Responsif

Hal terakhir yang harus anda lakukan adalah memperhitungkan berbagai ukuran layar. Bila area pandang terlalu kecil untuk menampung gambar latar belakang dengan nyaman, kami ingin mengalihkannya ke gambar sebaris.

Di bagian atas dari setiap wadah konten anda, di dalam divs pembuka dan di atas teks, tambahkan gambar dengan kelas .smallscreen dan di dalamnya, tempatkan sebuah tag img untuk memuat setiap gambar yang saat ini digunakan di latar belakang:

Wadah konten pertama:

Wadah konten kedua:

Wadah konten ketiga:

Wadah konten keempat

Kita akan menggunakan kelas .smallscreen untuk menyembunyikan gambar inline ini secara default, namun untuk menunjukkannya kita harus sampai pada ukuran layar yang lebih kecil.

Tambahkan kelas berikut ke stylesheet anda:

Kami sekarang akan menambahkan kueri-kueri media yang akan menangani apakah gambar latar belakang atau gambar inline dapat ditampilkan. Mereka juga akan semakin memperkecil ukuran teks dan jarak dalam tata letak sehingga kita dapat menyesuaikan segala hal dengan baik di semua lebar viewport.

Tambahkan kueri media ini ke lembar kerja Anda:

Empat queri media pertama hanya mengurangi ukuran font teks dan padding di dalam wadah konten secara progresif agar sesuai dengan lebar layar yang tersedia.

Di kueri media kelima dengan max-width: 50rem, kami menyertakan kode yang membuat kelas .smallscreen terlihat, menghapus padding sisi 50% dari kontainer konten, dan menyembunyikan gambar latar belakang. Saat kueri media ini dimulai, kita tidak akan lagi melihat gambar latar belakang tetap besar, dan kita akan melihat gambar biasa di bagian atas dari masing-masing wadah konten.

Sekarang ketika anda merefresh situs anda, anda harus melihatnya secara mulus turun bersama dengan semua lebar viewport, sampai anda melihat pada ukuran terkecilnya:

Kesimpulan

Bahkan setelah bertahun-tahun bekerja dengan CSS, saya tidak pernah terkejut dengan semakin banyaknya hal mengagumkan yang dapat anda lakukan dengannya. Dan semakin  sederhana tekniknya, semakin mengesankan hasil nya.

Cobalah permata kecil ini, sangat cepat dan mudah dan anda akan ketagihan!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.