Gönderen Konu: Güzel bir CSS3 ve jQuery silder yapimi  (Okunma sayısı 754 defa)

Çevrimdışı weptiryaki

  • Genel Moderatör
  • Trade Sayısı: (0)
  • *
  • İleti: 89
  • Karma +3/-0
  • Cinsiyet: Bay
  • Webmaister
    • Profili Görüntüle
Güzel bir CSS3 ve jQuery silder yapimi
« : 15 Mar 2013, 09:53:14 »
[h1]
Nasıl çalışıyor
Silder birkaç slayt içeriyorsa ve her biri bir h2 elemanı, bir paragraf, bir resim ile bir bağlantı ve bir bölümü olacak:
Kod: [Seç]
<div id="da-slider" class="da-slider">
 
    <div class="da-slide">
        <h2>Some headline</h2>
        <p>Some description</p>
        <a href="#" class="da-link">Read more</a>
        <div class="da-img">
            <img src="images/1.png" alt="image01" />
        </div>
    </div>
 
    <div class="da-slide">
        <!-- ... -->
    </div>
 
    <!-- ... -->
 
    <nav class="da-arrows">
        <span class="da-arrows-prev"></span>
        <span class="da-arrows-next"></span>
    </nav>
 
</div>

Bu silayt temel öğelerinin her biri için animasyonlar. Biz ilgili slayt için bir "yön sınıf" vererek elemanlarının davranışını kontrol edeceğiz. Örneğin, biz sağa geçerli slayt slayt zaman, biz sınıf "da-slayt-toright" verecektir. Mümkün slayt yönleri ve kökenleri her biri için dört farklı ders olacaktır:
. Da-slayt-fromright
. Da-slayt-fromleft
. Da-slayt-toright
. Da-slayt-toleft
Bu sınıflar göz önüne alındığında, biz her elemanın animasyonu kontrol edebilirsiniz:
Kod: [Seç]
/* Slide in from the right*/
.da-slide-fromright h2{
    animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
    animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
    animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
    animation: fromRightAnim4 0.6s ease-in 0.8s both;
}
 
/* Adjust animations for different behavior of each element: */
@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

Ekte detayli anlatim vede dosyalar mevcut

INDIR[/h1]