Buat Transisi Gradien Cantik dengan Granim.js
Desain web penuh dengan keindahan dan desain antarmuka yang menyenangkan. Beberapa fitur fungsional sementara yang lain hanya untuk pertunjukan. Transisi gradien adalah semata-mata untuk pertunjukan tapi mereka mengepak cukup!
Dengan Granim.js, kamu bisa membangun transisi gradien penuh warna khusus yang terlihat halus dan cocok dengan situs web mana pun.
Kamu dapat menemukan banyak contoh khusus pada halaman contoh utama dengan banyak gaya berbeda dari transisi sederhana ke animasi yang lebih kompleks menggunakan gambar latar belakang.
Granim adalah satu-satunya perpustakaan JS yang saya tahu menangani transisi gradien. Ini adalah pertanyaan yang selalu saya tanyakan dan tidak pernah benar-benar menemukan jawaban yang bagus. Granim adalah solusi sempurna dan ini dibangun di atas vanilla JavaScript, sehingga bisa berjalan bersama jQuery atau perpustakaan JS lainnya.
Hanya jatuhkan granim.js file ke halaman Anda untuk memulai. Anda dapat mengunduh salinan dari GitHub atau menyimpannya dari CDN langsung.
Ini dia contoh kode dasar dari repo GitHub:
Hal-hal bisa menjadi jauh lebih rumit daripada ini sehingga Anda benar-benar harus melakukannya gali contoh-contohnya untuk belajar lebih banyak. Anda akan menemukannya cuplikan kode di bawah setiap contoh jadi kamu bisa buat transisi gradien untuk latar belakang gambar dan bahkan topeng gambar.
Masker gambar dapat digunakan untuk logo, misalnya gambar PNG, yang disembunyikan di belakang gradien. Ini memungkinkan Anda membuat logo beranimasi JS dimana gradien transisi perlahan di seluruh teks.
Perhatikan contoh ini banyak kode JS / CSS jadi itu bukan implementasi yang sederhana.
Tetapi semakin Anda berlatih dengan Granim, semakin mudah untuk mengatur dan menyesuaikan. Dan dengan ini menjadi satu-satunya pustaka transisi gradien sejati online, ini adalah solusi terbaik mutlak untuk proyek apa pun.
Perpustakaan masih diperbarui secara semi-jadi sehingga Anda dapat memeriksa tab masalah untuk info lebih lanjut.
Nya perpustakaan yang cukup kecil jadi tidak ada banyak hal yang salah atau perlu diperbarui. Inilah yang membuat Granim.js solusi yang andal untuk semua situs kecil atau besar.
Untuk unduh salinan kunjungi halaman rilis di GitHub atau ambil salinan .js file langsung dari cdnjs. Dan untuk lihat sumber pada contoh langsung intip demo CodePen yang dibuat oleh Jonathan Schneider ini.
