Textualizer.js

By

textualizer1
Nedense  yazılar için çok fazla yapılmış olan uygulama örneği bulunmuyor. Sadece yazı ile hareketli bir banner oluşturmak için uygulama arayışına girseniz belki günlerce kendinize göre sonuç bulamayabilirsiniz. Efekt olarak şu ana dek karşılaştıklarım içinde en kullanışlı olanı bu diyebilirim. Karşılaştığım diğer bir kaç tanenin görüntüsü ise hava alanlarındaki tabelaları andıran efektlere sahipler. Textualizer.js ise sınırlı olsa bile çok farklı efektler bulunuyor. Dağılan, bulanıklaşarak kaybolan, dağılan, teker teker aşağı düşen, soldan sağa kayan gibi bir kaç tane kullanılabilir özellik bulunuyor. Kirollos Risk  yapmış olduğu bu çalışma  Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4+) tarayıcıları üzerinde sorunsuz bir şekilde çalışıyor.

Kullanım 

  • Head  etiketleri  arasına eklenecek olan bölümler.

Js dosya  adresleri :

<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="textualizer.js"></script>

Stil :
    <style type="text/css">
        #txtlzr
        {
            font-size: 40px;
            width: 700px;
            height: 300px;
            margin-left: 100px;
            margin-top: 50px;
            border: 1px solid red;
        }
    </style>

JavaScript :
  <script type="text/javascript"> 
    $(function() {
          var txt = $('#txtlzr'); 
          txt.textualizer();
          txt.textualizer('start');
    })
  </script>

  • Body etiketleri arasına eklenecek olan bölüm.

Html :

      <div id="container"> 
        <div id="txtlzr">
        	<p> p elemanını  çoğaltarak kullanın.</p>
        	<p> Her  bir p elemanı</p>
               	<p>Ayrı  bir animasyon oluşturacaktır</p>
 </div> 
</div>



Leave a Comment

Your email address will not be published.

You may also like

Trend