CSS ile Çoklu Arkaplan ve Animasyon

css-car-movementCSS3‘ün geliştirilen background tanımı sayesinde bir öğeye birden fazla arkaplan tanımlıyabiliyoruz. Bu bize özellikle transparan – png ve gif- görseller kullanmamız halinde çok büyük bir oyun sahası yaratıyor. Gelin bu tekniği kullanarak otoyolda ilerleyen bir araç animasyonu oluşturalım.

Bugün sizlerle sıradan bir div elemanına atayacağımız iki arkaplan ile küçük çaplı bir animasyon hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

CSS ile bir öğeye birden fazla arkaplan nasıl eklenir?

İlk olarak yapmamız gereken görselleri temin etmek. Burada önemli faktör özellikle otomobil görseli için transparan destekleyen bir format kullanıyor olmak. Eğer Adobewordpress‘in sizler için hazırladığı görselleri kullanmak isterseniz aşağıdan indirebilirsiniz.

Yol Görseli

css-background-road

Araç Görseli

css-background-car


HTML Kodları

Sıradan bir div bizim için yeterli olacaktır.

<div class="road"></div>

CSS Kodları

Bu kısımda oluşturduğunuz yol görselinin en kısa kenarı genişliği ve uzunluğunda bir kutu oluşturmanızda fayda var. Yukarıdaki örnek resim 310×508 piksel büyüklükte. Dolayısıyla 310×310 boyutundaki bir kutu içerisine bu yol resmini koyabilirim. Araç mı? O zaten yerini otomatik olarak bulacaktır.

.road{
  width:310px;
  height:310px;
  background:url('car.png') no-repeat center 0, url('road.png') no-repeat top center;
  transition:background 1s;
}

Virgül kullanarak gördüğünüz gibi road classına sahip elemana birden fazla background atadık. Sonrasında no-repeat ile arkaplanların tekrar etmesini engelledik, center ile ortaladık, top center ile de en üstten ve ortadan başlayacak hale getirdik. Transition ise animasyon geçişimizin 1 saniyede olmasını sağladı.

Şimdi üzerine gelince oluşacak yapıyı hazırlayalım.

.road:hover{ 
 background:url('car.png') no-repeat center 310px, url('road.png') no-repeat bottom center;
}

Bu sefer 310px tanım yaparak arabanın kadraj dışına çıkmasını sağladık. Yolunda top olan konumunu bottom yaparak hareket etmesini sağladık.

Kapanış

Sadece bu yapıyı kullanarak hareket animasyonları dışında da birçok geçiş efekti hazırlayabilirsiniz. Bu tasarladığımız örnek sadece küçük bir konsept.

Bu da ilginizi çekebilir  Material Design Text Input

İyi çalışmalar.



  • Hangovernor

    Çok eğlenceli olmuş 🙂

  • Hocam bilgi için teşekkürler, size sorum olacakdı;
    bu olayın üzerine gelince değilde otomatik hareket etmesini nasıl sağlayabilirim ?
    Mesela duyuru kodları olur ya sağdan gelir soldan gider sürekli. Bunun gibi ?

    • Animation tanımlarsanız olur. Tipini de infinite yaparsınız. Loop olarak döner.

  • Hasan Ekşi

    Merhaba hıcam sitenizin iletişim kısmında forum iptal olmuş. Bana mail adresimden ulaşırsanız çok sevinirim. Kolay gelsin.