CSS ile Otomatik Değişen Arka Plan Yapmak
CSS ile otomatik değişen arka plan yapmak için üç adet dosyaya ihtiyacımız var.
- images klasörü
- index.html dosyası
- style.css dosyası
İmages Klasör İçeriği
İmages klasörünün içine değişmesini istediğimiz resimleri koyacağız. Bu resimleri yeri geldikçe kodlar ile çağırarak kullanacağız.
Not: Resimlerin isimlerini kısa tutmanızı tavsiye ederiz. Çünkü böylelikle hem kod yazarken fazla uğraşmazsınız hem de site hızınız bir nebze olsun artar. Örnek olarak isimlerini “1” ve “2” gibi koyabilirsiniz.
index.html Dosya İçeriği
· Basit HTML Sayfa Örneği
meta charset = ” utf-8 ” >
· CSS Dosya Çağırma Kodu
style.css Dosya İçeriği
Css ile otomatik değişen arka plan resimleri yapmak için en önemli dosya style.css dosyasıdır. Bu dosyayı özel olarak ve adımlar halinde hazırlayacağız.
1.Adım
Body elementi ile gövdeyi oluşturacağız.
Body Kod İçeriği
body{
}
2.Adım
Css dosyamız ile images klasörü arasında bağlantı kuracağız ki yaptığımız kodlarda resimler bulunsun.
CSS Dosyasından Bir Klasör Nasıl Çağırılır?
Öncelikle dosyamıza arka plan kodu ekleyeceğiz ve sonra “url” kodu ile adresimizi girerek dosyamızı çağıracağız.
Arka Plan Kod İçeriği
bacground:url(“images/1.jpg”);
Url adresi style.css dosyasının bulunduğu klasörü baz alarakk çalışır. İmages klasörü ile style.css dosyasıda bir klasörde bulunduğu için direk adrese “images” diye başlıyoruz ve sonra “/” sembolünü ekleyerek resmin ismini uzantısı ile beraber yazıyoruz.
Not: “/” işareti her zaman dosyanın içine doğru gittiğinizi ifade eder.
3. Adım
Son adım olarak vereceğimiz css kod ile otomatik olarak değişen arka plan resimleri için adres ve zamanlamayı ayarlayacağız.
body{
bacground:url(“images/1.jpg”);
animation:image 10s infinite alternate;
-webkit-animation:image 10s infinite alternate;
-moz- animation:image 10s infinite alternate;
}
@keyframes image {
0%{
bacground:url(“images/1.jpg”);
}
25%{
bacground:url(“images/2.jpg”);
}
50%{
bacground:url(“images/3.jpg”);
}
75%{
bacground:url(“images/4.jpg”);
}
100%{
bacground:url(“images/5.jpg”);
}
}
- Kalın olarak yazdığımız “10sn” yerlerini değiştirerek zamanlamayı hazırlayabilirsiniz.
· “images/5.jpg” yerlerinden ise resim isimlerini yazarak hangi resmin hangi sırada çıkacağını ayarlayabilirsiniz.