imPress.js – Sunum hazırlama kütüphanesi

0
349
Görüntülenme

imPress

Bartek Szopka‘nın  prezi.com sitesin esinlenerek  geliştirdiği 33kb boyutunda olan  imPress JavaScript  kütüphanesi  ile modern tarayıcılar üzerinde  Css3 geçişleri  kullanabilmenize  olanak sağlayarak mükemmel  animasyonlar  ve  web sayfası  üzerinden hayal  gücünüze bağlı olarak sınırsız   animasyonlarla  donatılmış sunumlar  hazırlayabilirsiniz.

 

 

 

 

 

 

imPress  JavaScript kütüphanesinin  çalışma şekli jQuery Scroll Path, Accensor ve Scroll Orama  eklentilerine benziyor  ama  imPress  tek başına çalışabilen bir  JavaScript kütüphanesi      bu eklentilere  göre  çok  daha kolay kullanılabilen ve 3D  efektlere  sahip ve sadece  klavye  yön  ve space tuşları ile çalışabiliyor.

 

  • Demo

Kullanım

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

impress javascript  kütüphanesinin url  adresi : 

 JavaScript : 

Css :

  •  Body  etiketleri arasına eklenmesi gereken bölümler.
Html : 
Slayt1 diye  adlandırılmış olan örneği  slayt2, slayt3 diye  adlandırarak geçiş  sayısını  istediğiniz kadar arttırabilirsiniz.

 Tarayıcı desteklemiyor  uyarısı : 

 İmpres.js  kütüphanesinin desteklediği efektler

  • data-x :  Soldan sağa  yada sağdan sola geçiş  efekti  sağlar.
  • data-y : Yukarıdan aşağıya yada aşağıdan yukarıya geçiş  sağlar.
  • data-rotate : Nesneyi döndürmeye yarar.
  • data-z : İleriye  yada  geriye  doğru  hareket sağlar 3D  görünümü  sağlar.
  • data-scale : Nesneyi  ölçeklemek için kullanılır.
  • data-rotate-x : X ekseni  etrafında  nesneyi  döndürür.
  • data-rotate-y : Y  ekseni etrafında nesneyi döndürür.
  • data-rotate-z : İleri  yada geri olarak nesneyi döndürür.

Efektlerin kullanımı oldukça basittir  ve bir  html  elementinin kullanıldığı  gibi  kullanılır.

Örnek : <img src=””  width=”500px”   burada width  seçeneği ile  resim boyutunu 500 px  olarak  ayarlıyoruz  img elementinde.

Efekt  vereceğimiz  css  elementinde yine  bu şekilde kullanıyoruz.  <div id=”css elemetent” data-x=”500″

  • Destekleyen Tarayıcılar : Safari, Cherome, Firefox, Opera, İe

CEVAP VER

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