Buat Peralihan Kecerunan Cantik dengan Granim.js
Reka bentuk web penuh dengan reka bentuk antara muka yang cantik dan cantik. Sesetengah ciri berfungsi manakala yang lain hanya untuk persembahan. Peralihan kecerunan adalah semata-mata untuk persembahan tetapi mereka berkemas agak menumbuk!
Dengan Granim.js, anda boleh membina peralihan gradien penuh warna adat yang kelihatan licin dan bersih dengan laman web mana pun.
Awak boleh cari sekumpulan contoh tersuai pada halaman contoh utama dengan banyak gaya yang berbeza dari peralihan mudah ke animasi yang lebih kompleks menggunakan imej latar belakang.
Granim adalah satu-satunya perpustakaan JS yang saya tahu menangani peralihan kecerunan. Ini adalah soalan yang saya selalu tertanya-tanya dan tidak pernah mendapat jawapan yang hebat. Granim adalah penyelesaian yang sempurna dan ia dibina di JavaScript vanila, jadi ia boleh berjalan bersama jQuery atau mana-mana perpustakaan JS yang lain.
Hanya drop the granim.js fail ke dalam halaman anda untuk memulakan. Anda boleh memuat turun salinan dari GitHub atau menjadi tuan rumah dari CDN secara langsung.
Inilah sampel kod asas dari repo GitHub:
Perkara boleh menjadi lebih rumit daripada ini supaya anda benar-benar perlu menggali ke dalam contoh untuk belajar lebih lagi. Anda akan dapati coretan kod di bawah setiap contoh jadi anda boleh mewujudkan peralihan kecerunan untuk latar belakang imej dan juga topeng imej.
Masker imej boleh digunakan untuk logo, contohnya imej PNG, yang tersembunyi di belakang kecerunan. Ini membolehkan anda membuat logo animasi JS di mana kecerunan itu perlahan-lahan peralihan di seluruh teks.
Perhatikan contoh ini banyak daripada kod JS / CSS jadi ia bukan pelaksanaan yang mudah.
Tetapi semakin banyak anda berlatih dengan Granim, lebih mudah ia akan disiapkan dan disesuaikan. Dan dengan ini menjadi satu-satunya perpustakaan peralihan kecerunan yang benar dalam talian, ia adalah penyelesaian terbaik mutlak untuk apa-apa projek.
Perpustakaan masih dikemas kini separuh kerap supaya anda boleh menyemak tab isu untuk maklumat lanjut.
Ia sebuah perpustakaan kecil jadi tidak terlalu banyak perkara yang salah atau perlu dikemas kini. Inilah yang membuat Granim.js penyelesaian yang boleh dipercayai untuk mana-mana tapak kecil atau besar.
Untuk muat turun salinan lawati halaman siaran di GitHub atau ambil salinan .js fail terus dari cdnjs. Dan kepada lihat sumber pada contoh langsung ambil penglihatan di demo CodePen ini yang dibuat oleh Jonathan Schneider.
