New Post has been published on adobewordpress ~ güncel tasarım okulu
New Post has been published on http://www.adobewordpress.com/sadece-css-ile-slider-yapimi
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.
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.
İ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.
.resim1left: 0; .resim2left: 800px; .resim3left: 1600px; .resim4left: 2400px; .resim5left: 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.
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.
İ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.
