انیمیشن جاوااسکریپت

هر زمان که یک وب سایت جدید ایجاد می کنید، می خواهید توجه کاربران خود را جلب کرده ، آنها را مشغول خود کرده و تجربه ای عالی را برای آنها فراهم کنید. یک روش عالی برای این کار این است که از انیمیشن جاوااسکریپت استفاده کنید .

انیمیشن های جاوا اسکریپت می توانند انواع مختلفی داشته باشند – یک جعبه محتوا با بارگذاری صفحه ، برخی از انیمیشن های متن دار خنده دار ، هر چیزی که می توانید تصور کنید. با این حال ، پر خراطی کردن وب سایت شما با انیمیشن های JS ممکن است باعث ایجاد وب سایت شود.

در این آموزش ، ایجاد یک انیمیشن ساده JavaScript DOM را یاد خواهید گرفت. ما همچنین جنبه هایی از HTML و CSS را مرور خواهیم کرد تا نحوه تنظیم یک چیدمان مناسب را توضیح دهیم.

نکات اصلی انیمیشن جاوااسکریپت:

• برای ایجاد یک انیمیشن HTML می توان از JavaScript استفاده کرد.
• عناصر کانتینر باید یک موقعیت نسبی داشته باشند و عناصر انیمیشن JS باید یک موقعیت مطلق داشته باشند.

مثالهای کد

بیایید کد اولیه خود را برای آنچه در نهایت یک انیمیشن جاوا اسکریپت خواهد بود ، بنویسیم.

<strong>An animation of JavaScript</strong>
<div id="animate">The location of the animation</div>

اکنون ، باید مکانی برای ایجاد کار خود داشته باشیم. با استفاده از کد زیر ، آن را در یک ظرف انیمیشن Javascript قرار می دهیم:

<div id="contain">
    <div id="animation">The location of the animation</div>
</div>

اکنون عنصر کانتینر را به موقعیت: نسبی و عنصر جاوا اسکریپت انیمیشن را به موقعیت: مطلق تنظیم می کنیم:

#container {
  width: 500px;
  height: 500px;
  position: relative;
  background: green;
}
#animate {
  width: 60px;
  height: 60px;
  position: absolute;
  background: red;
}

سبک یک عنصر با حرکت برنامه نویسی گام به گام تغییر می کند. یک تایمر آن تغییرات را صدا می زند. انیمیشن های مداوم جاوا اسکریپت با تنظیم یک فاصله زمانی کوتاه با استفاده از setInterval بدست می آیند:

var id = setInterval(frame, 6);

function frame() {
    if (/* test */) {
        clearInterval(id);
    } else {
        /* element style changes */  
    }
}

ایجاد انیمیشن جاوااسکریپت

ما هر مرحله را پوشش داده ایم ، و شما باید ایده های اساسی را درک می کردید. البته ، برای تقویت این دانش جدید ، باید سعی کنید آن را عملی کنید. از قطعه کد ارائه شده استفاده کنید ، الهام بگیرید و اولین نمونه های متحرک JavaScript خود را به تنهایی ایجاد کنید:

function myMove() {
    var el = document.getElementById("animate"); 
    var loc = 0;
    var ids = setInterval(frame, 6);
    function frame() {
        if (loc == 350) {
            clearInterval(ids);
        } else {
            loc++; 
            el.style.top = loc + 'px'; 
            el.style.left = loc + 'px'; 
        }
    }
}

خلاصه انیمیشن جاوا اسکریپت:

• برای ایجاد انیمیشن های HTML می توانید از JavaScript استفاده کنید.
• توجه و تعیین مقدار صحیح برای ویژگی موقعیت مهم است.
• می توانید از سبک برای سبک دادن به عناصر متحرک JavaScript خود به هر شکلی که دوست دارید استفاده کنید.