Granim.js ile Güzel Gradyan Geçişleri Yaratın

Web tasarımı güzel ve hoş bir arayüz tasarımı ile doludur. Bazı özellikler işlevsel, diğerleri ise sadece gösterim amaçlı. Gradyan geçişleri Hangi sadece gösteri için ama oldukça yumruk attılar!

İle Granim.js, inşa edebilirsin özel tam renkli gradyan geçişleri herhangi bir web sitesi ile pürüzsüz ve güzel gözüken.

Bulabilirsin bir sürü özel örnek Ana örnekler sayfasında, basit geçişlerden daha karmaşık animasyonlara, arkaplan resimlerini kullanarak birçok farklı stil.

Granim tanıdığım tek JS kütüphanesi. gradyan geçişleriyle mücadele. Bu her zaman merak ettiğim ve gerçekten harika bir cevap bulamadığım bir sorudur. Granim mükemmel bir çözüm ve bu vanilya JavaScript üzerine inşa, bu yüzden jQuery veya başka bir JS kütüphanesinin yanında çalışabilir.

Sadece düşür granim.js sayfanıza dosya başlamak. GitHub’tan bir kopya indirebilir veya canlı bir CDN’den bir tane.

İşte temel bir kod örneği GitHub deposundan:

İşler bundan çok daha karmaşık olabilir, bu yüzden gerçekten yapmalısın örneklere bakmak daha fazla öğrenmek için. Bulacaksın her örneğin altındaki kod parçacıkları Böylece yapabilirsiniz gradyan geçişleri oluştur görüntü arka planları ve hatta görüntü maskeleri için.

Görüntü maskeleri bir logo için, örneğin bir degradenin arkasına gizlenmiş bir PNG resmi olarak kullanılabilir. Bu, oluşturmanıza olanak sağlar JS animasyonlu bir logo gradyan nerede Metin boyunca yavaşça geçişler.

Bu örneğin aldığını unutmayın çok JS / CSS kodu bu yüzden basit bir uygulama değil.

Ancak Granim ile ne kadar çok pratik yaparsanız, kurulum ve kişiselleştirme de o kadar kolay olacaktır. Bu da çevrimiçi gerçek gradyan geçiş kütüphanesi olmanın yanında, herhangi bir proje için mutlak en iyi çözümdür..

Kitaplık yarı sık güncellenmeye devam ediyor, böylece daha fazla bilgi için sorunlar sekmesini kontrol edebilirsiniz..

Onun oldukça küçük bir kütüphane bu yüzden yanlış giden ya da güncellenmesi gereken çok fazla şey yok. Granim.js'i küçük veya büyük tüm siteler için güvenilir bir çözüm kılan şey budur.

için bir kopyasını indir GitHub’daki sürümler sayfasını ziyaret edin veya bir kopyasını alın. .js doğrudan cdnjs'den dosya. Ve için kaynağı canlı bir örnekte görüntüleyin Jonathan Schneider tarafından oluşturulan bu CodePen demosuna bir göz atın.