Buradasın

CSS'de Animasyonlu Dalga Efekti Oluşturma Eğitimi

Yapay zekadan makale özeti

Bu video, bir eğitim içeriği olup, izleyicilere CSS kullanarak animasyonlu dalga efekti oluşturma sürecini adım adım göstermektedir.
Video, Photoshop programında dalga şekli çizimi ile başlayıp, bu şeklin SVG formatında kaydedilmesi, ardından HTML ve CSS ile animasyonlu dalga efekti oluşturma sürecini kapsamaktadır. Eğitmen, önce Photoshop'ta dalga şekli çizimi yaparak başlıyor, ardından HTML'de bir div oluşturuyor ve CSS ile bu div'e before ve after pseudo-elementleri ekleyerek, keyframes kullanarak dalga efektini animasyonlu hale getiriyor. Video, basit bir dalga efekti oluşturma sürecini detaylı olarak göstermektedir.

00:01CSS'de Dalga Efekti Animasyonu: Bu derste CSS'de dalga efektini animasyonlu bir şekilde yapacağız.
Daha önceki derste Adobe Illustrator programıyla çizim yapılmış ve SVG olarak alınmıştı, bu sefer Photoshop'ta çizim yapılacak.
00:29Photoshop'ta Dalga Çizimi: Photoshop'ta Ctrl+N kısayol tuşu ile 1400 piksel genişliğinde, 300 piksel yüksekliğinde yeni bir döküman oluşturuluyor.
P kısayol tuşu ile Pen Tool seçiliyor ve animasyon için şeklin giriş ve çıkış noktalarının aynı hizada olması gerekiyor.
Çizim tamamlandıktan sonra Fillpad ile boyanıyor, Delete Path ile siliniyor ve arka plan layer görünmez yapılıyor.
02:24Dalga Efektinin HTML'de Kullanımı: Yeni bir div oluşturuluyor ve "wrapper" ismi veriliyor.
Wrapper'a viewport width %100, viewport height %100, position absolute, left bottom ve background-url özellikleri ekleniyor.
Wrapper'ın after'ına aynı eleman ekleniyor ancak opacity değeri 0,40 olarak ayarlanıyor.
05:24Dalga Efektinin Animasyonu: Keyframes özelliği kullanılarak "move" animasyonu oluşturuluyor.
Before elementi için background-position 0, 100 piksel olarak ayarlanıyor ve animation özelliği ile hareketlendiriliyor.
After elementi için "move reverse" animasyonu oluşturuluyor ve 100 pikselden sıfıra doğru hareket etmesi sağlanıyor.