Homework SourseCreate an app that does the following Can Use HTML 1 Starts
Create an app that does the following: Can Use( HTML)
1. Starts with a box 100px by 100px (red in color) on the top left corner of the screen.
2. Every time I click the button, make the box go to the next corner and randomly change color (animated)
use javascript mixed with webkit animations to transition the coordinates + the color of the box.
Solution
<!DOCTYPE html>
<html>
<head>
<style>
button {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: app;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: one;
-webkit-animation-direction: right-top;
animation-name: app;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-direction: right-top;
}
@-webkit-keyframes app {
0% {background-color:red; left:0px; top:0px;}
100% {background-color:yellow; left:200px; top:0px;}
}
</style>
<script>
function button() {
var elem = document.getElementById(\"button\"),
speed = 1,
currentPos = 0;
// Reset the element
elem.style.left = 0+\"px\";
elem.style.right = \"auto\";
var motionInterval = setInterval(function() {
currentPos += speed;
if (currentPos >= 200 && speed > 0) {
currentPos = 200;
speed = -2 * speed;
elem.style.width = parseInt(elem.style.width)*2+\"px\";
elem.style.height = parseInt(elem.style.height)*2+\"px\";
}
if (currentPos <= 0 && speed < 0) {
clearInterval(motionInterval);
}
elem.style.left = currentPos+\"px\";
},20);
}</script>
</head>
<body>
<div></div>
<button class=\"button\" button id=\"button\" onclick=\"@-webkit-keyframes app\">Click me</button>
</body>
</html>
