ورود به کارتابل مشتریان وب مهراز
پلاگین اختصاصی وب مهراز (webmehraz dancing word)
مفاهیم طراحی وب
تعداد بازدید :
15237
تاریخ و ساعت انتشار :
جمعه 20 فروردین 1395 22:44
امروز قصد بر این دارم یک روش برای به رخ کشیدن یک برند را معرفی کنم که نام آن کلمه رقصان (وب مهراز) می باشد:
نظرتان در مورد انیمیشن بالا چیست ؟آیااین انیمیشن نظر شما را جلب کرد؟ اگر می خواهید شما نیز نام وبسایت یا برند خود را با این انیمیشن به نمایش بگذارید در ادامه این مقاله با ما همراه باشید. اکنون شروع به قرار دادن کد ها در وبسایت خود بکنید. در صفحه HTML یا ASP و یا PHP خود این کد ها را قرار بدهید:HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>وب مهراز</title>
<!-- css افزودن سند -->
<link rel="WebmehrazCSS.css" type="text/javascript">
<!-- jquery افزودن کتابخانه -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jquery افزودن سند -->
<script src="WebmehrazJS"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td id="w01">W</td>
<td id="w02">E</td>
<td id="w03">B</td>
<td id="w04">M</td>
<td id="w05">E</td>
<td id="w06">H</td>
<td id="w07">R</td>
<td id="w08">A</td>
<td id="w09">Z</td>
<td id="w10">.</td>
<td id="w11">I</td>
<td id="w12">R</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS
#w01, #w02, #w03, #w04, #w05, #w06, #w07, #w08, #w09, #w10, #w11, #w12
{
width:50px;
height:50px;
text-align:center;
border-radius:30px;
font-family: 'Century Gothic' , Calibri;
font-size:25px;
}
#w01{ background:#ff0000; color:#fff;}
#w02{ background:#3dc129; color:#fff;}
#w03{ background:#ffd800; color:#fff;}
#w04{ background:#ff6a00; color:#fff;}
#w05{ background:#3366cc; color:#fff;}
#w06{ background:#a928a9; color:#fff;}
#w07{ background:#5e5959; color:#fff;}
#w08{ background:#52a184; color:#fff;}
#w09{ background:#472b52; color:#fff;}
#w10{ background:#ff4545; color:#fff;}
#w11{ background:#009911; color:#fff;}
#w12{ background:#30d1af; color:#fff;}
JQUERY
<script type="text/javascript">
$(document).ready(function () {
for (var i = 0 ; i < 400 ; i++) {
$("#w01").fadeIn(1750).fadeOut(1750);
$("#w02").fadeIn(1800).fadeOut(1700);
$("#w03").fadeIn(600).fadeOut(2900);
$("#w04").fadeIn(1500).fadeOut(2000);
$("#w05").fadeIn(700).fadeOut(2800);
$("#w06").fadeIn(2000).fadeOut(1500);
$("#w07").fadeIn(850).fadeOut(2650);
$("#w08").fadeIn(1750).fadeOut(1750);
$("#w09").fadeIn(1700).fadeOut(1800);
$("#w10").fadeIn(1550).fadeOut(1950);
$("#w11").fadeIn(1400).fadeOut(2100);
$("#w12").fadeIn(1500).fadeOut(2000);
}
});
</script>
نظر شما
>