Loading Page
Toolbar
U-Trade tutorials
Hello Guest
Links
Google Search
search
categories
css
css
html
html
javascript
javascript
    »   Images
    »   Text effects
    »   Dimensions
    »   Implementations
    »   Menu
photoshop
photoshop
php
php



Paypal
sitemap
contact
request tutorial
recommends
Do you have something to do in code, design or animation and you don't know how?
Send us an e-mail and will do a tutorial which will solve your problem.

10 Random Tutorials from all categories and subcategories
tutorials U-Trade
tutorials U-Trade
How you can create a simple text effect animation : U-Trade
+ Share and Enjoy
Author: Cristea Iulian



Vote up
Vote down
Vote this article
this is my sample text


All you have to do in this is to change a color to a letter at a time.

Let's see how you can do this.

First of all we set a few parameters at the beginning so we can change them later easily if we want to.

We call the function "preload_flash_letters" in our case which sets the global "__get_text" variable where puts our text from within an existing container. Now when everything is set we'll call the "flash_letters" function which will repeat from now on. We must do this for keeping our settings so we use two functions instead only one.

Here we take from our string the first, the middle and the last part of the string, so the middle part is the character which we will change the color to it, the first part is the text before it, and the third part is the text after it.

Now we set to all this a color from our settings and we put the changing color on the changing letter.

To keep animation going when ends, we need to restart it and we reset the variable "__last_letter" to 0 so it will begin again. 

<script type="text/javascript" language="javascript">


var __color_alpha	= "999999";
var __color_beta	= "ffffff";
var __get_text		= "";
var __last_letter	= 1;
var __myStringID	= "";

function preload_flash_letters(yourStringId)
{
	__myStringID 	= yourStringId
	__get_text 		= document.getElementById(__myStringID).innerHTML
	flash_letters();
}

function flash_letters()
{
	firstBlock 	= __get_text.substring(0, __last_letter);
	secondBlock = __get_text.substr(__last_letter, 1);
	thirdBlock	= __get_text.substring(__last_letter+1, __get_text.length);
	
	document.getElementById(__myStringID).innerHTML = '<span style="color:#'+__color_alpha+';">'+firstBlock + '<span style="color:#'+__color_beta+';">' + secondBlock + "</span>" + thirdBlock+'</span>'
	if (__last_letter == __get_text.length-1)
		__last_letter = 0;
	else
		__last_letter++;
	setTimeout("flash_letters()", 70);
}


</script>



In the end we recall every time this function at a preferred time which will be our animation speed.


+ post a comment


sitemap   |   terms and conditions   |   contact
U-Trade © All rights reserved 2006-2008 | How you can create a simple text effect animation : U-Trade : U-Trade Tutorials