Plugin JavaScript Terbaik dan Gratis
Bahkan dengan popularitas jQuery, tidak perlu bergantung pada library JS untuk setiap proyek. JavaScript klasik dapat berjalan di semua browser utama dan itu yang Anda butuhkan untuk membangun antarmuka dinamis.
Plugin ini harus berjalan pada semua browser modern dan Anda dapat menyesuaikan sebagian besar darinya meskipun belum paham sempurna tentang JavaScript
Plugin JavaScript Gratis
Headroom.js
Orang-orang di medium mempopulerkan header auto-heading dan sekarang menjadi fitur umum di banyak blog. Plugin Headroom menargetkan navbar situs Anda dan menyembunyikan secara otomatis melewati titik tertentu. Headroom juga membuat navbar muncul kembali setiap kali user kembali halaman
Fitur ini meniru medium dan juga bisa disesuaikan dengan fungsi utama plugin. Cek GitHub untuk dokumentasi dan Anda dapat melihat pratinjau langsung disini.
Drift
Di situs eCommerce, Anda telah melihat dimana Anda membawa foto produk dan mendapatkan tampilan yang diperbesar kesamping. Ini adalah efek yang sangat teknis untuk diciptakan dengan plugin seperti Drift sangat mudah.
Anda bisa melihat beberapa contoh langsung di postingan ini dengan berbagai teknik klik dan efek hover zoom. Anda bisa mengubah gaya animasi, area zoom, dan efek zoom berdasarkan gambar yang berbeda.
Kami sangat merekomendasikan plugin ini kepada siapa saja yang memiliki galery foto web atau toko e-commerce. Dokumentasi sangat rinci dan plugin ini gratis dan terbaik untuk fungsi pembesaran gambar.
baguetteBox.js
lightbox adalah efek populer lainnya untuk gambar pada halaman web. Lightbox umum terjadi pada portofilio dan situs web yang memiliki banyak gambar yang dijejali bersama dalam satu halaman.
Plugin baguetteBox.js gratis membantu Anda membangun efek lightbox yang dapat digunakan kembali dengan jumlah foto yang tidak terbatas. BaguetteBox.js mendukung semua gerakan sentuh/geser untuk pengguna ponsel dan sangat responsif. Dan bahkan mendukung fitur tambahan seperti caption gambar dan efek transisi CSS3.
Ditambah plugin ini free dan open source jadi pasti kami rekomendasikan untuk plugin lightbox JS terbaik
Lory
Plugin lory adalah slider foto berkemampuan sentuh namun tidak menggunakan efek lightbox. Sebagai gantinya, plugin ini memungkinkan Anda menanamkan tayangan slide dengan jumlah slide, lebar atau fixed variable dan menyesuaikannya dengan elemen wadah apapun
Lory sangat mudah diatur dan Anda dapat menyesuaikan opsi swipe dengan JavaScript. Plugin dilaman GitHub banyak contoh source code dan demo langsung yang dapat Anda coba lihat apakah ini sesuai dengan proyek Anda berikutnya.
noUiSlider
HTML5 menambahkan input slider untuk mencatat nilai numerik. Tapi plugin noUiSlider adalah slider JavaScript yang hadir dengan pilihan dan fitur desain khusus yang tidak dapat Anda dapatkan dengan HTML biasa.
Plugin ini super ringan dan bekerja di semua browser utama termasuk perangkat mobile. Slider dapat direposisi secara vertikal atau horizontal sesuai kebutuhan sehingga sangat fleksibel
Jika Anda memerlukan masukan slider, cobalah gunakan versi HTML biasa dan gunakan plugin ini sebagai gantinya. Ini adalah plugin sederhana untuk setup dengan manfaatnya luar biasa.
Tingle
Modal windows semuanya dari pengambilan e-mail ke notifikasi antarmuka. Plugin Tingle.js membawa jendela modal ke tingkat berikutnya dengan transisi CSS dasar dan opsi JS API untuk kustomisasi
Anda dapat melihat demo langsung disini dengan berbagai fitur termasuk tombol dan video tersemat. Dengan opsi JS Anda dapat menerapkan kelas CSS khusus, melampirkan konten internal, dan bahkan membangun fungsi panggilan setelah modal dibuka dan ditutup.
Tingle adalah plugin modal vanilla JS open source terbaik untuk proyek web manapun. Mudah untuk setup, mudah untuk menyesuaikan, dan bekerja seperti yang Anda harapkan.
Plyr
Default player terasa seperti interface premium dengan teks tertutup, mode full screen, shortcut tombol spasi untuk play/pause media.
Anda dapat menyematkan video HTML5 asli atau video eksternal dari YouTube / Vime. Dan library Plyr bahkan dilengkapi dengan pemutar audio khusus untuk estetika yang serupa tanpa panel video
Plyr tak dapat disangkal bahwa ia merupakan plugin pemutar video/audio terbaik yang berjalan di HTML5 dan vanilla JS. Plyr benar-benar gratis dan super mudah disesuaikan dengan sedikit usaha.
Jump.js
Kebanyakan developer tahu bagaimana kode hyperlink yang membantu user melompat di sekitar halaman. Tapi banyak devs ingin menulis library scroll sendiri? Jawabannya adalah “tidak ada” atau setidaknya tidak ada yang memiliki pekerjaan menumpuk
Itu sebabnya Jump.js adalah plugin yang sangat berharga. Anda tinggal memasukannya saja dan menambahkan pemanggilan fungsi ke tautan yang memerlukan scrolling. Anda akan membangunnya dalam waktu singkat dengan dasarnya tidak ada perawatan apapun.
Select.js
HTML native select menu berfungsi dengan baik namun bukan unsur tercantik di page. Tapi itu semua bisa berubah berkat select.js, sebuah plugin JS gratis yang dibuat oleh tom HubSpot.
Dengan plugin ini Anda bisa mengkustomisasi semua menu select dengan estetika desain minimalis. Ada juga demo live jika Anda ingin melihatnya beraksi.
Select tidak menambahkan fungsionalitas tambahan jadi ini hanya plugin yang dibuat untuk memperindah halaman Anda. Namun ringan, mudah diatur, dan lebih mudah disesuaikan dengan tema CSS Anda sendiri
Flatpickr
Setiap kali saya memasukan tanggal kedalam form, kami selalu memilih untuk menggunakan datepicker kalender. Ini hanya menghemat waktu dan membuat proses lebih cepat, tapi hanya jika datepicker dibangun dengan baik
Setelah menggali banyak plugin akhirnya menemukan Flatpickr. Flatpickr adalah datepicker gratis dengan desain flat sederhana yang cocok dengan halaman web manapun
Flatpickr bisa bekerja pada jQuery tapi juga dimaksudkan untuk menjadi plugin JS vanilla. Simak demo live untuk melihatnya dalam tindakan, dan jika Anda menyukai bagaimana rasanya merasa bebas untuk menambahkannya ke dalam proyek web berikutnya.
Dropzone
Dengan fitur browser yang terus berkembang, pengguna internet selalu mengharapkan fitur yang lebih dinamis di setiap situs web. Drag-and-drop adalah perilaku umum dalam bentuk upload dan meskupin ini adalah fitur populer, ini juga sulit dibangun dari awal
Beruntung ada Dropzone, library JavaScript drag and drog gratis untuk mengupload apapun di web. Laman GitHub penuh dengan dokumentasi namun Anda bisa menemukan lebih banyak info dan demo langsung di situs web resmi Dropzone
Dropzone bekerja diluar kotak dengan sangat sedikit penyesuaian yang dibutuhkan. Tapi Anda selalu bisa memperluas library ini dengan kode JS Anda sendiri yang membuat Dropzone lebih dari sekedar plugin, ini benar-benar library JS lengkap untuk fungsi drag and drop
Holmes
Diharapkan sebagian besar pengguna mengenal CTRL + F (atau CMD + F) untuk pencarian teks dalam browser. Tapi dengan fitur penyortiran dinamis Anda bisa memberikan pengalaman pengguna yang lebih baik dengan plugin seperti Holmes.
Plugin JS gratis ini memngkinkan Anda menambahkan pencarian khusus ke halaman dengan filter penyortiran otomatis yang membatasi elemen halaman tertentu. Ini bisa berupa produk dalam chart, atau posting blog atau bahkan foto berdasarkan tag
Anda bisa menyortir apapun dengan Holmes asalkan memiliki kriteria keyword dan pencarian untuk di saring.
Bideo.js
Banyak sekali plugin video fullscreen yang tak terhitung jumlahnya dan kebanyakan memerlukan library JS. Pilihan JS murni terbaik adalah Bideo.js yang menggunakan JavaScript murni untuk fitur embed.
Bideo.js adalah salah satu plugin paling sederhana untuk ditambahkan ke situs Anda dan ini juga merupakan library yang cukup baru. Lihat halaman demo untuk mempelajari lebih lanjut dan jelajahi source kode jika Anda memerlukan template untuk disalin
Validate.js
Validasi bentuk dinamis menghemat waktu bagi pengguna dan menghemat daya pemrosesan server pada backend. Tapi kebanyakan plugin validasi berjalan di library seperti jQuery atau Zepto.
Untungnya ada pilihan pure JS yang tersedia dan salah satu yang terbaik adalah Validate.js. Validate.js berjalan disemua browser modern termasuk IE6 yang luar biasa untuk era sekarnag. Anda dapat menyesuaikan semua pesan respons dan membuat aturan yang telah ditentukan untuk setiap field form
Dan plugin secara otomatis menghentikan form apapun sampai semua validasi telah selesai. Kami tidak bisa memikirkan plugin gratis lainnya yang menawarkan banyak fitur dengan kurva belajar sederhana seperti itu.
bLazy
lazy loading mengurangi request HTTP dan meningkatkan kecepatan load page untuk pengunjung baru. Namun tidak selalu menjadi fitur termudah untuk diterapkan disitus Anda.
Tapi dengan plugin seperti bLazy, prosesnya jauh lebih mudah. Anda dapat load lazy semuanya dari gambar ke tayangan slide, video HTML5, dan iframe. Plugin ini berjalan di IE7+ dan semua browser utama lainnya.
Setup cukup mudah dan pada halaman demo Anda bisa melihatnya dalam action + copy source kode untuk website Anda sendiri.
