امروز قصد بر این دارم یک روش برای به رخ کشیدن یک برند را معرفی کنم که نام آن کلمه رقصان (وب مهراز) می باشد:

نظرتان در مورد انیمیشن بالا چیست ؟آیااین انیمیشن نظر شما را جلب کرد؟ اگر می خواهید شما نیز نام وبسایت یا برند خود را با این انیمیشن به نمایش بگذارید در ادامه این مقاله با ما همراه باشید. اکنون شروع به قرار دادن کد ها در وبسایت خود بکنید. در صفحه 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>

فقط بجای حروف وب مهراز حروف برند خود را قرار دهید. حال وقت آن رسیده است به ظاهر و استایل کد های HTML برسیم. کد های CSS زیر را به سند CSS اضافه کنید:

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 وارد کنید.با استفاده از ساده ترین و پایه ای ترین کد های JQUERY کار خود را پایان خواهید داد.

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>

تمام شد. اکنون می توانید از رقصیدن کلمه خود لذت ببرید :)   همیشه روشی را پیش بگیرید که برند یا سایت خود را در حافظه مخاطبین خود جای دهید. حالا یک سوال از شما دارم؟ آیا نام (وب مهراز) webmehraz.ir در حافظه شما حک نشد ؟