Philter.js - CSS Filtrelerini Kullanarak Ücretsiz Resim Değiştirme Kütüphanesi
Instagram en popüler fotoğraf ağı olarak bilinir. Günde 52 milyondan fazla fotoğraf ve bunların çoğunu idare ediyor filtreleri dahil et görüntüleri anında değiştiren.
Bu aynı zamanda CSS filtrelerini kullanarak da mümkündür. doğrudan tarayıcıda uygulayın. Bu özel filtre özellikleri, birçok tarayıcıda geniş bir desteğe sahiptir ve harika görünüyorlar.
İle Philter JavaScript eklentisi, Zaman kazanmak ve kodunuzu HTML’ye taşımak için bu işlemi ölçeklendirebilirsiniz. dinamik filtre efektleri.
Bu eklentiyi kullanarak kazanırsınız Resimleriniz üzerinde çok daha fazla kontrol. Bu şekilde, tek tek görüntülere hangi filtreleri uygulamak istediğinizi ve belirli filtrelerin üzerine gitmek gibi kullanıcı davranışlarına göre değişmesi gerekip gerekmediğini seçebilirsiniz.
CSS animasyonlu geçişleri destekler Philter bu süreci gerçekten kolaylaştırıyor. Philter'i ana sayfadan veya GitHub deposundan indirebilirsiniz. Web sayfanıza eklendiğinde, sadece başlatma kodunu ekle ve bırak gitsin.
İşte bir örnek pasajı GitHub deposundan:
Varsayılan olarak geçişleri ve ekstra veri niteliklerini ayarlama HTML’de ekleyebileceğiniz url parametresi, Philter'in filtreleme işleminde kullanılan özel SVG dosyalarını araması gereken yolu tanımlar..
Bu ekstra filtreler kitaplık ile paketlenmiş, bu yüzden onları hiç düzenlemenize gerek yok. Ancak, onları etrafınızda taşıyabilir veya geçerli dosyanızdan farklı bir dizin yapısına yerleştirebilirsiniz, yani bu ayar değişmesi gerekebilir.
Şimdi, sadece özel filtreler ekle HTML’nize doğru
İşte bir basit örnek:
Bulabilirsiniz tüm filtrelerin tam listesi GitHub’ta bir eksiksiz kurulum kılavuzu ve diğer birçok kod örneği.
Philter, çevresindeki en havalı ücretsiz eklentilerden biri ve modern CSS'nin sınırlarını zorluyor. Sen bile kendi filtrelerini tasarla kod temeli içinde kazmak ve etrafı incelemek için istekli iseniz.
Başlamak için basit bir yer, Philter ana sayfasını ziyaret edin ve bir kopyasını indirin. En kısa sürede çalışmaya başlayabilir.
