In this post you will learn to create an animated message using JavaScript. The effect I have created in this message is also known as neon light text effect.
By adding this animated neon light text you may greet the visitors of your website or you may draw the attention on any notice and/or important message.
All the codes you need is given below, I haven't used any hosted .js file. So feel free to add this text effect in your blog/website. You just need some simple customization to add your expected text.
But it's also possible if you want to customize the speed, color etc. Just follow the steps given below to create your own neon light text and to add them in your blog or website.
By adding this animated neon light text you may greet the visitors of your website or you may draw the attention on any notice and/or important message.
All the codes you need is given below, I haven't used any hosted .js file. So feel free to add this text effect in your blog/website. You just need some simple customization to add your expected text.
But it's also possible if you want to customize the speed, color etc. Just follow the steps given below to create your own neon light text and to add them in your blog or website.
First of all we will create a webpage to test the neon light text effect. Later we will add the necessary JavaScript codes to our blogger blog or website.
Step 01 Open the notepad text editor
First of all open the notepad text editor. To open notepad press the Windows Key+R together, the run command box will open. Now type notepad into the command box and press the Enter Key, a new notepad document will open.
Step 02 Add all the codes given below to the notepad document
Now copy all the codes given below and paste them to the notepad document. Then save the document as JavaScript.html. Press Ctrl+S to open the Save As window. To save the notepad document as an HTML file type the file name with .html or .htm extension and finally click on the Save button.
First of all open the notepad text editor. To open notepad press the Windows Key+R together, the run command box will open. Now type notepad into the command box and press the Enter Key, a new notepad document will open.
Step 02 Add all the codes given below to the notepad document
Now copy all the codes given below and paste them to the notepad document. Then save the document as JavaScript.html. Press Ctrl+S to open the Save As window. To save the notepad document as an HTML file type the file name with .html or .htm extension and finally click on the Save button.
<!DOCTYPE html>
<html>
<head>
<title>iDhali</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="text-align: center;">
<h1>
<script type="text/javascript">
var message = "Welcome Message";
var neonbasecolor = "gray";
var neontextcolor = "#2CA0EA";
//Lighter var flashspeed=100
var neontextcolor2 = "#5AB9F5";
//number of letters flashing in neontextcolor
var flashingletters = 3;
//number of letters flashing in neontextcolor2 (0 to disable)
var flashingletters2 = 1;
//the pause between flash-cycles in milliseconds
var flashpause = 0;
//speed of flashing in milliseconds
var flashspeed = 100;
var n = 0;
if (document.all || document.getElementById) {
document.write('<font color="' + neonbasecolor + '">');
for (m = 0; m < message.length; m++)
document.write('<span id="neonlight' + m + '">' + message.charAt(m) + '</span>');
document.write('</font>');
}
else
document.write(message);
function crossref(number) {
var crossobj = document.all ? eval("document.all.neonlight" + number) :
document.getElementById("neonlight" + number);
return crossobj;
}
function neon() {
if (n === 0) { //Change all letters to base color
for (m = 0; m < message.length; m++)
crossref(m).style.color = neonbasecolor;
} //cycle through and change individual letters to neon color
crossref(n).style.color = neontextcolor;
if (n > flashingletters - 1)
crossref(n - flashingletters).style.color = neontextcolor2;
if (n > (flashingletters + flashingletters2) - 1)
crossref(n - flashingletters - flashingletters2).style.color = neonbasecolor;
if (n < message.length - 1)
n++;
else {
n = 0;
clearInterval(flashing);
setTimeout("beginneon()", flashpause);
return;
}
}
function beginneon() {
if (document.all || document.getElementById)
flashing = setInterval("neon()", flashspeed);
}
beginneon();
</script>
</h1>
</div>
</body>
</html>
Step 03 Test the newly created HTML file
Locate the newly created JavaScript.html file and open it in Google Chrome/Mozilla Firefox or any other internet browser. You will get the animated neon light text.
Step 01: Log in to your blogger account, then click on Layout. Now click on Add a Gadget, a pop up window will open. From the window find out HTML/JavaScript gadget and click on that to add, another pop-up window will open.
Step 02: Now copy the JavaScript codes given inside <body> and </body>. Then paste the codes into the content box of the opened pop up window and click on the Save button.
Step 03: Finally place the newly added gadget where you want to show it and click on the button Save Arrangement. Click on View Blog to check the message if it is working or not.
N.B. Paste the codes inside a div where you want to show neon light animated text in your HTML and/or PHP website.
Adding neon light animated text
Step 01: Log in to your blogger account, then click on Layout. Now click on Add a Gadget, a pop up window will open. From the window find out HTML/JavaScript gadget and click on that to add, another pop-up window will open.
Step 02: Now copy the JavaScript codes given inside <body> and </body>. Then paste the codes into the content box of the opened pop up window and click on the Save button.
Step 03: Finally place the newly added gadget where you want to show it and click on the button Save Arrangement. Click on View Blog to check the message if it is working or not.
N.B. Paste the codes inside a div where you want to show neon light animated text in your HTML and/or PHP website.
No comments:
Post a Comment