Situs gulir panjang telah menjadi tren desain web yang sangat umum. Salah satu sub-tipe paling keren dari ini adalah situs bergulir paralaks, di mana gambar bergerak untuk memberikan efek paralaks. Saat pengguna menggulir ke bawah halaman, animasi dipicu dan secara keseluruhan itu memberikan tampilan dan nuansa baru ke situs web apa pun jika diterapkan dengan benar.
Membuat situs gulir parallax seringkali membosankan karena membutuhkan pengetahuan mendalam tentang CSS, Javascript dan desain web yang bagus. Berikut adalah daftar Plugin Scrolling Parallax Terbaik yang tidak hanya membuatnya lebih mudah bagi Anda untuk membuat situs scrolling paralaks, tetapi juga memiliki pustaka efek paralaks yang diberkahi dengan baik sehingga menjadi lebih mudah dan lebih cepat bagi Anda untuk mengembangkan halaman web yang terlihat bagus .
PENOLAKAN : Sebelum memulai, perhatikan bahwa untuk menggunakan plugin ini diperlukan pengetahuan teknologi web (HTML / CSS / Javascript). Sebagian besar plugin yang terdaftar menggunakan jquery, jadi pengetahuan tentang Jquery mungkin juga dibutuhkan.
Plugin Parallax Scrolling
1. ScrollMagic
ScrollMagic adalah salah satu plugin jquery paling populer dan kaya fitur di luar sana. Ini adalah perpustakaan javascript yang memungkinkan Anda membuat efek gulir yang tampaknya ajaib. Dengan menggunakan ScrollMagic Anda dapat menghidupkan berdasarkan posisi gulir Anda. Ini berarti Anda dapat memperbaiki, memindahkan, atau menghidupkan elemen HTML saat Anda menggulir, untuk durasi berapa pun yang Anda inginkan, dan juga dengan mudah menambahkan efek paralaks ke situs web Anda. Ini sangat dapat disesuaikan dan juga ringan (6kb saat di-gzip). Di antara plugin scroll parallax lainnya, Scroll Magic memiliki dokumentasi terbaik dan sumber daya eksternal. Ini sangat kompatibel dengan ponsel juga.
ScrollMagic memiliki banyak contoh yang terdaftar. Lihatlah mereka untuk inspirasi dan panduan tentang cara menggunakan perpustakaan ini.
Tentang:
Beranda: //janpaepke.github.io/ScrollMagic/
Dibuat oleh: Jan Paepke
Instalasi:
1. CDN:
2. Unduh dari Github
2. skrollr
skrollr adalah pustaka Javascript dan CSS murni yang ringan, tanpa melibatkan jQuery. Ini pada dasarnya adalah 'Scroll Magic yang disederhanakan untuk CSS'. Untuk menggunakan skrollr, Anda tidak perlu tahu Javascript atau jQuery apa pun. Cukup HTML dan CSS sudah cukup. skrollr menggunakan atribut data untuk menghidupkan elemen HTML apa pun yang Anda inginkan. Salah satu kelemahan utama skrollr adalah animasi hanya berfungsi ketika halaman sedang digulir. Kalau tidak, semua efek ditunda. skrollr memungkinkan Anda menghidupkan semua properti CSS dari elemen HTML Anda.
Tentang:
Beranda: //prinzhorn.github.io/skrollr/
Dibuat oleh: Prinzhorn
Instalasi: Unduh dari Github
3. pagePiling.js 
Page Piling adalah plugin jQuery yang memungkinkan Anda membuat situs web Anda menjadi beberapa bagian berbeda yang saling bertumpuk. Saat menggulir, atau dengan mengakses URL, setiap bagian terungkap dalam animasi geser yang rapi. pagePiling.js kompatibel dengan semua platform - desktop, tablet, dan seluler - dan berfungsi dengan sebagian besar browser. Ini terdegradasi dengan anggun di browser lama yang tidak mendukung animasinya (seperti IE 7). Untuk menggunakan plugin, Anda harus menyertakan CSS dan file Javascript di dalam HTML Anda. pagePiling.js diinisialisasi oleh (dokumen). Sudah berfungsi:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Untuk inisialisasi lebih lanjut, buka README.md.
Tentang:
Beranda: //alvarotrigo.com/pagePiling/
Dibuat oleh: alvarotrigo
Instalasi: Unduh dari Github
4. Alton
Alton adalah plugin 'scroll-jacking to us' jQuery. Pengguliran gulir berarti bahwa gulir asli peramban Anda dinonaktifkan demi pengguliran bertarget yang ketika dimulai (oleh roda mouse atau touchpad Anda) membawa Anda ke titik vertikal berikutnya di layar, atau bagian atas wadah berikutnya.
Alton memungkinkan tiga fungsionalitas jenis terpisah, yang disebut 'Pahlawan', 'Bookend' dan 'Standar'. Standar memungkinkan Anda menggunakan pengguliran halaman penuh, dengan setiap bagian dengan tinggi 100%. Sebuah gulir menampilkan bagian berikutnya atau bagian sebelumnya. Bookend memungkinkan Anda membuat pengalaman jenis bookend sementara Hero memungkinkan Anda untuk menggulir jack hanya bagian 'Pahlawan', dengan sisa halaman memiliki pengguliran asli (diaktifkan kembali).
Tentang:
Beranda: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Dibuat oleh: kertas-daun
Instalasi: Unduh dari Github
5. Stellar.js
Stellar adalah plugin jQuery di mana Anda dapat dengan mudah menambahkan efek bergulir paralaks. Untuk menjalankan, pertama-tama Anda harus menjalankan fungsi $ .stellar (). Pengaturan animasi untuk masing-masing elemen dapat dikonfigurasi menggunakan atribut data pada elemen itu.
Stellar bahkan memungkinkan Anda memiliki latar belakang paralaks, yaitu latar belakang yang mengubah posisi pada gulir. Salah satu fitur Stellar.js yang paling berguna adalah offset.
Semua elemen akan kembali ke posisi semula ketika orangtua offset mereka memenuhi tepi layar — plus atau minus offset opsional Anda sendiri. Ini memungkinkan Anda untuk membuat pola paralaks yang rumit dengan sangat mudah. (Dokumentasi Stellar)
Tentang:
Beranda: //markdalgleish.com/projects/stellar.js/
Dibuat oleh: Mark Dalgeish
Instalasi: Unduh dari Github
6. multiScroll.js
Plugin ini dibuat oleh pengembang yang sama (alvarotrigo) yang membuat plugin pagePiling.js. Apa yang pada dasarnya dilakukan multi gulir adalah, ini memungkinkan Anda membuat efek di mana setiap bagian halaman memuat dalam dua bagian terbagi yang meluncur ke tempatnya saat halaman dimuat. Lihat beranda untuk melihat seperti apa tampilan ini di browser Anda. multiScroll.js memungkinkan Anda mengatur kecepatan gulir, pelonggaran, opsi gulir keyboard, dan banyak lagi properti sehingga Anda dapat menyesuaikan efek dengan tepat seperti yang Anda inginkan.
Tentang:
Beranda: //alvarotrigo.com/multiScroll/
Dibuat oleh: alvarotrigo
Instalasi: Unduh dari Github
7. ScrollMe
ScrollMe adalah plugin untuk menambahkan efek gulir paralaks sederhana ke halaman Anda. Ini dapat mengatur skala, memutar, menerjemahkan, dan mengubah opacity elemen pada halaman, saat Anda menggulir ke bawah. ScrollMe tidak memerlukan Javascript, dan hanya pengetahuan CSS yang cukup. Dengan menambahkan kelas "animateme" dan atribut data yang diperlukan, Anda dapat menghidupkan elemen HTML apa pun. ScrollMe paling baik digunakan untuk menambahkan efek CSS. Ini ringan dan semua animasi halus, asalkan Anda menggunakannya dalam jumlah sedang.
Tentang:
Beranda: //scrollme.nckprsn.com/
Dibuat oleh: Nick Pearson
Instalasi: Unduh dari Github
8. Gulir Parallax
Parallax Scroll adalah plugin jQuery yang mudah digunakan yang memungkinkan Anda membuat efek gulir gambar paralaks yang ditemukan di situs-situs seperti Spotify. Sangat mudah digunakan - cukup tentukan kelas CSS yang diperlukan untuk pemegang gambar. Daripada menggunakan tag, untuk menggunakan plugin ini Anda harus menggunakan elemen yang memiliki gambar latar belakang ditentukan (dengan menggunakan properti CSS `background-image`. Anda dapat membuat elemen responsif menggunakan kueri CSS @ media.
Tentang:
Beranda: //parallax-scroll.aenism.com/
Dibuat oleh: Aen
Instalasi: Unduh dari Github
9. Jarallax
Jarallax adalah perpustakaan CSS dan Javascript yang berspesialisasi dalam efek bergulir paralaks. Jarallax dikonfigurasi menggunakan Javascript (No jQuery, hanya vanilla JS murni). Ini mendukung fitur penggulungan yang dihaluskan, pelonggaran, dan animasi paralaks. Jarallax didukung oleh sebagian besar browser, lintas platform. Situs web Jarallax memiliki dokumentasi yang sangat baik tentang cara menyesuaikan Jarallax untuk kebutuhan Anda. Jarallax juga memiliki tutorial video yang menunjukkan cara mengatur Jarallax untuk situs web Anda dan cara memulai.
Tentang:
Situs web: //www.jarallax.com/
Dibuat oleh: Jarallax
Instalasi: Unduh dari situs web Jarallax
10. Superscrollorama
Superscrollorama adalah plugin berbasis jQuery yang mendukung animasi gulir. Ini didukung oleh TweenMax dan Greensock Tweening Engine, yang meningkatkan kinerja animasi, dan kehalusan. Animasi Superscrollorama dipanggil melalui jQuery, dan Anda dapat menggunakan sebagian besar fungsi TweenMax.js juga. Sayangnya, animasi ini tidak sepenuhnya didukung oleh perangkat seluler (karena perangkat layar sentuh menangani pengguliran dengan cara yang berbeda). Namun menggunakan metode setScrollContainerOffset, efek Superscrollorama dapat diakses di perangkat seluler.
Berikut adalah kode untuk melakukan ini:
.setScrollContainerOffset(x, y)
(x: x offset dari scrollcontainer, y: x offset dari scrollcontainer)
Tentang:
Homepage: //johnpolacek.github.io/superscrollorama/
Dibuat oleh: johnpolacek
Instalasi: Unduh dari Github
LIHAT JUGA: 10 Generator Situs Statis Terbaik
