پلاگین اختصاصی وب مهراز (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 در حافظه شما حک نشد ؟
 

نظر شما

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

PNG یا GIF؟ نکته های حیاتی برای انتخاب روش یادگیری بهتر CSS چگونه دکمه Like فیس بوک را روی وب سایت نصب کنیم؟ ربات وب سایت چیست؟ رنگ بندی وب سایت را چگونه انتخاب کنیم؟ چگونه یک منوی زیبای افقی با CSS3 بسازیم؟ ساخت دکمه حبابی متحرک ایجاد جعبه تصاویر زیبا با CSS3 ایجاد فرم تماس زیبا با HTML5 و CSS3 ساخت پنل افقی شناور با CSS انتخاب فرمت مناسب برای تصاویر در وب سایت ایجاد دکمه مثلثی با سایه توسط CSS فونت ها چگونه می توانند وب سایت شما را تحت تاثیر قرار دهند؟ ساخت یک منوی عمودی فوق العاده زیبا ساخت جدول قیمت گذاری با css3 ساخت منوی کشویی با جعبه جستجو در CSS و HTML تبدیل template انگلیسی به template فارسی | آموزش css 4 نکته برای ساده کردن طراحی صفحات وب پلاگین اختصاصی وب مهراز (webmehraz dancing word) ویژگی های جدید در CSS4 ایجاد شکل های مختلف با CSS – سری اول ایجاد شکل های مختلف با CSS – سری دوم ساخت منو زیبا و کارآمد به همراه TAB سازگاری طراحی واکنشی وب با Cross-browser بدترین طراحی های وب که باید از آنها دوری کرد بهینه سازی طراحی با استفاده از ترازبندی مناسب آموزش کاربردی طراحی وب (درس 1) طراحی واکنشی (Responsive) وب و چگونگی انجام آن – بخش اول طراحی واکنشی (Responsive) وب و چگونگی انجام آن – بخش دوم طراحی واکنشی (Responsive) وب و چگونگی انجام آن – بخش سوم 6 قانون اساسی در سال 2016 برای بهینه سازی وب سایت SEO

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز