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>