Buradasın
Web Sayfasının Arka Planında Değişen Resimleri Yapma Eğitimi
youtube.com/watch?v=5MGzckEC_icYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, izleyicilere web sayfasının arka planında değişen resimleri nasıl yapabileceklerini adım adım göstermektedir.
- Videoda, web sayfasının arka planında sabah, akşamüstü ve gece için farklı fotoğrafların geçiş efekti ile nasıl kullanılacağı anlatılmaktadır. Eğitmen, "background-image" yerine farklı bir yöntem kullanarak, CSS animasyonları ve keyframe'ler ile bu geçiş efektini nasıl oluşturacağını göstermektedir. Ayrıca, mobil uyumluluğu sağlamak için "cover" özelliği ve "position: absolute" ile arka planın sabitlenmesi gibi teknik detaylar da paylaşılmaktadır.
- 00:26Web Sayfasında Arka Plan Resimlerinin Değişimi
- Bu derste web sayfasının arka planında değişen resimlerin nasıl yapılacağı gösterilecek.
- Gündüz ve gece olan aynı resimler gösterilecek, ancak farklı resimler de geçiş olarak kullanılabilir.
- Arka plan resmini değiştirken "background-image" kullanılmayacak çünkü tarayıcılar buna bir atlama yapıyor.
- 01:09HTML ve CSS Kodlarının Hazırlanması
- Orta alana bir div ekleniyor, buraya komple bir flex ya da grid tasarım web sayfası kodları gelebilir.
- Üç farklı resim (sabah, akşamüstü ve gece) kullanılıyor, beş resim de kullanılabilir.
- Body'deki margin ve padding değerleri kaldırılıyor.
- 02:12CSS Animasyonunun Oluşturulması
- Sabah divi position absolute olarak arka plana oturtulup, z-index değeri eksi değer olarak ayarlanıyor.
- Üç farklı geçiş efekti kullanılıyor ve sırasıyla sabah, akşamüstü ve gece resimleri görünecek.
- Resimler orta alana sabitleniyor ve "cover" özelliği sayesinde mobil uyumluluğu sağlanıyor.
- 03:39Animasyon Kodlarının Yazılması
- Animasyon için "animation" özelliği kullanılıyor ve animasyon ismi "değişik" olarak belirleniyor.
- Animasyon 10 saniye sürecek, "ease-in-out" geçiş efekti uygulanacak ve sonsuz olarak devam edecek.
- Opacity özelliği kullanılarak resimlerin görünme süreleri ayarlanıyor: sabah 3 saniye, akşamüstü 3 saniye, gece 4 saniye görünüyor.
- 08:08Animasyonun Tamamlanması
- Akşamüstü ve gece için de benzer animasyonlar oluşturuluyor.
- Resimlerin geçişleri 10 saniyeliğinde ayarlanıyor: sabah 0-30%, akşamüstü 30-60%, gece 60-100%.
- Gece için ek bir div ekleniyor ve web sayfası için gerekli CSS kodları oluşturuluyor.
- 11:50Sonuç
- Bu yöntemle CSS ile kolayca web sayfası arka planı oluşturulabilir.
- Z-index değeri eklenirse, arka plan resimleri üzerinde bir web sayfası kodları da eklenebilir.