Pushing text animating
Written by 24 February 2014
Nice effect on the texts. You have a pushing animating effect. Proper for big size text or heading texts in your page.
Code Snippet:
<!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
</head>
<body>
<script language="JavaScript" type="Text/JavaScript">
fifteenth="Your Text Here";sixteenth=1;var nineteenth=document.getElementById && document.all;seventeenth=new Array();seventeenth[0]=-1;seventeenth[1]=-3;seventeenth[2]=-6;seventeenth[3]=-10;seventeenth[4]=-8;seventeenth[5]=-3;seventeenth[6]=-2;eighteenth=0;twentieth=0;first2="";
function second2(){
if (nineteenth && !sixteenth){third2.innerHTML=fifteenth;return;}
if(fifteenth.length > 6){
for(fourth2=0; fourth2 != fifteenth.length;fourth2++){first2=first2+"<span style='position:relative;' id='n"+fourth2+"'>"+fifteenth.charAt(fourth2)+"</span>"};third2.innerHTML=first2;first2="";fifth2();}
else{alert("Too short message!");}}
function fifth2(){sixth2=(document.getElementById)? document.getElementById("n0") : document.all.n0;sixth2.style.left=-twentieth;
if(twentieth != 9){twentieth=twentieth+3;setTimeout("fifth2()",30);}
else{fifteenth3();}}
function fifteenth3(){sixth2.style.left=-twentieth;
if(twentieth != 0){twentieth=twentieth-3;setTimeout("fifteenth3()",30)}
else{seventeenth3();}}
function seventeenth3(){first2="";
for(fourth2=0;fourth2 != fifteenth.length;fourth2++){
if(fourth2+eighteenth > -1 && fourth2+eighteenth < 7){first2=first2+"<span style='position:relative;top:"+seventeenth[fourth2+eighteenth]+"'>"+fifteenth.charAt(fourth2)+"</span>";}
else{first2=first2+"<span>"+fifteenth.charAt(fourth2)+"</span>";}}third2.innerHTML=first2;first2="";
if(eighteenth != (-fifteenth.length)){eighteenth--;setTimeout("seventeenth3()",30);}
else{eighteenth=0;setTimeout("second2()",30);}}
</script>
<h1><div align="center" id="eighteenth3" style="color:red"></div></h1>
<script language="javascript" type="text/javascript">
if (document.all||document.getElementById){third2=(document.getElementById)? document.getElementById("eighteenth3") : document.all.eighteenth3;second2();}else document.write(fifteenth);
</script>
<br/><div style="clear:both"></div><div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!