Simple Animated HTML: Difference between revisions
(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>