Skip to content

Instantly share code, notes, and snippets.

@superterran

superterran/starfield.html

Created August 20, 2017 18:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save superterran/b534c116eb4088c728dfb68f69cd7170 to your computer and use it in GitHub Desktop.
Save superterran/b534c116eb4088c728dfb68f69cd7170 to your computer and use it in GitHub Desktop.
Download ZIP
a little starfield demo I wrote initially as a codepen
Raw
starfield.html
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style type="text/css">
#space {
display: block;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: black;
}
.star {
opacity: .0;
border-radius: 100%;
display: block;
width: 1px;
height: 1px;
background-color: white;
position: absolute;
}
</style>
</head>
<body>
<div id="space"></div>
<script>
var stars = {
y: $('#space').height() / 2,
x: $('#space').width() / 2,
init: function() {
setInterval(function() {
this.create()
}.bind(this), 20)
},
rand: function(number) {
if(number == 'sign') {
sign = Math.floor(Math.random() * 2) + 1
if(sign == 1) return "+"; else return "-";
}
return Math.floor(Math.random() * number) + 1
},
create: function() {
d = document.createElement('div');
starid = '#star'+this.rand(1000);
$(d).addClass('star')
.addClass(starid)
.css({
top: this.y,
left: this.x,
})
.appendTo($("#space"))
.animate({
opacity: 1,
left: this.rand('sign')+"="+(this.rand($('#space').width()) +($('#space').width() / 2)),
top: this.rand('sign')+"="+(this.rand($('#space').height()) +($('#space').height() / 2)),
height: (rand = (this.rand(10)+10))+"px",
width: rand+"px",
}, this.rand(4000)+1000)
.animate({ opacity: 0}, 1000, function() { $(this).remove()})
}}
stars.init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment