CSS3 ile tasarımcıların hayatına yeni giren bir özellik olan animation efektini kullanarak basit bir slider yapmayı yapabilirsiniz. Bu slider otomatik dönüşlüdür. Kendi yapım amacım aslında testimonials diye bir çok web sitesinde gördüğünüz kullanıcıların yorumlarını slider şeklinde yapan sisteme inat bende javascript kullanmadan yaptım. İhtiyacına yarayan arkadaşlar CSS’den anlayanlar varsa geliştirmeye açıktır. Temel mantığı görmeniz açısından idealdir.


HTML kodlarımız:


<div class="ustslider1"><img src= "https://osmangazi.imagesturk.net/2014/11/09/188c1b.jpg" /></div>
<div class="ustslider2"><img src= "https://osmangazi.imagesturk.net/2014/11/09/2023f2.jpg" /></div>
<div class="ustslider3"><img src= "https://osmangazi.imagesturk.net/2014/11/09/3a5e58.jpg" /></div>
<div class="ustslider4"><img src= "https://osmangazi.imagesturk.net/2014/11/09/4d40df.jpg" /></div>


Ben basit şekilde 4 tane resim koydum. Siz istediğiniz gibi kullanabilirsiniz. Div’lerin içeriğini değiştirebilirsiniz.


CSS Kodlarımız :


.ustslider1 {
position: absolute;
-webkit-animation: ustslider1 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider1 50s infinite;
}
.ustslider2 {
position: absolute;
-webkit-animation: ustslider2 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider2 50s infinite;
}
.ustslider3 {
position: absolute;
-webkit-animation: ustslider3 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider3 50s infinite;
}
.ustslider4 {
position: absolute;
-webkit-animation: ustslider4 50s infinite; /* Chrome, Safari, Opera */
animation: ustslider4 50s infinite;
}
/* Üst Slider 1 */
@-webkit-keyframes ustslider1 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
2% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
24% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider1 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
2% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
24% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}


/* Üst Slider 2 */
@-webkit-keyframes ustslider2 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
27% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
49% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider2 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
25% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
27% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
49% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}


/* Üst Slider 3 */
@-webkit-keyframes ustslider3 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
52% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
74% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider3 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
50% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
52% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
74% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}


/* Üst Slider 4 */
@-webkit-keyframes ustslider4 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
77% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
99% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}
@keyframes ustslider4 {
0% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
75% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
77% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
99% {opacity:1; -webkit-opacity:1; -moz-opacity:1;}
100% {opacity:0; -webkit-opacity:0; -moz-opacity:0;}
}




CSS kodlarımızda açıklanması gereken kısım şöyle:


4 ayrı divimize ben ayrı ayrı css kodu kullandım ancak siz birleştirebilirsiniz üzerinde oynama yaparım diye ayırdım. Position: absolute komutunu divler üzerinde kullanma sebebimiz tüm divlerin aynı zemine oturması içindir. Daha açık konuşmak gerekirse divlerin biri kaybolup diğeri geldiğinde hepsinin soldan ve üstten aynı uzaklıkta çalışmamız içindir.


-webkit-animation, animation kodu ise temel animasyon hizmeti tanımını yapmamız için gereken kodumuzdur. -webkit- kullanmamdaki amaç google chrome ve safarinin eski sürümleri css3 ün bazı kodlarını kendine has terimlerle algılıyor. Buda -webkit- öneki kullanmama sebeptir.


animation: ustslider1 50 infinite şeklinde yaptığım tanımda ise; keyframe ustslider1 animasyonunu burada oynat demektir. 50 ise bize bu animasyonun hızını belirtmektedir. Saniye türünden. İnfinite ise animasyonun sürekli tekrar etmesi için kullanılan koddur.


@keyframes ustslider1, @-webkit-keyframes ustslider1 animasyonun nasıl olacağını tanımlayacağım kısmı anlatmaktadır.


0%, 20% gibi değerler ile anlatılmak istenen animasyonun kaç saniyede tamamlanacağını belirttiğimiz sürenin %lik dilimini belli eder. Yani ilk animation: ustslider1 50 infinite şeklinde yaptığım tanımda 50 saniyelik sürenin 20% yazdığımda yüzde 20 sine gelince şu işlemi yapacaksın gibi bir tanım yapılmaktadır. İçerisine yazmış olduğum diğer komutlar bilinen opacity yani şeffaflık değerini belirtmektedir. Ben bunu kullanarak fade efekti benzeri bir şekilde yaptım. Farklı css kodları kullanılarak sağa sola kaydırma, üstten aşağı kaydırma, yada direk yok olma vs. gibi şekillerde bu kodlama yapılabilir.


Temel olarak anlatım böyle. Çok daha fazla şey yapılabilir tabiki. Ayrıca belirtmek gerekir ki hala daha xp kullanıcılarının varlığı yüzünden bu kodları bazı bilgisayarlarda çalışmayabilir. İnternet explorer 9 ve üzeri sürümlerinde bu kodlamalar çalışmaktadır. Önümüzdeki yıllarda JS’ye ihtiyaç duymadan bir çok kodun ve bir çok olanağın sadece css yardımıyla tüm bilgisayarlarda sorunsuzca çalıştığını görebileceğiz