Laman melancarkan lama telah menjadi trend reka bentuk web yang benar-benar biasa. Salah satu daripada sub-jenis yang paling keren ini adalah tapak menatal paralaks, di mana imej bergerak untuk melepaskan kesan paralaks. Sebagai pengguna menatal ke bawah halaman, animasi dicetuskan dan secara keseluruhan ia memberikan rupa dan rasa segar kepada mana-mana laman web jika dilaksanakan dengan betul.
Membuat laman tontonan paralaks sering membosankan kerana ia memerlukan pengetahuan mendalam CSS, Javascript dan reka bentuk web yang baik untuk menarik diri. Berikut adalah senarai Plugin Terbaik Parallax Scrolling yang bukan sahaja memudahkan anda untuk membuat laman tontonan paralaks, tetapi juga mempunyai perpustakaan kesan paralaks yang baik dan dapat menjadi lebih mudah dan cepat bagi anda untuk membangunkan halaman web yang bagus .
PENAFIAN : Sebelum memulakan, ambil perhatian bahawa untuk menggunakan plugin ini, pengetahuan tentang teknologi web (HTML / CSS / Javascript) diperlukan. Kebanyakan plugin yang disenaraikan menggunakan jquery, jadi pengetahuan tentang Jquery juga mungkin diperlukan.
Plugin Skrol Parallax
1. ScrollMagic
ScrollMagic adalah salah satu plugin jquery yang paling popular dan kaya di luar sana. Ia satu perpustakaan javascript membolehkan anda membuat kesan tatal yang kelihatan ajaib. Menggunakan ScrollMagic anda boleh bernyawa berdasarkan kedudukan tatal anda. Ini bermakna anda boleh membetulkan, memindahkan atau menghidupkan elemen HTML semasa anda menatal, untuk apa sahaja tempoh yang anda mahukan, dan juga dengan mudah menambah kesan paralaks ke laman web anda. Ia sangat disesuaikan dan juga ringan (6kb apabila gzip). Antara plugin skrol paralaks lain, Scroll Magic mempunyai dokumentasi terbaik dan sumber luaran. Ia juga serasi dengan mudah alih juga.
ScrollMagic mempunyai banyak contoh yang disenaraikan. Semak mereka untuk inspirasi dan bimbingan mengenai penggunaan perpustakaan ini.
Mengenai:
Laman web: //janpaepke.github.io/ScrollMagic/
Dicipta oleh: Jan Paepke
Pemasangan:
1. CDN:
2. Muat turun dari Github
2. skrollr
skrollr adalah Javascript tulen yang ringan dan pustaka CSS, tanpa jQuery yang terlibat. Ia pada asasnya ialah 'Scroll Magic simplified for CSS'. Untuk menggunakan skrollr, anda tidak perlu mengetahui Javascript atau mana-mana jQuery. Hanya HTML dan CSS cukup. skrollr menggunakan atribut data untuk menghidupkan mana-mana elemen HTML yang anda mahu. Salah satu kelemahan utama skrollr ialah animasi hanya berfungsi sementara halaman sedang ditatal. Jika tidak semua kesan akan ditangguhkan. skrollr membolehkan anda menghidupkan semua sifat CSS elemen HTML anda.
Mengenai:
Homepage: //prinzhorn.github.io/skrollr/
Dicipta oleh: Prinzhorn
Pemasangan: Muat turun dari Github
3. pagePiling.js 
Page Piling adalah plugin jQuery yang membolehkan anda membuat laman web anda ke dalam bahagian yang berbeza yang bertumpu di atas satu sama lain. Apabila menatal, atau dengan mengakses URL, setiap bahagian didedahkan dalam animasi gelongsor yang kemas. pagePiling.js serasi dengan semua platform - desktop, tablet dan mudah alih - dan berfungsi dengan kebanyakan penyemak imbas. Ia merosot pada pelayar lama yang tidak menyokong animasinya (seperti IE 7). Untuk menggunakan plugin, anda perlu menyertakan CSS dan fail Javascript di dalam HTML anda. pagePiling.js dimulakan oleh (document) .ready function:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Untuk permulaan yang lebih maju, pergi melalui README.md.
Mengenai:
Laman web: //alvarotrigo.com/pagePiling/
Dicipta oleh: alvarotrigo
Pemasangan: Muat turun dari Github
4. Alton
Alton adalah plugin jQuery 'scroll-jacking' kepada kami. Skrol tatal bermakna tatal semula penyemak imbas anda dinyahdayakan memihak kepada menatal yang disasarkan yang apabila dimulakan (oleh roda tetikus atau pad sentuh anda) membawa anda ke titik menegak berikutnya pada skrin, atau bahagian atas bekas seterusnya.
Alton membolehkan tiga fungsi berasingan yang dipanggil 'Hero', 'Bookend' dan 'Standard'. Standard membolehkan anda menggunakan skrol halaman penuh, dengan setiap bahagian ketinggian 100%. Gulungan tatal membawa bahagian seterusnya atau bahagian sebelumnya. Bookend membolehkan anda membuat pengalaman bookend-kind sementara Hero membolehkan anda menatalkan bicu hanya seksyen 'Hero', dengan seluruh halaman mempunyai (semula) menatal asli.
Mengenai:
Laman web: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Dicipta oleh: daun kertas
Pemasangan: Muat turun dari Github
5. Stellar.js
Stellar adalah plugin jQuery di mana anda boleh dengan mudah menambah kesan menatal paralaks. Untuk menjalankan, pertama anda mesti menjalankan fungsi $ .stellar (). Pengaturan animasi untuk elemen individu boleh dikonfigurasi menggunakan atribut data pada elemen tersebut.
Bulat juga membolehkan anda mempunyai latar belakang paralaks, yang merupakan latar belakang yang meletakkan semula pada skrol. Salah satu ciri yang paling berguna Stellar.js adalah offset.
Semua unsur akan kembali ke kedudukan asalnya apabila ibu bapa offset mereka memenuhi tepi skrin-tambah atau tolak opset opsional anda sendiri. Ini membolehkan anda membuat pola paralaks yang rumit dengan mudah. (Dokumentasi Cemerlang)
Mengenai:
Homepage: //markdalgleish.com/projects/stellar.js/
Dicipta oleh: Mark Dalgeish
Pemasangan: Muat turun dari Github
6. multiScroll.js
Plugin ini dibuat oleh pemaju yang sama (alvarotrigo) yang membuat plugin halamanPiling.js. Apa yang berbilang skrol pada dasarnya adalah, ia membolehkan anda membuat kesan di mana setiap bahagian halaman memuatkan dalam dua bahagian yang dibahagi-bahagi ke tempat sebagai beban halaman. Lihat laman utama untuk melihat apa yang kelihatan seperti pada penyemak imbas anda. multiScroll.js membolehkan anda menetapkan kelajuan menatal, pelonggaran, pilihan menatal ke papan kekunci, dan banyak lagi hartanah supaya anda boleh menyesuaikan kesan dengan tepat bagaimana anda memerlukannya.
Mengenai:
Laman web: //alvarotrigo.com/multiScroll/
Dicipta oleh: alvarotrigo
Pemasangan: Muat turun dari Github
7. ScrollMe
ScrollMe adalah plugin untuk menambah kesan skrol paralaks mudah ke halaman anda. Ia boleh membuat skala, memutar, menterjemah dan mengubah kelegapan unsur-unsur pada halaman, seperti yang anda tatal ke bawah. ScrollMe tidak memerlukan Javascript, dan hanya pengetahuan CSS yang mencukupi. Dengan menambah kelas "animateme" dan atribut data yang diperlukan, anda boleh menghidupkan sebarang elemen HTML. ScrollMe digunakan untuk menambah kesan CSS. Ia ringan dan semua animasi lancar, selagi anda menggunakannya secara sederhana.
Mengenai:
Laman web: //scrollme.nckprsn.com/
Dicipta oleh: Nick Pearson
Pemasangan: Muat turun dari Github
8. Tatal Parallax
Tatal Parallax adalah mudah untuk menggunakan plugin jQuery yang membolehkan anda membuat kesan tatal imej paralaks yang terdapat di laman web seperti Spotify. Ia agak mudah digunakan - hanya nyatakan kelas CSS yang diperlukan untuk pemegang imej. Daripada menggunakan tag, untuk menggunakan plugin ini, anda mesti menggunakan unsur-unsur yang mempunyai imej latar belakang yang ditentukan (dengan menggunakan `CSS latar belakang` property.You boleh membuat elemen responsif menggunakan CSS @media queries.
Mengenai:
Laman web: //parallax-scroll.aenism.com/
Dicipta oleh: Aen
Pemasangan: Muat turun dari Github
9. Jarallax
Jarallax adalah perpustakaan CSS dan Javascript yang mengkhususkan diri dalam kesan menatal paralaks. Jarallax dikonfigurasikan menggunakan Javascript (Tiada jQuery, hanya vanila tulen JS). Ia menyokong ciri-ciri menatal, pelonggaran, dan animasi paralaks yang lancar. Jarallax disokong oleh kebanyakan pelayar, merentasi platform. Laman web Jarallax mempunyai dokumentasi yang sangat baik mengenai cara menyesuaikan Jarallax untuk keperluan anda. Jarallax juga mempunyai tutorial video yang menunjukkan bagaimana untuk membuat persediaan Jarallax untuk laman web anda dan bagaimana untuk memulakannya.
Mengenai:
Laman web: //www.jarallax.com/
Dicipta oleh: Jarallax
Pemasangan: Muat turun dari laman web Jarallax
10. Superscrollorama
Superscrollorama adalah plugin berasaskan jQuery yang menyokong animasi tatal. Ia dikuasakan oleh TweenMax dan Engine Greensock Tweening, yang meningkatkan prestasi animasi, dan kelancaran. Animasi superscrollorama dipanggil melalui jQuery, dan anda boleh menggunakan kebanyakan fungsi TweenMax.js juga. Malangnya, animasi ini tidak disokong sepenuhnya oleh peranti mudah alih (kerana peranti skrin sentuh mengendalikan menatal dengan cara yang berbeza). Walau bagaimanapun menggunakan kaedah setScrollContainerOffset, kesan Superscrollorama boleh diakses pada peranti mudah alih.
Berikut adalah kod untuk melakukan ini:
.setScrollContainerOffset(x, y)
(x: x offset the scrollcontainer, y: the offset x of the scrollcontainer)
Mengenai:
Homepage: //johnpolacek.github.io/superscrollorama/
Dicipta oleh: johnpolacek
Pemasangan: Muat turun dari Github
LIHAT JUGA: 10 Penjana Tapak Statik Terbaik
