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 : 

<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

Ali senin düşüncelerini merak ediyor. Bir yorum yaz