Bir tek CSS ile Slider Yapımı

Haftada bir tertipli olarak “Slider yapımı hakkında daha çok mevzu yazın!” şeklinde tehditkar mailler alıyoruz.

Hal bu şekilde olunca oturup çalıştık, sizler için şık ve kolay hazırlanabilir bir slider tasarladık. Bir tek CSS ile çalışan bu slider benzerlerinin aksine yazı ve üstüne erişince durma desteği de sunuyor. Böylece bayağı bir slider için web sayfamıza yüzlerce satır JavaScript yükü bindirmemiş oluyoruz.

Bu makalemizde sizlere CSS3‘ün animation tanımı yardımıyla kusursuz bir slider hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Sitenize Slider Ilave edin

Günümüz web trendlerinden önde gelen sliderlar için yüzlerce alternatif internette gezmekte. Bir tek Adobewordpress olarak biz bile bu mevzuyla ilgili 2 yazı, 1 WordPress eklentisi yazdık. Bu da onların en yenisi.

Kolları sıvayıp kodlarımızı yazmaya başlamış olalım.

CSS Kodları

İlk olarak Adobewordpress Slider olarak isimlendirdiğimiz bu tasarımın dış çerçevesini oluşturalım. 800×330 piksellik bir sunum olacak şu haliyle.

.aw-slider

  width:800px;
  height:330px;
  overflow: hidden;
  position: relative;

Şimdi gösterilecek görsellerin boyutlarını ve yapısını belirleyeyim. Bununla beraber de alt yazı açıklamalarını hazırlayalım.

.resim1, .resim2, .resim3, .resim4, .resim5

  position: absolute;
  width:800px;
  height:330px;


.aw-slider > div > a > span
  position:absolute;
  display:table; 
  background-color:black; 
  color:white; 
  right:0; 
  bottom:0; 
  padding:5px 10px;

Her bir fotoğraf 800px boyutunda olduğundan slideların her biri için +800px’lik bir left vermemiz gerekiyor.

.resim1left: 0;
.resim2left: 800px;
.resim3left: 1600px;
.resim4left: 2400px;
.resim5left: 3200px;

Tüm bu yapıları içinde barındıracak ve animasyonu oluşturacak division öğesini tanımlayalım. Örnekte 5 tane görsel kullandık diye 20 saniyelik bir animasyon oluşturduk. Ek olarak 800×5 piksellik bir görsel sunumumuz olduğundan de bu alanda genişlik değerimiz 3200px olarak ayarlı kalmalı. Animasyonumuzun adı da gecisler.

.aw-slider > div 

  width: 3200px;
  height: 330px;
  left:0px;
  position: absolute;
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-name: gecisler;
  -moz-animation-duration: 20s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-name: gecisler;
  -ms-animation-duration: 20s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-name: gecisler;
  animation-duration: 20s;
  animation-iteration-count:infinite;
  animation-name: gecisler;

Resimlerin üstüne vardığında netlikleri artsın, animasyon ise dursun.

.aw-slider > div  img
  opacity: 0.9;
  filter: alpha(opacity=95);


.aw-slider > div  img:hover
  opacity: 1;
  filter: alpha(opacity=100);


.aw-slider > div:hover
-webkit-animation-play-state:paused;
/* Bu CSS tanımı Chrome 4.0, IE10, Firefox 16, Safari 4, Opera 15 ve üstü versiyonlarda iş koşturmacasındadır*/

Ve son olarak cross browser yapıda gecisler isminde animasyonumuzu tanımlayalım.

@-webkit-keyframes gecisler 

  0% left:0px;
  10% left:0px;
  20% left:-800px;
  30% left:-800px;
  40% left:-1600px;
  50% left:-1600px;
  60% left:-2400px;
  70% left:-2400px;
  80% left:-3200px;
  90% left:-3200px;

@-moz-keyframes gecisler 

  0% left:0px;
  10% left:0px;
  20% left:-800px;
  30% left:-800px;
  40% left:-1600px;
  50% left:-1600px;
  60% left:-2400px;
  70% left:-2400px;
  80% left:-3200px;
  90% left:-3200px;

@-ms-keyframes gecisler 

  0% left:0px;
  10% left:0px;
  20% left:-800px;
  30% left:-800px;
  40% left:-1600px;
  50% left:-1600px;
  60% left:-2400px;
  70% left:-2400px;
  80% left:-3200px;
  90% left:-3200px;

@keyframes gecisler 

  0% left:0px;
  10% left:0px;
  20% left:-800px;
  30% left:-800px;
  40% left:-1600px;
  50% left:-1600px;
  60% left:-2400px;
  70% left:-2400px;
  80% left:-3200px;
  90% left:-3200px;

JavaScript’in yükünü CSS sırtlayınca kodlar birazcık uzuyor. Sırada HTML kodlarımız var.

HTML Kodları

Burada iş yükü oldukça azca. Aşağıda biz bir köprü bağlantı kullanmadık fakat siz slidelarınıza bağlantı verebilirsiniz.

<div class="aw-slider">
<div>
<a class="resim1"><img src="http://lorempixel.com/800/330/cats"><span>Kediler</span></a>
<a class="resim2"><img src="http://lorempixel.com/800/330/nightlife"><span>Gece Yaşamı</span></a>
<a class="resim3"><img src="http://lorempixel.com/800/330/fashion"><span>Moda</span></a>
<a class="resim4"><img src="http://lorempixel.com/800/330/food"><span>Yiyecek</span></a>
<a class="resim5"><img src="http://lorempixel.com/800/330/technics"><span>Teknik</span></a>
</div>
</div>

Slide sayısını nasıl çoğaltırım?

Ilk olarak HTML kodlarına yeni bir satır ekleyip sonraki numara ile isimlendirin (resim6). Sonrasında CSS tarafında bu yeni oluşturduğunuz görsele de ilgili classları tanımlayın. Animasyonunuzun olduğu kısma ise 0-90 arası uzanan sıralandırmayı her bir yeni slide için 2 satır daha arttırıp aradaki sayı farkını koruyun. Doğal olarak şuan için 3200‘e ayarlı olan genişlik değerlerinizi de her bir fotoğraf için 800 px arttırmayı ihmal etmeyin.

CSS Slider

İlk bakışta uzun ve karmaşık bir yazı benzer biçimde gözüküyor olabilir. Sadece web sayfanızın orta yerinde koca koca görselleri ziyaretçilere sunan bu tasarımların fonksiyonel ve süratli emek harcaması gerekir. Bir tek birkaç görsel hareket etsin, ilgi çeksin diye web sayfanıza onlarca CSS ve JavaScript dosyasını include ediyorsanız sayfa boyutunun epeyce artmasına sebep olmuş olursunuz.

Bir sonraki makalemizde görüşmek suretiyle, Allah’a emanet olun.