Css İle Slider Yapimi.png-cahitsoyman.blogspot.com
CSS İle Animasyonlu Slider Yapımı

Bu yazımızda JavaScript  yardımı olmadan HTML5 ve CSS3  teknolojisinden faydalanarak resimli slider geçişi tasarlayacağız.

Bu tasarımda resimlerimizi Html kodları arasına yerleştireceğiz. İstersek resimlere link de verebiliriz. CSS ile de resimlerimizi belirlediğimiz hızda döndürüp  daha sonra da durduracağız.


Şimdi kodlarımızı yazmaya başlayalım.



HTML Kodları



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS İle Resim Slider</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<section class="image-slider">
  <figure><img src="images/1.jpg"></a>
    <figcaption><a href="http://cahitsoyman.blogspot.com" target="_blank">
    Birinci Resim</a></a></figcaption>
  </figure>
  <figure><img src="images/2.jpg"></a>
    <figcaption><a href="http://cahitsoyman.blogspot.com" target="_blank">
    İkinci Resim</a></figcaption>
  </figure>
  <figure><img src="images/3.jpg">
    <figcaption><a href="http://cahitsoyman.blogspot.com" target="_blank">
    Üçüncü Resim</a></figcaption>
  </figure>
  <figure><img src="images/4.jpg">
    <figcaption><a href="http://cahitsoyman.blogspot.com" target="_blank">
    Dördüncü Resim</a></figcaption>
  </figure>
   <figure><img src="images/5.jpg">
    <figcaption><a href="http://cahitsoyman.blogspot.com" target="_blank">
    Beşinci Resim</a></figcaption>
  </figure>
</section>

</body>
</html>



CSS Kodları
İlk önce Section class olarak  tanımladığımız image-slider a margin, padding, list-style ve resimlerimizin boyutlarını verelim.

.image-slider {
 list-style: none;
 display: inline-block;
 position: relative;
 margin-left: 750px;
 margin-top: 50px;
 height: 213px;
 width: 165px; 
}

Şimdi animasyonun üzerine fare ile gelindiğinde durmasını söyleyelim.

.image-slider:hover figure{
 -webkit-animation-play-state: paused;
 text-decoration: none;
}

Görsel figürlerimize animasyon tanımını yapalım.

image-slider figure {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: gecisler 10s ease both infinite;

}

Resimlerimizin üzerine gelindiğinde visibility olmasını söyleyelim.

.image-slider > figure > figcaption{
 visibility: hidden;
 color: #F00;
 text-align: center;
}

.image-slider > figure:hover figcaption{
 visibility:visible

}

Linklerin üzerine gelindiğinde alt çizgiyi kaldıralım ve renk belirleyelim.

figure figcaption a {
 color: #F00;
 text-decoration: none;
}

Resimlerimizin geçişine delay, border, border rengi ve redius yüzdesi belirleyelim.

.image-slider figure:nth-child(1) {
 -webkit-animation-delay: 2s;
}
.image-slider figure:nth-child(2) {
 -webkit-animation-delay: 4s;
}
.image-slider figure:nth-child(3) {
 -webkit-animation-delay: 6s;
}
.image-slider figure:nth-child(4) {
 -webkit-animation-delay: 8s;
}
.image-slider figure:nth-child(5) {
 -webkit-animation-delay: 10s;
}
 
.image-slider > figure > img {
  border-radius: 50%;
  border: 2px solid red;
}

Css geçiş animasyonlarını da hazırlayarak çalışmamızı bitirelim.

@-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);
  }
}



Kaynak Dosya: İNDİR