Neon text effect using Javascript

Submitted by jaredgwapo on Tuesday, January 26, 2016 - 14:59.
Language
JavaScript
In this tutorial, We will learn how to create a neon text effect that you can use in you projects or systems. Just download the source code bellow and follow the instructions.

INSTRUCTIONS

Copy this code and save it as index.php
  1. <style>
  2. body {
  3.        
  4.         background-color: black;
  5. }
  6. </style>
  7. <h2>
  8. <script language="JavaScript1.2">
  9.  
  10. var message="Welcome to Sourcecodester!"
  11. var neonbasecolor="white"
  12. var neontextcolor="yellow"
  13. var flashspeed=100  //in milliseconds
  14.  
  15. ///No need to edit below this line/////
  16.  
  17. var n=0
  18. if (document.all||document.getElementById){
  19. document.write('')
  20. for (m=0;m<message.length;m++)
  21. document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
  22. document.write('')
  23. }
  24. else
  25. document.write(message)
  26.  
  27. function crossref(number){
  28. var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
  29. return crossobj
  30. }
  31.  
  32. function neon(){
  33.  
  34. //Change all letters to base color
  35. if (n==0){
  36. for (m=0;m<message.length;m++)
  37. //eval("document.all.neonlight"+m).style.color=neonbasecolor
  38. crossref(m).style.color=neonbasecolor
  39. }
  40.  
  41. //cycle through and change individual letters to neon color
  42. crossref(n).style.color=neontextcolor
  43.  
  44. if (n<message.length-1)
  45. n++
  46. else{
  47. n=0
  48. clearInterval(flashing)
  49. setTimeout("beginneon()",1500)
  50. return
  51. }
  52. }
  53.  
  54. function beginneon(){
  55. if (document.all||document.getElementById)
  56. flashing=setInterval("neon()",flashspeed)
  57. }
  58. beginneon()
  59.  
  60.  
  61. </script>
  62. </h2>
Finally, you have created a neon text effect. For more informations and suggestions just comment below or email me at [email protected]

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.

Tags
Neon
neon text
neon text effect

Add new comment

About text formats
  • 136 views