CSS3

CSS3 ile Animasyonlu Fotoğraf Geçişi

HTML5 ve CSS3 teknolojilerinin gelişimi ile beraber önceleri JavaScript desteği olmadan yanından bile geçemediğimiz tasarımları artık kolayca hazırlayabiliyoruz. Bilhassa 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 bir tek CSS3’ün animation özelliğiyle bir fotoğraf geçişi tasarımı hazırlyacağız.

ÖRNEĞİ GÖRÜNTÜLE

CSS3 ile görsel geçişi iyi mi hazırlanmış olur?

Bu tasarımı hazırlarken HTML5’in section, figure ve figcaption tanımlamalarını kullanacağız. Sonrasında figure elemanlarının içine 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şlamış olalım.

HTML Kodları

Bildiğiniz şeklinde figcaption görsellerle ilgili data metinlerini gösterdiğimiz bir tarif. 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>Yiyecek</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 şeklinde tanımları ekleyelim.


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


Animasyonun üstüne gelindiğinde durmasını sağlayalım. Bu CSS tanımı Chrome 4.0, IE10, Firefox 16, Safari 4, Opera 15 ve üstü versiyonlarda iş yapmaktadı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 üstlerine gelindiğinde görünür olsunlar.


section.image-slider > figure > figcaptionvisibility:hidden; color:tomato
section.image-slider > figure:hover figcaptionvisibility:visible

Görsel sayımız kadar delay, şu demek oluyor ki 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 adlı 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 kolay fakat şık görsel sunumlarıyla ziyaretçilerinizi etkileyebilirsiniz. Hatta resimlere bağlantı vererek ufak çaplı bir galeri bile hazırlayabilirsiniz.

İyi emekler.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu

Reklam engelleyici kullandığınız görülüyor

HAKANSEYHAN.com reklamlarla desteklenen bir sitedir. Sitemizde gezintiye devam etmek için lütfen reklam engelleyiciyi kapatın.