Simple Animated HTML: Difference between revisions

From XPUB & Lens-Based wiki
(Created page with "<source lang="html4strict"> <!DOCTYPE html> <html> <head> </head> <body style="background: black"> <!-- I am HTML! --> <div class="star" style="position:absolute;top:100px;le...")
 
No edit summary
 
Line 43: Line 43:
</html>
</html>
</source>
</source>
[[Category:Cookbook]][[Category:Animation]][[Category:HTML]]

Latest revision as of 09:18, 14 May 2014

<!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>