محو کردن متون با jquery و css

محو کردن متون توسط jquery و CSS که در این نمونه تفاوت دو روش رو میتونید مشاهده کنید

آموزش استفاده

قبل از تگ </head> کد زیر را قرار دهید :

<style>
body{
direction:rtl;	
}
* { margin, padding: 0; }
h1 a {
display: block; 
text-decoration: none;
font:  100px Georgia, sans-serif;
letter-spacing: -5px;  
text-align: center;
color: transparent; text-shadow: 0px 0px 1px #FF33FF;
}
h2{
text-align: center;
font: 40px Georgia, sans-serif;
}
.blur{
display: block; 
text-decoration: none;
font:  100px Georgia, sans-serif;
letter-spacing: -5px;  
text-align: center;
color: transparent; text-shadow: 0px 0px 1px #FF33FF;
}
.blur:hover{
text-shadow: 0px 0px 10px #FF33FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
var draw= false;
$(document).ready(function() {
$(document).mousemove(function(e) {
if(e.pageY> 230)
$("#d").css({'text-shadow': '0px 0px '+(( e.pageY - 230) / 18)+'px #FF33FF'})
else
$("#d").css({'text-shadow': '0px 0px 0px #FF33FF'})
});
});
</script>

بعد از تگ <body> کد زیر را قرار دهید :

<h1><a href="#" id="d">با جی کوئری</a></h1>
<h1><a href="#" class="blur">با css</a></h1>
<h2>ماوس خود را ببرید</h2>

دیدگاه‌ خود را بنویسید لغو پاسخ