|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

در صورتی که کلمه عبور خود را بروزرسانی کرده اید با کلمه عبور وارد حساب کاربری خود شوید.

شماره همراه خود را وارد کنید

ورود و ادامه

انیمیشن 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 یادگیری JavaScript

مقالات و دروس

برای پروژه‌ی خود مشاوره رایگان بگیرید

طراحی سایت، توسعه نرم‌افزار، اتوماسیون و شبکه؛ با کارشناسان شرکت نرم‌افزاری وب مهراز در ارتباط باشید.

درخواست مشاوره

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد