Sadece CSS ile Slider Yapımı

Haftada bir düzenli olarak “Slider yapımı hakkında daha fazla konu yazın!” şeklinde tehditkar mailler alıyoruz.

Hal böyle olunca oturup çalıştık, sizler için şık ve kolay hazırlanabilir bir slider tasarladık. Sadece CSS ile çalışan bu slider benzerlerinin aksine yazı ve üzerine gelince durma desteği de sunuyor. Böylece sıradan bir slider için web sayfamıza yüzlerce satır JavaScript yükü bindirmemiş oluyoruz.

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

ÖRNEĞİ GÖRÜNTÜLE

Sitenize Slider Ekleyin

Günümüz web trendlerinden biri olan sliderlar için yüzlerce alternatif internette gezmekte. Sadece Adobewordpress olarak biz bile bu konuyla alakalı 2 makale, 1 WordPress eklentisi yazdık. Bu da onların en yenisi.

Kolları sıvayıp kodlarımızı yazmaya başlayalı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. Beraberinde 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 resim 800px boyutunda olduğu için slideların her biri için +800px’lik bir left vermemiz gerekiyor.

.resim1{left: 0;}
.resim2{left: 800px;}
.resim3{left: 1600px;}
.resim4{left: 2400px;}
.resim5{left: 3200px;}

Bütün bu yapıları içinde barındıracak ve animasyonu oluşturacak division öğesini tanımlayalım. Örnekte 5 adet görsel kullandık diye 20 saniyelik bir animasyon oluşturduk. Ayrıca 800×5 piksellik bir görsel sunumumuz olduğu için 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 üzerine geldiğinde 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 çalışmaktadır*/
}

Ve son olarak cross browser yapıda gecisler isimli 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 biraz uzuyor. Sırada HTML kodlarımız var.

HTML Kodları

Burada iş yükü çok az. Aşağıda biz bir köprü bağlantı kullanmadık ama siz slidelarınıza link 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 Hayatı</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>Yemek</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?

Öncelikle HTML kodlarına yeni bir satır ekleyip sonraki numara ile isimlendirin (resim6). Daha sonra 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 rakam farkını koruyun. Tabi şuan için 3200‘e ayarlı olan genişlik değerlerinizi de her bir resim için 800 piksel arttırmayı unutmayın.

CSS Slider

İlk bakışta uzun ve karmaşık bir makale gibi gözüküyor olabilir. Ancak web sayfanızın orta yerinde koca koca görselleri ziyaretçilere sunan bu tasarımların fonksiyonel ve hızlı çalışması gerekir. Sadece 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 olursunuz.

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.