كيفية إنشاء: حركة جافا سكريبت HTML
- الصفحة السابقة ميزة التلوين النصي
- الصفحة التالية طول النص JS
تعلم كيفية إنشاء حركة باستخدام جافا سكريبت.
صفحة ويب أساسية
لعرض كيفية استخدام جافا سكريبت لإنشاء حركة HTML، يمكننا استخدام صفحة ويب بسيطة.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
<div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>
إعداد نمط العنصر
من أجل أن تصبح الحركة ممكنة، يجب أن يتم تحريك العنصر الحركي بشكل نسبي بالنسبة لـ 'المستوعب الأب'.
العنصر الحاوي يجب أن يستخدم style="position: relative" إنشاء
العنصر الحركي يجب أن يستخدم style="position: absolute" إنشاء
مثال
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
كود الحركة
يتم إنشاء حركة جافا سكريبت من خلال تغيير نمط العنصر بشكل تدريجي.
هذه التغيرات تتم من خلال إعداد جهاز التوقيت. عندما يكون فاصل جهاز التوقيت صغيرًا جدًا، تبدو الحركة متصلة.
الكود الأساسي هو:
مثال
var id = setInterval(frame, 5);
function frame() {
if (/* استعلام للتحقق من الإكمال */) {
clearInterval(id);
} else {
/* كود تغيير نمط العنصر */
}
}
استخدام جافا سكريبت لإنشاء حركة
مثال
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
- الصفحة السابقة ميزة التلوين النصي
- الصفحة التالية طول النص JS
