Home > JQuery > Text Effects In jQuery

Text Effects In jQuery

Font Effect with JQuery : We can use sample code for font effect by JQuery.

Font effect is a jQuery plugin that add some effect to html text.
The available effects are (for now) Outline, Shadow, Gradient and Mirror, here is an example:

download the plugin here

Below Code :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
<script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>
<script type=”text/javascript” src=”js/jquery-FontEffect-1.0.0.min.js”></script>

<script type=”text/javascript”>
$(document).ready(function(){

$(‘#example1’).FontEffect({ shadow:true, shadowColor:”#f00″, shadowOffsetTop:4, shadowOffsetLeft:4, shadowOpacity:1, outline:true, outlineColor1:”#fff”, outlineWeight:2 })

$(‘#example2’).FontEffect({ outline:true, shadow:true, mirror:true, gradient:true, gradientColor:”#f00″ })
$(‘#example3’).FontEffect({ gradient:true, mirror:true, mirrorColor:”#298d79″ })

});
</script>
<style type=”text/css”>

#example1{ font-family :”verdana”; font-weight :bold; color :#5a7; font-size :3em; }
#example2{ font-family:”Arial”; font-weight:bold; margin-bottom:30px; font-size:60px; color:#fff; }
#example3{ font-family:”Impact”; font-size:3em; margin-bottom:30px; color:#9ae; }

</style>

</head>
<body>

<div id=”example1″>
Enter Your Text Here
</div>

<div id=”example2″>
Mohammad Arif Hossen
</div>

<!– Gradient &amp; Mirror  –>
<div id=”example3″>
Jquery Text Effect
</div>

</body>
</html>

Advertisements
Categories: JQuery
  1. January 13, 2010 at 6:57 am

    nice arif!! I will try it soon 🙂

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: