Text highlighting effect

Written by @kerixa 24 February 2014

By this code, you can add highlight animating to your text and have a good text effect in your web page. Proper for heading texts and big size 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">
var fifteenth = 'Your Text Here'; var sixteenth = 'red'; var seventeenth = 'yellow'; var eighteenth = '30'; var nineteenth = 150;var twentieth = 0;var first2;
document.write('<div id=second2></div>');
function sixth2()  {
fifth2 = '<font size=' + eighteenth + '><font color=' + sixteenth + '>';
for (var first2 = 0; first2 < fifteenth.length; first2++) {
if( first2 == twentieth) {fifth2 += '<font color=' + seventeenth + '>' + fifteenth.charAt(twentieth) + '</font>';}else {fifth2 += fifteenth.charAt(first2);   }}fifth2 += '</font></font>';document.getElementById("second2").innerHTML = fifth2;(twentieth == fifteenth.length) ? twentieth=0 : twentieth++; }setInterval('sixth2()', nineteenth);
</script>


<div id='twentieth' style='position: absolute; top: -65; color: red; font-family: "Courier New", Courier, mono; font-weight:bold; font-size:40px;'>Your Text Here</div>

<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:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300