I need help creating a dynamic graphic for my school project using css, jquery, and html. I want to make a rectangle that moves across the screen, but I'm having trouble getting it to work properly. Despite trying different variations of the animate function, the rectangle remains stuck on the left side of the window.
Below is the code I have tried:
var derp = 20;
function scroll() {
var scrollLeft = Math.floor(Math.random() * 100);
$('#rectangle').animate({
left: scrollLeft "px",
}, derp, function() {
scroll();
});
}
setInterval(100, scroll());html,
body {
width: 100%;
height: 100%;
min-height: 100%;
}
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: right top;
background-size: cover;
}
.rectangle {
width: 20px;
height: 100%;
background: black;
}
#rectangle {
left: 10px;
position: absolute;
}
img,
div,
p,
body {
margin: 0px;
padding 0px;
}<div class="rectangle"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>