Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. ScrollMagic
Webdesign

Cara Membuat Sidebar Sticky di Halaman Scroll Dengan ScrollMagic.js

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Dalam tutorial ini, kita akan menggunakan ScrollMagic.js, library JavaScript yang sangat populer, untuk membuat sidebar yang sticky di halaman scroll. Dalam tiga langkah (HTML, CSS, dan JavaScript), kita akan jabarkan keseluruhan proses.

Inilah yang akan kita buat (lihat versi fullscreen untuk merasakan magic penuhnya dan beri beberapa ♥):

Sidebar hanya akan disematkan ketika jendela browser setidaknya 768px lebar dan mencapai tepi atas viewport. Layar yang lebih kecil mengalami tata letak yang ditumpuk sebagai gantinya.

Apa itu ScrollMagic.js?

Untuk deskripsi terbaik ScrollMagic, kita akan menuju ke halaman Github:

"library javascript untuk interaksi scroll magis."

Dibuat oleh Jan Paepke, dapat dikombinasikan secara efektif dengan Greensock Animation Platform (GSAP) untuk membuat animasi JavaScript yang kompleks dan menarik. Untuk lebih memahami kemampuan ScrollMagic, lihat daftar contoh ini dan lihat tutorial dan kursus ini di Tuts+.


Mulai dengan ScrollMagic.js

Untuk memulai dengan ScrollMagic, Anda harus terlebih dahulu memasukkannya ke dalam proyek Anda. Anda dapat mengunduhnya dengan mengunjungi repo GitHub-nya, dengan menggunakan pengelola paket (mis. npm), atau dengan memuat aset yang diperlukan melalui CDN (mis. cdnjs).

Untuk demo kita, kita akan memilih opsi terakhir. Dengan memperhatikan hal itu, jika Anda melihat di bawah tab Settings pada pena demo kita, Anda akan melihat bahwa saya telah menyertakan satu file JavaScript eksternal:

Demo Set Up

Saya juga memasukkan Babel untuk menyusun kode ES6 ke ES5.

1. HTML

HTML kita terdiri dari dua bagian helper dan sebuah post. Post tersebut berisi dua sub-bagian: detail post dan sidebar post. Dalam skenario nyata, konten post dapat sesuai dengan post blog, kamar hotel, atau program sekolah.

Berikut markupnya:

2. CSS

Kita tidak akan menentukan gaya khusus apa pun untuk contoh kita. Menariknya, kita menggunakan CSS grid untuk menata konten entri pada layar medium dan lebih tinggi (≤768px).

Inilah bagian dari CSS:

3. JavaScript

Dengan HTML dan CSS di tempat, kita siap memeriksa kode JavaScript yang bertanggung jawab untuk mengaktifkan ScrollMagic.

Perlu diingat bahwa cara terbaik untuk memahami cara kerja plugin ini adalah membaca dokumentasinya. Sumber informasi lain yang berguna adalah cheat sheet ScrollMagic yang dibuat oleh Petr Tichy.

Berikut kode JavaScript kita:

Mari jelaskan secara singkat tindakan yang diperlukan:

  1. Kita mulai dengan membuat controller.
  2. Selanjutnya, kita membuat adegan dengan opsi khusus dan menambahkannya ke controller.
  3. Jika lebar jendela setidaknya 768px dan sidebar mencapai tepi atas area pandang, kita pasangkan untuk durasi yang ditentukan dalam adegan. Dalam kasus kita, durasi yang diinginkan dihitung dengan mengurangi tinggi detail postingan dari tinggi konten sidebar.
  4. Saat jendela dirubah ukurannya, kita memeriksa lebarnya. Jika lebih kecil dari 768px, sidebar tetap menjadi bagian dari flow dokumen normal, jika tidak maka akan menjadi sticky.

4. Browser Support

Plugin itu sendiri memiliki browser support yang luar biasa. Di luar support plugin, demo kita menggunakan CSS Grid, sehingga hanya akan berfungsi di browser yang support metode tata letak ini.

Kesimpulan

Dalam tutorial ini, kita berhasil membuat sidebar yang menjadi sticky saat kita menggulir laman ke bawah. Implementasi dasar kita bukanlah hal yang paling kuat yang dapat Anda bangun dengan library luar biasa ini, tetapi semoga cukup bermanfaat untuk memanfaatkannya dalam proyek yang akan datang.

Terakhir, jika Anda memahami pendekatan ScrollMagic lain yang lebih efektif untuk membuat demo kita, beri tahu kita di komentar di bawah.

Advertisement
Advertisement
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.