افکت متن در جی کوئری
افکت 1
این کد رو دیافت کنید و در قسمت head سایت قرار بدید و بعد کد زیر را در متن استفاده کنید
دریافت کد
دمو
| نمونه |
|---|
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Text-shadow in IE with jQuery</title>
<meta name="author" content="Kilian Valkhof" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.textshadow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1,p.shadow").textShadow();
});
</script>
</head>
<body>
<div id="wrap">
<h1>H1 with shadow</h1>
<p class="shadow"><strong>This paragraph has text-shadow.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet turpis. Phasellus rutrum ligula tristique massa. Nulla vitae augue. Aenean vel nibh ut erat ultrices consequat. Nunc venenatis tempus pede. In commodo nibh sit amet nisl. Phasellus consectetuer consectetuer justo. Duis ultrices, neque sed porttitor ultrices, mi orci semper nisi, in ultrices ligula sem vel purus. Phasellus in justo. Mauris lorem tellus, convallis nec, vehicula nec, tincidunt vel, eros. Donec vulputate, erat sit amet interdum gravida, tortor metus consequat massa, eu facilisis nunc felis ac ante. Praesent ac lectus non tortor tempor aliquet. Vestibulum a mi quis libero condimentum laoreet. Nullam rhoncus, odio ac ultrices luctus, quam purus laoreet metus, quis adipiscing massa sapien eget massa.</p>
<p><a href="#" onclick="$('h1').removeTextShadow()">remove the shadow from the h1</a> - <a href="#" onclick="$('h1').textShadow()">set the shadow on the h1</a></p>
<p class="span footer">Go back to the article: <a href="http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/">Text-shadow in IE with jQuery</a><br />
Download the plugin: <a href="jquery.textshadow.js">jquery.textshadow.js</a> <br />Kilian Valkhof</p>
</div>
</body>
</html>
|
افکت 2
فکت کاربردی تایپ
دریافت
| نمونه |
|---|
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Text-shadow in IE with jQuery</title>
<meta name="author" content="Kilian Valkhof" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="javascripts/jquery.text-effects.js"></script>
<script type="text/javascript">
$(document).ready(function(){
'$("#typewriter").typewriter();
});
</script>
</head>
<body>
<div id='typewriter'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
|
خیلی جالب
افکت 3
افکت کاربردی
دریافت
| نمونه |
|---|
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Text-shadow in IE with jQuery</title>
<meta name="author" content="Kilian Valkhof" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="javascripts/jquery.text-effects.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my-container").scrambledWriter();
});
</script>
</head>
<body>
<div id='my-containerr'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
|
اینم خیلی جالبه
افکت 4
دریافت
دمو
افکت 5
دمو
افکت6
بسیار زیبا متن متحرک پرنده
دمو
افکت 7
فکت بسیار بسیار زیبا
| نمونه |
|---|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flying Text</title>
<script src="jquery-1.2.6.js" language="javascript"></script>
<script>
$(document).ready(function(){
$('.container .flying-text').css({opacity:0});
$('.container .active-text').animate({opacity:1, marginLeft: "350px"}, 4000);
var int = setInterval(changeText, 5000);
function changeText(){
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
$activeText.animate({opacity:0}, 1000);
$activeText.animate({marginLeft: "-100px"});
$nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "350px"}, 4000, function(){
$activeText.removeClass('active-text');
});
}
});
</script>
<style>
body{
background-color:#000;
}
.container{
background-color:#000;
width:500px;
margin:0 auto;
color:#FFF;
overflow:hidden;
}
.flying-text{
margin-left:-100px;
}
</style>
</head>
<body>
<div class="container">
<h3 class="flying-text active-text">I believe</h3>
<h3 class="flying-text">I can</h3>
<h3 class="flying-text">Fly</h3>
</div>
</body>
</html>
|