animateText.js

animateText.js Web sitenize  uçuşan yazılar ekleyerek daha hareketli bir görünüm katmak istiyorsanız eğer animateText.js  birçok yazı efektini kendi başına yapabilen bir örnek. animateText.js ile sağdan sola,  soldan sağa, büyüyen, küçülen, solarak kaybolan yazı  efektlerini  kolaylıkla sitenize uygulayabilirsiniz.  Eskisi kadar sitede yazı efektlerine önem verenler azalmış olsa da ihtiyacı olanlar, kullanmak isteyenler olur diye Justin Lucas’ın yapmış  olduğu bu örneği sizlerle paylaşmak istedik.  Bununla birlikte oluşturacağınız yazı efektlerinde hız, büyüme efekti, nereden başlayacağı ve nerede biteceği gibi özellikleri düzenleyebilirsiniz.

Kullanım

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

Js ve css  dosya adresleri : 

<link rel="stylesheet" type="text/css" href="style.css"/>		
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="animateText.js"></script>
<script type="text/javascript" src="script.js"></script>

 JavaScript : 

<script type="text/javascript">
//Content Tabs
$("#content_box #nav li").click(function(){
	switch_content(this);
});
    //Homepage text animation
var positions = {
	rightToLeft: {
		start: {
			top:'35px',
			'font-size': '37px',
			'font-weight': 700,
			color: '#CCC'
		}
	},
	leftToRight: {
		start: {
			top: '80px',
			'font-size': '30px',
			color: '#FDFA27',
			'font-weight': 700
		}
	},
	fadeIn: {
		start: {
			left:null,
			top:'10%',
			right:'25%',
			'font-size': '20px',
			'font-weight': 700
		}
	}
};
$(document).ready(function(){
	$("#welcome").animateText([
		{
			offset: 0,
			duration: 1000,
			animation: "explode",
		},
		{
			animation: "rightToLeft",
			offset: 0,
			positions: positions.rightToLeft
		},
		{
			animation: "leftToRight",
			offset: 0,
			positions: positions.leftToRight
		},
		{
			offset:500,
			animation: "fadeIn",
			positions: positions.fadeIn,
			duration: 2600
		},
		{
			offset: 3600,
			duration: 1000,
			animation: "explode",
		},
		{
			animation: "rightToLeft",
			offset: 3600,
			positions: positions.rightToLeft
		},
		{
			animation: "leftToRight",
     		offset: 3600,
			positions: positions.leftToRight
		},
		{
			offset:4100,
			animation: "fadeIn",
			positions: positions.fadeIn,
			duration: 2600
		},
		{
			offset: 7200,
			duration: 1000,
			animation: "explode",
		},
		{
			animation: "rightToLeft",
			offset: 7200,
			positions: positions.rightToLeft
		},
		{
			animation: "leftToRight",
			offset: 7200,
			positions: positions.leftToRight
		},
		{
			offset: 7700,
			animation: "fadeIn",
			positions: positions.fadeIn,
			duration: 2600
		},
		{
			offset: 10800,
			animation: "implode",
			positions: {
				1: {
					duration: 4200
				}
			}
		}
	]);
});
	</script>
  •  Body etiketleriarasına eklemeniz  gereken bölüm.

Html : 

	<div id="animated_text">
		<ul id="welcome">
			<li>WELCOME</li>
			<li>This is animateText.js</li>
			<li>A jQuery plugin</li>
			<li>WELCOME</a></li>
			<li>EASILY</li>
			<li>Create text animations</li>
			<li>Just like the one you see here</li>
			<li>EASILY</li>
			<li>CHOOSE</li>
			<li>From several preloaded animations</li>
			<li>Customize them or create your own</li>
			<li>CHOOSE</li>
			<li>Fork on <a href="#">Github</a></li>
		</ul>
	</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-05-30 tarihinde yayınlandı,Toplam 2674 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(Yorum yapılmamış)
Yükleniyor...