Simple Animated HTML
Revision as of 09:18, 14 May 2014 by Michael Murtaugh (talk | contribs)
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background: black">
<!-- I am HTML! -->
<div class="star"
style="position:absolute;top:100px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<div class="star"
style="position:absolute;top:150px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<div class="star"
style="position:absolute;top:200px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<div class="star"
style="position:absolute;top:250px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<div class="star"
style="position:absolute;top:300px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<div class="star"
style="position:absolute;top:350px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<div class="star"
style="position:absolute;top:400px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<div class="star"
style="position:absolute;top:450px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<div class="star"
style="position:absolute;top:500px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<div class="star"
style="position:absolute;top:550px;left:100px;width:1px;height:1px;background:#fffff0;font-size:1px"></div>
<script>
// I am javaascript!
var stars = document.getElementsByClassName("star");
window.setInterval(function () {
var x = parseInt(stars[0].style.left)
stars[0].style.left = (Math.random()*500)+ "px";
stars[1].style.left = parseInt(stars[1].style.left) + 1 + "px"
}, 10)
</script>
</body>
</html>