Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Cara Memberi Efek "Slip Scroll" pada Logo Anda

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam tutorial hari ini kita akan menggunakan JavaScript untuk menciptakan efek paralaks yang sederhana dan fleksibel dimana logo nampaknya berubah warna dengan latar belakangnya saat pengguna menggulir.

Slip scroll effect
Efek Slip Scroll sedang beraksi

Kita akan membuat elemen "default" yang berlaku untuk penempatannya (position: fixed), dan sekelompok elemen "yang dapat dipindahkan" yang posisinya tergantung pada elemen "default" tersebut.Kita akan menggunakan JavaScript untuk mewujudkannya setiap kali pengguna menggulir.

Catatan: untuk menutupi semua basis, saya telah memberikan penjelasannya dalam bentuk video dan tulisan.

Tonton Videonya

Berlangganan ke Tuts+ Web Design di Youtube

Baca Tutorialnya

Markup dasar

Kita akan mulai dengan membuat beberapa elemen yang mengandungnya.Mari kita membuat salah satu latar belakang mereka gelap dan satu terang sehingga kita dapat memiliki gambar kontras yang terkandung di dalamnya. Mari kita juga maju dan membuat gambar pertama kita menjadi gambar "default" dengan memberinya kelas default, sementara gambar lainnya akan mendapatkan kelas moveable.

Gaya dasar

Sekarang mari pastikan gambar kita tidak berakhir bergulir di luar wadah mereka dengan menetapkan overflow:hidden.Kami juga akan terus maju dan mengatakan kontainer ini memiliki posisi relatif, sehingga elemen yang diposisikan secara absolut akan sesuai dengan kontainer ini dan bukan langsung ke elemen fixed saat kita menulis JavaScript.

Demi kemampuan bergulir, mari kita memberi kontainer ini sebuah min-height sekitar 400px.Dan untuk menahan logo kita menjauh dari tepinya, mari kita memberi beberapa padding sebanyak 1em.

Setiap kontainer membutuhkan beberapa warna kontras jadi:

Dan akhirnya, seperti yang dijanjikan, mari kita tetapkan default dan CSS yang dapat dipindahkan sehingga ia tertancap dengan halaman saat pengguna menggulir, dan yang lainnya bergerak bersamaan tanpa menabrak elemen lainnya:

Itu seharusnya mengurus markup dan styling.Jika Anda melihat halamannya, Anda harus melihat logo default bergulir ke bawah dan bersembunyi di balik kontainer lainnya, sementara semua logo yang bergerak dapat muncul sebagai elemen normal di kiri atas kontainer masing-masing.

Memperkenalkan JavaScript

Sekarang untuk bagian yang menyenangkan, membuatnya bekerja dengan JavaScript.

Pertama, kita akan memuat jQuery dan skrip kustom kami di bagian bawah index.html kita:

Buatlah dan buka file bernama js/slipScroll.js.

Di dalam file itu, hal pertama yang akan kita lakukan adalah membuat sebuah fungsi yang disebut setLogo dan membuang fungsi ini ke dalam event scroll jQuery sehingga setiap kali pengguna menggulir satu piksel, event ini akan dijalankan. Kita juga ingin memastikan bahwa kita mengaktifkan event ini saat pengguna pertama kali tiba di halaman (sebelum mereka menggulir):

Membuatnya Bekerja

Sekarang untuk keajaibannya.Katakanlah bahwa setiap kejadian tunggal .moveable pada halaman harus mengubah posisi top CSS-nya hingga sejauh manapun, gambar defaultnya adalah dari bagian atas halaman, dikurangi sejauh mana kontainer elemen .moveable ini dari bagian atas halaman.

Refresh halaman Anda, dan voila!Anda baru saja membuat efek menggulir pseudo-parallax dari awal hanya dalam beberapa baris kode.

Kesimpulan

Saya mendorong Anda untuk bermain-main dengan solusi ini.Cobalah bermain dengan fungsi JavaScript itu sendiri untuk melihat jenis offset aneh apa yang Anda dapatkan jika Anda menambahkan atau menghapus beberapa piksel. Cobalah menggunakan elemen yang berbeda (navigasi mungkin?) bukan hanya gambar untuk konten Anda yang dapat digulir.

Saya harap Anda belajar banyak dan merasa bebas untuk memberikan komentar di bawah ini jika Anda memiliki pertanyaan.

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.