Skip to main content

Color Effect in Text using JavaScript


In this article, we are going to learn about Color Effect in Text using JavaScript. You can use this to your future projects or websites to attract the user. This is very simple kind of source code, you can easily change the base color, text color, and the flash speed in the text.

In our example, we have white color for the base, yellow color for the text, and 80 milliseconds for the flash speed.

This is the script source code that you can edit the color and the speed.

  1. <script language="JavaScript1.2">
  2. var message = "Welcome to Sourcecodester! Free source code."
  3. var neonbasecolor = "white"
  4. var neontextcolor = "yellow"
  5. var flashspeed = 80 //in milliseconds
  6. </script>

Complete Script Source Code

Kindly copy and paste this simple script source code to your BODY tag of your page. To have a great neon effect in your text.

  1. <script language="JavaScript1.2">
  2. var message = "Welcome to Sourcecodester! Free source code."
  3. var neonbasecolor = "white"
  4. var neontextcolor = "yellow"
  5. var flashspeed = 80 //in milliseconds
  6.  
  7. ///No need to edit below this line/////
  8. var n=0
  9. if (document.all||document.getElementById){
  10. document.write('')
  11. for (m=0;m<message.length;m++)
  12. document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
  13. document.write('')
  14. }
  15. else
  16. document.write(message)
  17.  
  18. function crossref(number){
  19. var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
  20. return crossobj
  21. }
  22.  
  23. function neon(){
  24. //Change all letters to base color
  25. if (n==0){
  26. for (m=0;m<message.length;m++)
  27. //eval("document.all.neonlight"+m).style.color=neonbasecolor
  28. crossref(m).style.color=neonbasecolor
  29. }
  30. //cycle through and change individual letters to neon color
  31. crossref(n).style.color=neontextcolor
  32. if (n<message.length-1)
  33. n++
  34. else{
  35. n=0
  36. clearInterval(flashing)
  37. setTimeout("beginneon()",1500)
  38. return
  39. }
  40. }
  41.  
  42. function beginneon(){
  43. if (document.all||document.getElementById)
  44. flashing=setInterval("neon()",flashspeed)
  45. }
  46. beginneon()
  47. </script>

Output

This is the output after constructing the script in your editor.

Result


Kindly click the "Download Code" button below for full source code. Thank very much. Enjoy coding.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.