Fraction 3D Parallax SlaytShow

13Okunma
8 yorum

Fraction

Mario Jäckle tarafından geliştirilmiş olan FractionSlider  eklentisi site görünümüne   önem veren kişiler  için kullanılabilecek eşsiz  örneklerden biri  sanırım. Henüz  yeni  yapılmış olmasına rağmen bir çok  kişi  tarafından ilgi  görmeyi  başarmış ve sanırım bu animasyonlar ile  daha da  yayılacak  gibi görünüyor.

Çoklu  animasyon denilince  akla birden fazla animasyon örneği gelir  elbette ama  bu  eklentideki çoklu  sözü  aynı  anda  birden fazla  nesneye  farklı  şekillerde slide geçişler  verebilme özelliğinden bahsediyor.  Slaytlar  tek bir resmin kayıp  yada fade  efekti ile solup yerine başka  bir  resmin gelmesi gibi  alışıldık  örneklerden değil. Aynı  anda  birden fazla  resim  her  biri  belirli bir  bölgeye  doğru kayarak slayt işlemini gerçekleştiriyorlar.

Eklenti  ile  dilediğiniz  kadar  farklı  farklı  slide geçişler  uyguladığınız  gibi  dilediğiniz  kadar farklı  nesnelerede  geçişler  uygulayabiliyorsunuz.  İlk  açılışta  resimler  yerlerine  oturduktan sonra  ardından tıklanılabilir başlıklar  sırasıyla  ya  sağdan yada  soldan kendileri  için ayarlanmış olan bölümlere  doğru  yaklaşıyorlar. Demo örneğinde  yok  ama  bir  nesneyede  video  eklenmiş olsaydı sanırım daha  çekici olurdu. O kısmıda  artık dilerseniz kendiniz  yaparsınız.

 

Diğer Demolar

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-17 tarihinde yayınlandı,Toplam 1192 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(8 yorum)
Yükleniyor...
rossi46 Yorumcu LV.1
2013-11-12 05:41:26 回 Yanıtla

?m using this. But in element ??, I can?t set with or element inside it. I use many other element ?div? contain image, h1, h2, span? in ?, but when I set width of div and width of image, it isn?t affect. I don?t know why.

Here is my code:

<a href='' title='' rel="nofollow">ff</a>
<a href='/tai-lieu/sach-hoc-tieng-anh-toan-tap-tieng-viet-m1-cd10-cm0.aspx' title='' rel="nofollow">ff</a>
 L??t xem: 0Download: 0
 hhhd
    Ali Blogger
    2013-11-12 16:13:38 回 Yanıtla

    @rossi46 Try like that :

    <div class="slider"><!-- your slider container -->
     <div class="slide"><!-- all elements for the first slide --></div>
     <div class="slide"><!-- all elements for the second slide --></div>
     <!-- and so on -->
     <div class="fs_loader"><!-- shows a loading .gif while the slider is getting ready --></div>
     </div>

    You can add your div or other elements like image and style class. Or here examine plugin documentation.

Ghaleon Yorumcu LV.1
2014-03-11 22:46:05 回 Yanıtla

Hi !!
I’m trying to use your amazing slider, but I’m having some problem, it doesnt want to work…

I followed this: http://jacksbox.de/stuff/jquery-fractionslider/documentation/

Where should I put the

jQuery(window).load(function(){
$(‘.slider’).fractionSlider();
}); ?

I followed exactly what is in that link.

called the .CSS, Jquery, and fractionslider.js. Added the html that is in that link, but nothing happens ;s

Thank you sir!

    Ali Blogger
    2014-03-12 00:37:37 回 Yanıtla

    @Ghaleon Try to click download button. There have a ready example and code. You can find smilar this and more advanced code in main.js