Ali @mintik
3 Mart 2021 0:23

Adaptor

adaptor

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>

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla