animating letters and words 1

tyutghf · Jan 24, 2013

Hi

I was going to do this in flash but though about giving javascript and jquery a go to make it work on smartphones.

Our company name is an acronym made up of four words such as

Hello
Every
Lovely
Person

making up HELP.

What I want to do is have each word start out such as

Hello Every Lovely Person

and then the first letter of each word stays but the rest of the word fades away, leaving just H E L P. These letters then come together to spell HELP.

I have looked for tutorials etc on jquery animation but nothing is similar to this. Does anyone know of any good toturials?

Thanks

jpadie · Jan 24, 2013

Code:

<div id="animatedlogo">
H<span class="animate">elp </span>E<span class="animate">very </span>L<span class="animate">overly </span>P<span class="animate">erson</span>
</div>

<script type="text/javascript">
$(document).ready(function(){
     $('#animatedlogo .animate').hide( 4000 ) );
}
</script>

you could, of course, put the script section in the <head>

jpadie · Jan 25, 2013

i had a play with the code this morning to try to make the animation more refined/smooth. here is the best combination I came up with in the time available.

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="[URL unfurl="true"]http://code.jquery.com/jquery.min.js"></script>[/URL]
<script type="text/javascript">
$(document).ready(function(){
    $('#animatedlogo .animate').animate({
        opacity: 0
    }, {
        duration: 4000,
        complete: function(){
            $('#animatedlogo .animate').animate({
                'font-size': 0.5
            }, {
                duration: 2000,
                complete: function(){
                    $('animatedlogo .animate').hide();
                }
            });
        }
    });    
});
</script> 
</head>
<body>
<div id="animatedlogo">
H<span class="animate">elp </span>E<span class="animate">very </span>L<span class="animate">ovely </span>P<span class="animate">erson</span>
</div>
</body>
</html>

or for a slight alternative where the fading and compacting happen at the same time you could try this

Code:

<script type="text/javascript">
$(document).ready(function(){
    $('#animatedlogo .animate').animate({
        opacity: 0,
	'font-size':0.5
    }, {
        duration: 4000,
        complete: function(){
		$('animatedlogo .animate').hide();
        }
    });    
});
</script>

tyutghf · Feb 6, 2013

This was ideal thank you, I have since used this as a starting point and expanded on this to animate more with more elements

feherke · Feb 14, 2013

Hi

I just met textillate.js and remembered your question.

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

tyutghf · Feb 15, 2013

Hey that's great it reminds me of Flax years ago.

Bookmarked that and animate.css, I'll have to find somewhere to use those

Thanks

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

animating letters and words 1

tyutghf

Technical User

jpadie

Technical User

jpadie

Technical User

tyutghf

Technical User

feherke

Programmer

tyutghf

Technical User

Similar threads

Part and Inventory Search

Sponsor