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
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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