CSS3 ile Animasyonlu Resim Geçişi

HTML5 ve CSS3 teknolojilerinin gelişimi ile birlikte önceleri JavaScript desteği olmadan yanından bile geçemediğimiz tasarımları artık kolayca hazırlayabiliyoruz. Özellikle CSS3‘ün animatif tanımları, tasarımın web tarafında slider, galeri ve türevi görsel bazlı öğeleri popüler kılmakta.

Bu yazımızda sadece CSS3’ün animation özelliğiyle bir resim geçişi tasarımı hazırlyacağız.

ÖRNEĞİ GÖRÜNTÜLE

CSS3 ile görsel geçişi nasıl hazırlanır?

Bu tasarımı hazırlarken HTML5’in section, figure ve figcaption tanımlamalarını kullanacağız. Daha sonra figure elemanlarının içerisine yerleştirdiğimiz görselleri belirli bir hızda döndürüp, CSS3’ün son yeniliklerinden olan animation-play-state özelliğiyle durduracağız.

HTML kodlarımız ile başlayalım.

HTML Kodları

Bildiğiniz gibi figcaption görsellerle ilgili bilgi metinlerini gösterdiğimiz bir tanım. Aşağıda eklediğimiz figcaption tanımlarını CSS ile başlangıçta görünmez kılacağız.

<section class="image-slider">
  <figure>
    <img src="http://lorempixel.com/200/200/sports">
    <figcaption>Spor</figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/200/200/cats">
    <figcaption>Kediler</figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/200/200/people">
    <figcaption>İnsanlar</figcaption>
  </figure>
  <figure>
    <img src="http://lorempixel.com/200/200/food">
    <figcaption>Yemek</figcaption>
  </figure>
</section>

Sıra geldi CSS kodlarımıza.

CSS Kodları

İlk olarak Section’a atadığımız class CSS’in selectorleriyle yakalayalım ve detayına görsel boyutu, margin, padding, list-style gibi tanımları ekleyelim.

section.image-slider {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 200px;
  display: inline-block;
  position: relative;
}

Animasyonun üzerine gelindiğinde durmasını sağlayalım. Bu CSS tanımı Chrome 4.0, IE10, Firefox 16, Safari 4, Opera 15 ve üstü versiyonlarda çalışmaktadır. Eski tarayıcılarda animasyon durmaksızın ilerleyecektir.

section.image-slider:hover figure{
-webkit-animation-play-state:paused;
}

Şimdi figure öğelerimize animasyon tanımımızı yapalım.

section.image-slider figure {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: gecisler 6s ease both infinite;
}

Görsel tanımlamalarımız üzerlerine gelindiğinde görünür olsunlar.

section.image-slider > figure > figcaption{visibility:hidden; color:tomato}
section.image-slider > figure:hover figcaption{visibility:visible}

Görsel sayımız kadar delay, yani gecikme tanımlayalım. Yeni görseller eklerseniz bu alana da yeni satırlar eklemelisiniz. Ek olarak IMG elemanlarımızı stilize edelim.

section.image-slider figure:nth-child(2) {-webkit-animation-delay: 2s;}
section.image-slider figure:nth-child(3) {-webkit-animation-delay: 4s;}
section.image-slider figure:nth-child(4) {-webkit-animation-delay: 6s;}

section.image-slider > figure > img {
  border-radius: 50%;
  border: 2px solid white;
}

Son olarak gecisler isimli animasyonumuzu hazırlayalım.

@-webkit-keyframes gecisler {
  0%, 10% {
    opacity: 1;
    transform: none;
    z-index: 10;
  }
  25%, 35% {
    opacity: 0.2;
    transform: translate3d(-170px, 0, 0) scale(0.6);
  }
  50% {
    opacity: 0;
    transform: translate3d(-190px, 0, 0) scale(0.6);
  }
  60% {
    opacity: 0;
    transform: translate3d(190px, 0, 0) scale(0.6);
  }
  75%, 85% {
    opacity: 0.2;
    transform: translate3d(170px, 0, 0) scale(0.6);
  }
}

Bu kadar.

Kapanış

Bu tip basit ama şık görsel sunumlarıyla ziyaretçilerinizi etkileyebilirsiniz. Hatta resimlere link vererek küçük çaplı bir galeri bile hazırlayabilirsiniz.

İyi çalışmalar.