پلاگین اختصاصی وب مهراز (webmehraz dancing word)

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

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

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مفاهیم طراحی وب

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط