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.