Eskiden bu tarz bir örnek bulabilmek için ya bir geliştiriciye ücretli başvurmanız gerekiyordu yada bir şekilde zamanınızın büyük çoğunu aramakla geçirip bulduktan sonra satın almanız gerekiyordu. Neyse ki zaman ilerledikçe açık kaynak kodlu çalışmalar paylaşan geliştirici sayısı artıyor ve bu da bizler için çok büyük bir avantaj. Bırakın küp şeklinde bir animasyon kullanmayı bulmakta bile güçlük çekerdik. Phil Parsons tarafından yapılmış olan Adaptor.js uygulaması 3 boyutlu slayt örnekleri kullanabilmemize yarayan ve benzerleri çok az sayıda olan bir uygulamadır. Toplamda 9 adet geçiş efektine sahip ve kullanımı da oldukça kolay. Css 2D ve 3D geçiş efektleri, fade, aşağı doğru parçalanarak, yukarı doğru parçalanarak ve bir de tiles dedikleri olay ile bir sonraki fotoğrafa geçebilmek mümkün. Ayrıca resim değiştikten hemen sonra çerçevenin altında yeşil renkli bir yükleme çizgisi yükleniyor. Yükleme süresi bitince bir sonraki resme otomatik geçiş yapılıyor.
Kullanım
Head Etiketleri arasına eklenmesi gereken bölümler.
jQuery ve eklenti url adresleri :
<script src="js/jquery.min.js"></script> <script src="js/box-slider-all.jquery.min.js"></script>
JavaScript :
$('.content-box').boxSlider({
autoScroll: true
, timeout: 5000
, speed: 1200
, pauseOnHover: true
});
Css :
.slider-viewport, .content-box, .slide { width: 600px; height: 400px }
.content-box { overflow: hidden } /* stop slides overflowing */
Body etiketleri arasına eklenmesi gereken bölüm.
Html :
<div><!-- works as a viewport for the 3D transitions -->
<div><!-- the 3d box -->
<figure><!-- first slide -->
<img src="img/slide-1.png">
<figcaption>This is slide one's description</figcaption>
</figure>
<figure>
<img src="img/slide-2.png">
<figcaption>This is slide two's description</figcaption>
</figure>
<figure>
<img src="img/slide-3.png">
<figcaption>This is slide three's description</figcaption>
</figure>
<figure>
<img src="img/slide-4.png">
<figcaption>This is slide four's description</figcaption>
</figure>
</div>
</div>
