3DTransitions

0
471
Görüntülenme

transitions
Tek safa içinde hemen hemen tam boy  diyebileceğim bir genişliğe sahip  animasyonlu  dönen resim galerisi  istiyorsanız tam size göre. Demo   sayfası ilk  yüklendiğinde  bütün resimler tek çerçeve içinde  duruyor.  Bütün resimlerin yüklenme  işlemi bittikten sonra slayt  olarak  resimleri  inceleyebileceğimiz bir konuma  geçiyor. Sol alt tarafta  bulunan  sağ ve sol  ok işaretlerini kullanarak resimler  arası  geçiş işlemini canlı olarak inceleyebilirsiniz.

Resimler arası geçiş  için tıkladığınız ok tuşlarından sonra bütün resimler biraz geriye çekilerek  bir çember hizasında diziliymiş gibi bir görünüm alıyor ve  ekranda gösterilecek resim orta kısma  geldikten sonra resimler yaklaşıyor.  Üst üste  aralıksız olarak ok tuşlarını tıkladığınızda ortaya biraz eğlenceli görüntü  çıkıyor sanki resimler birbirleri ile yarış edercesine  birbirlerini kovalıyorlar.

Aslında örnek galeri olarak hazırlanmamıştı  daha çok aşama aşama incelenebilen bir  sunum gibiydi. Resim galeri  olarak kullanmak bana daha mantıklı geldiği  için css dosyası içinde ufacık bir  değişiklik yaptım. Resimlerin yanına yazı falan gibi birşeyler eklemek isterseniz css  dosyasında biraz değişiklik yapabilirsiniz.

Örneğin en güzel  tarafı  tarayıcıya  duyarlı olması. Tarayıcı boyutu küçüldükçe çerçeve boyutları ve çemberde  tarayıcıya  duyarlı  olarak boyut  değiştiriyor.  En iyi Cherome tarayıcısı üzerinden inceleyebilirsiniz demoyu. Mozilla tarayıcısında sağ ve sol okişaretleri yerine sadece s s  harfleri  görünüyor safaride biraz sorunlu ve operada dahda kötü bir görüntüsü  var yinede internet  explorerden daha iyi görünüyorlar. Çünkü IE10 üzerinde  hiç bir animasyon görünmüyor.  Sadece  düz resimler boydan boya sıralanıyor.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri :

 Css : 

 Html : 

Html kod içinde  sadece slayt işlemi için gerekli olan sağ-sol  okları ve iki  tane  resmin ekleneceği bölüm verdim. Daha sonra isteğinize göre  bu sayıyı çoğaltabilirsiniz. En fazla  11 adet resim ekleyebilirsiniz ama bunun içinde  tam birlimit yok. Javascript  dosyası içinde var slideNum = 11;   olan bölümdeki 11 rakamını isteğinizegöre değiştirebilirsiniz.

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.