JavaScript gerektirmek için kullanılan resimlerin üzerine gelmeyi içeren süslü animasyonlar. Daha fazla yok! CSS, küçük resimlerinizi ve galerilerinizi canlandırmak için burada.
Görüntü üzerine gelme efektleri, web sitenize ekstra bir cila düzeyi ekleyebilir. Pürüzsüz bir etki yaratarak resim galerileri veya döngülerde gezinmeyi daha keyifli hale getirirler. En iyi yanı, bu efektleri JavaScript kullanmadan yalnızca CSS ile oluşturabilmenizdir.
Resimlerinizde farklı animasyon stilleri oluşturabilirsiniz. Bunlar, arka planı bulanıklaştırma veya yakınlaştırma, metinde solma veya kaydırma ve arka plan rengini değiştirmeyi içerir.
Görseller için HTML Oluşturma
oluşturarak başlayın index.html Bilgisayarınızdaki boş bir klasörün içindeki dosyayı açın, ardından dosyayı bir metin düzenleyiciyle açın. Dosyanın içinde, HTML iskeletini oluşturun ve açılış gövdesi ile kapanış gövdesi etiketlerinin içine aşağıdaki işaretlemeyi ekleyin:
<divsınıf="Kafes">
<divsınıf="görüntü sarmalayıcı">
<imgsınıf="bulanıklık"kaynak=" https://picsum.photos/500?random=1"alternatif=""><divsınıf="içerik soluyor">
Lorem ipsum dolor sit amet consectetur a disipisicing elit. Soluta reklamı
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divsınıf="görüntü sarmalayıcı">
<imgsınıf="yakınlaştırma bulanıklığı"kaynak=" https://picsum.photos/500?random=2"alternatif=""><divsınıf="içerik soluyor">
Lorem ipsum dolor sit amet consectetur a disipisicing elit. Soluta reklamı
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divsınıf="görüntü sarmalayıcı">
<imgsınıf="bulanıklık"kaynak=" https://picsum.photos/500?random=3"alternatif=""><divsınıf="içerik sola kaydır">
Lorem ipsum dolor sit amet consectetur a disipisicing elit. Soluta reklamı
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divsınıf="görüntü sarmalayıcı">
<imgsınıf="gri"kaynak=" https://picsum.photos/500?random=3"alternatif="">
<divsınıf="içerik sola kaydır">
Lorem ipsum dolor sit amet consectetur a disipisicing elit. Soluta reklamı
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Bu, dört görüntü sarmalayıcıya sahip bir ızgara kabıdır. ile div öğeleri görüntü sarmalayıcı class, görüntü ve ona karşılık gelen metin için bir sarmalayıcı görevi görür. Her bölümün görüntüsü ve içeriği, kendisine eklenmiş benzersiz bir sınıf kümesine sahiptir.
Stil sayfasının içinde, bu öğeleri sınıf adlarına göre hedefleyin ve çeşitli stil ve animasyon efektlerini uygulayın. Metin varsayılan olarak gösterilmeyecektir; bunu yalnızca resim sarmalayıcının üzerine getirdiğinizde gösterirsiniz ve resim bu süreçte farklı etkilere maruz kalır.
Temel CSS Ekleme
Artık HTML'yi oluşturduğunuza göre, onu CSS ile biçimlendirme zamanı. Oluşturmak stil.css HTML dosyanızdan bu stil sayfasına dosya ve bağlantı bölüm:
<bağlantırel="stil sayfası"href="stil.css">senin içinde stil.css dosya, yapmanız gereken ilk şey, gövdedeki kenar boşluğunu sıfıra sıfırlamak ve bir miktar alt kenar boşluğu ayarlamaktır:
vücut {
marj: 0;
kenar boşluğu: 20rem;
}Ardından, en dıştaki kabı bir Öğeleri iki boyutlu olarak düzenlemek için kullanabileceğiniz CSS ızgarası. Aşağıdaki kod, sığabilecek sayıda sütun veya satır içeren bir ızgara oluşturur. Her sütunun minimum boyutu 300 pikseldir ve maksimum boyut, kabın 1 kesridir:
.Kafes {
görüntülemek: Kafes;
ızgara-şablon-sütunları: tekrarlamak(otomatik sığdırma, en az en çok(300piksel, 1Fr));
}Metni kabına göre konumlandırmak istediğiniz için, konumu görüntü sarmalayıcıya göre ayarlamanız gerekir:
.resim sarmalayıcı {
konum: akraba;
taşma: gizlenmiş;
}
Bir sonraki adım, görüntüyü biçimlendirmektir. Görüntüyü bir blok öğesi olarak görüntüleyin, tüm kabın genişliğini kaplayın ve kabının ortasına sığacak şekilde yerleştirin:
.resim sarmalayıcı > img {
görüntülemek: engellemek;
Genişlik: 100%;
en-boy oranı: 1 / 1;
nesneye uygun: kapak;
nesne konumu: merkez;
}
Metne gelince, onu ortalayın ve şeffaf, açık gri bir arka plan rengi verin:
.resim sarmalayıcı > .içerik {
konum: mutlak;
ek: 0;
yazı Boyutu: 2rem;
dolgu malzemesi: 1rem;
arka plan: rgba(255, 255, 255, .4);
görüntülemek: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
}
CSS dosyasını kaydedin ve açın index.html tarayıcınızda. Aşağıdaki resimdekine benzer bir sayfa bulmalısınız.
Görüntüler ve Metinler Üzerindeki Geçişi Ayarlama
Artık görüntülere temel stilleri uyguladığınıza göre, bir sonraki adım bunlara biraz animasyon eklemektir. Hem resimlere hem de karşılık gelen metne bir geçiş ekleyerek başlayın:
.resim sarmalayıcı > img,
.resim sarmalayıcı > .içerik {
geçiş: 200Hanımkolay giriş;
}
Bu, tüm geçiş efektlerinin (yani, karartma, yakınlaştırma ve bulanıklaştırma) 200 milisaniye süreceği ve aynı zamanlama eğrisine sahip olacağı anlamına gelir.
Fade-In ve Blur Animasyonu
İlk animasyon stili metinde kayboluyor. Belirli bir görüntü sarmalayıcının üzerine geldiğinizde, solmak class, kendisine uygulanan bu efekte (fade-in ve fade-out animasyonu) sahip olacaktır. Bunu, opaklığı sıfıra ayarlayarak ve fare belirli bir görüntü sarmalayıcının üzerine geldiğinde bunu bir olarak değiştirerek elde edersiniz:
.resim sarmalayıcı > .içerik.solmak {
opaklık: 0;
}
.resim sarmalayıcı:vurgulu > .içerik.solmak {
opaklık: 1;
}
Dosyayı kaydeder ve tarayıcınızı kontrol ederseniz, kararan animasyonun etkin olduğunu görürsünüz. Ancak metnin okunmasının biraz zor olduğunu da fark edebilirsiniz (resim sadeyse ve çok fazla kontrast varsa). Tüm görüntülerin de bir sınıf adına sahip olduğunu hatırlayın. bulanıklık. Bu, resimlerle metin arasına çok ihtiyaç duyulan bir kontrast eklemek için görüntüleri bulanıklaştırmak içindir:
görüntü sarmalayıcı:vurgulu > img.bulanıklık {
filtre: bulanıklık(5piksel)
}
Şimdi görüntünün üzerine geldiğinizde, görüntünün bulanıklaşacağını görebilirsiniz. Görüntülerde bulanıklığı daha belirgin hale getirmek için piksel değerini artırabilir, böylece bulanıklık ile metin arasına daha fazla kontrast ekleyebilirsiniz.
Başka Efektler Ekleme
Diğer efektler, metni soldan kaydırmak, görüntüyü yakınlaştırmak ve görüntüye gri tonlama eklemektir. İşte üç etkiyi de elde etmek için kod:
.resim sarmalayıcı > .içerik.sola kaydır {
dönüştürmek: çeviriX(100%)
}.resim sarmalayıcı:vurgulu > .içerik.sola kaydır {
dönüştürmek: çeviriX(0%)
}.resim sarmalayıcı:vurgulu > img.gri {
filtre: gri tonlama(1)
}.resim sarmalayıcı:vurgulu > img.bulanıklık {
filtre: bulanıklık(5piksel)
}
.resim sarmalayıcı:vurgulu > img.yakınlaştırma {
dönüştürmek: ölçek(1.1)
}
Dosyayı kaydedin, ardından tarayıcınıza gidin ve her görüntünün üzerine gelin. Farklı etkileri iş başında görmelisiniz.
İçeri kaydırma efektlerini tamamlamak için, her biri bir resim ve metin içeren üç tane daha resim sarmalayıcı oluşturabilirsiniz. Her metin parçasının sınıf adı olacaktır. yukarı kaydır, kayıp düşmek, veya hafif sağ. O zaman uygun değeri iletirsiniz piksel, em veya rem, içinde dönüşüm() üç etkiyi de yaratma işlevi.
CSS Izgarası ve Flexbox
CSS Grid ve Flexbox, web siteniz için harika düzenler oluşturmanıza izin veren iki özelliktir. Neredeyse istediğiniz her düzeni kolaylıkla oluşturabilir ve satırları ve sütunları zevkinize göre özelleştirebilirsiniz. Sütunlar da varsayılan olarak duyarlı olacaktır. Birini diğerinin yerine ne zaman kullanacağınızı öğrenmek, en iyi yüzde bir CSS geliştiricisi olmanıza yardımcı olacaktır.
