Scribd
Upload
2 views

Web Design 4th Assignment

This document contains an HTML assignment for a Web Design and Development course by Tasmiya Taimoor. It includes a button that triggers an animation of a div element moving diagonally within a container. The animation changes direction upon reaching the edges of the container.

Uploaded by

tasmiya.taimoor
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Web Design 4th Assignment

This document contains an HTML assignment for a Web Design and Development course by Tasmiya Taimoor. It includes a button that triggers an animation of a div element moving diagonally within a container. The animation changes direction upon reaching the edges of the container.

Uploaded by

tasmiya.taimoor
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Name: Tasmiya Taimoor

Sap ID: 13700


Course: Web Design and Development

Assignment#4
<!DOCTYPE html>
<html>
<style>
#container {
width: 490px;
height: 490px;
position: relative;
background: black;
}
#animate {
width: 120px;
height: 120px;
position: absolute;
background-image: url('nature.jpg');
background-size: cover;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p>

<div id="container">
<div id="animate"></div>
</div>

<script>
let direction = 1; // 1 for moving right, -1 for moving left
let pos = 0; // initial position
let id = null;

function myMove() {
const elem = document.getElementById("animate");
if (id === null) { // Check if animation is already running
id = setInterval(frame, 5);
}
}

function frame() {
if (pos == 350) {
direction = -1; // Change direction to move left
} else if (pos === 0) {
direction = 1; // Change direction to move right
clearInterval(id); // Stop the animation
id = null; // Reset the interval ID
}

pos += direction; // Update position based on direction


const elem = document.getElementById("animate");
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
</script>

</body>
</html>

You might also like