ਕਿਵੇਂ ਬਣਾਓ: JavaScript HTML ਐਨੀਮੇਸ਼ਨ
ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਾਹੀਂ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਸਿੱਖੋ
ਇੱਕ ਮੁੱਢਲੀ ਵੈੱਬਸਾਈਟ
ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਾਹੀਂ 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 (/* test for finished */) {
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';
{}
{}
{}
