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

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.

Download

Demo

Kullanım

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

impress javascript kütüphanesinin url adresi :

<script type="text/javascript" src="js/impress.js"></script>

JavaScript :

<script type="text/javascript">impress().init();</script>

Css :

  <style>
  body{
   width:1024px;
   font-size: 36px;
   font-family: 'Armata', sans-serif;
				background: url(img/stars.jpg);
				color: #eee;
				text-shadow: 1px 1px 2px #000;
  }
  #basla{
   text-align:center;
   width:1024px;

  }
  #slayt1{
   text-align:center;
   width:1024px;

  }
  #slayt2{
   text-align:center;
   width:1024px;

  }

  .step{
   text-align:center;
   width:1024px;

  }

  #slayt7{
   width:400px;
  }
  #slayt8{
   width:400px;
  }
  #slayt9{
   width:400px;
  }

  .hint_text{
				margin-top: 120px;
   font-size:30px;
   background-color:#282a2f;
   padding:15px;
				border: 1px solid #484d52;
				border-radius: 5px;
				font-size: 18px;

  }

  .fallback-message {
   	color: #eee;
   line-height: 1.3;
   width: 780px;
   padding: 10px 10px 0;
   margin: 20px auto;
   border: 1px solid #E4C652;
   border-radius: 10px;

  }

  .fallback-message p {
   margin-bottom: 10px;
  }

  .impress-supported .fallback-message {
   display: none;
  }
  </style>

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.

 <body class="impress-not-supported">
		<div id="impress">
  <div id="start" class="step" >
				<p> Yazı buraya </p>
				<p class='hint_text'> Yazı buraya </p></div>

  <div id="slayt1" class="step" data-scale="3" data-z="2000">
   <p> Yazı buraya </p>	
  </div>

</div>

Tarayıcı desteklemiyor uyarısı :

  <div class="fallback-message">
  <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
  <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
  </div>

İ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~~