انیمیشن HTML DOM در JavaScript

برای ایجاد انیمیشن های HTML با استفاده از جاوا اسکریپت  را یاد بگیرید.

یک صفحه وب پایه

برای نشان دادن نحوه ایجاد انیمیشن های HTML با جاوا اسکریپت، از یک صفحه وب ساده

صفحه ساده
<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id="animation">My animation will go here</div>

</body>
</html>
مشاهده مثال

یک Container انیمیشن ایجاد کنید

تمام انیمیشن ها باید نسبت به عنصر Container  باشند.

<div id ="container">
<div id ="animate">My animation will go here</div>
</div>

استایل عناصر

عنصر Container  باید با style = "position: relative" ایجاد شود.

عنصر animation باید با style = "position: absolute" ایجاد شود.

استایل برای عناصر
#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}
مشاهده مثال

کد انیمیشن

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

var id = setInterval(frame, 5);
function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}

ایجاد انیمیشن با استفاده از جاوا اسکریپت

ایجاد انیمیشن با استفاده از جاوا اسکریپت
function myMove() {
    var elem = document.getElementById("animate");
    var pos = 0;
    var id = setInterval(frame, 5);
    function frame() {
        if (pos == 350) {
            clearInterval(id);
        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
        }
    }
} 
مشاهده مثال

 

نظر شما

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

یادگیری JavaScript

مقالات و دروس

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

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

مقالات مرتبط