How To Make a Jumping Text Effect Using JS

Oftentimes, we want to make a certain text appear in a different way, or to make it move to attract the attention of visitors, In this post , you will be able

Loading ...

The road to success and the road to failure are almost exactly the same.

– Colin R. Davis

Web Widgets

Sunday 19 January 2020

How To Make a Jumping Text Effect Using JS

Oftentimes, we want to make a certain text appear in a different way, or to make it move to attract the attention of visitors, In this post , you will be able to make a text jumping,it's a beautiful effect to add it in your blog or website let me show you a preview of this effect first :

Preview

So if you like this effect let start our tutorials:
Step 1 : Got to any place you want copy paste the code bellow

<div id="jumping_letters" style="padding-left: 35px;font-size:25px;"></div>
<script type="text/javascript">
message="Giveaways Networks";
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;
mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";

function jump0()
{
if (message.length > 6)
{
for(i=0; i!=message.length; i++)
{
txt = txt + "<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>";
}
jump = document.getElementById("jumping_letters");
jump.innerHTML = txt;
txt = "";
jump1a();
}
}

function jump1a()
{
nfinal = document.getElementById("n0");
nfinal.style.left = (-num2).toString() + "px";
if (num2 != 9)
{
num2 = num2 + 3;
setTimeout("jump1a()", 50);
}
else
{
jump1b();
}
}

function jump1b()
{
nfinal = document.getElementById("n0");
nfinal.style.left = (-num2).toString() + "px";
if (num2 != 0)
{
num2 = num2-3;
setTimeout("jump1b()",50);
}
else
{
jump2();
}
}

function jump2()
{
txt = "";
for(i=0;i != message.length; i++)
{
if (i+num > -1 && i+num < 7)
{
txt = txt + "<span style='position:relative;top:" + mes[i+num] + "px'>" + message.charAt(i) + "</span>";
}
else
{
txt = txt + "<span>" + message.charAt(i) + "</span>";
}
}
jump = document.getElementById("jumping_letters");
jump.innerHTML = txt;
txt = "";
if (num != (-message.length))
{
num--;
setTimeout("jump2()",50);
}
else
{
num=0;
setTimeout("jump0()",50);
}
}
jump0();

</script>

Step 2 : change The Red with your text.
That's all, if you have any question just put it in comment form *_*.

Oftentimes, we want to make a certain text appear in a different way, or to make it move to attract the attention of visitors, In this post , you will be able

Share this :

Company

More info


100%	0%