Log In

Email:
Password:
Keep me logged in

Forgot Password

Email:




Social Media
     
CategoriesCSS (5)
jQuery (73)
PHP (30)
.htaccess (4)
Sponsored Links


Glowing Text
CSS jQuery Javascript
Demo | Browse Category | Friday, February 10, 2012 by




jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var mn = 3; //MINIMUM SHADOW BLUR
var mx = 10; //MAXIMUM SHADOW BLUR
var loop = (mx-mn)+1; //LOOP GOING UP AND DOWN
var x = -1; //CONSTANT INCREMENTING VARIABLE
var p = mn-1; //MINIMUM SHADOW BEFORE FUNCTION (MUST 1 LESS THAN "var mn")
function glow(){
var v = $('#t').val(); //INPUT STRING
x++; //CONSTANTLY INCREMENTING
var g = (x%(loop*2)); //TO KEEP THE PIXELS GOING UP AND DOWN SMOOTHLY

//IF AT THE MINIMUM, EXPAND SHADOW
if(g>=0&&g<=loop-1){
if(g==0){
p = mn-1;
}
p++;
}
//IF AT THE MAXIMUM, DIMINISH SHADOW
if(g>=loop&&g<=(loop*2)-1){
if(g==loop){
p = mx+1;
}
p--;
}

//ALTERS THE CSS OF THE TEXT, EVERY 150 MILLISECONDS
$("#glo_txt").css({"text-shadow":"0 0 "+p+"px #12495d"});
setTimeout("glow()", 150);
}
glow(); //RUNS THE FUNCTION UPON PAGE LOAD
</script>
<style>
#glo_txt {
color: #ffffff;
font-size: 36px;
font-weight: bold;
text-shadow: 0 0 3px #12495d;
}
</style>
</head>
<body>
<input id="t" value="Enter text"><br>
<span id="glo_txt"></span><br><br>
</body>
</html>
Views: 132 Likes: 0 Dislikes: 0






wcet2011
fgdfdsfds

Friday, Febuary 10, 2012 at 7:43:09 AM