A Sky Full of Stars
HTML
<div class="stars"></div>
SCSS
@import "compass/css3";
body {
background: linear-gradient(to left, #2980b9 , #2c3e50);
background-attachment: fixed;
overflow: hidden;
}
@keyframes rotate {
0% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0); }
100% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg); }
}
.stars {
transform: perspective(500px);
transform-style: preserve-3d;
position: absolute;
bottom: 0;
perspective-origin: 50% 100%;
left: 50%;
animation: rotate 90s infinite linear;
}
.star {
width: 2px;
height: 2px;
background: #F7F7B6;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0 -300px;
transform: translate3d(0,0,-300px);
backface-visibility: hidden;
}
JAVASCRIPT
$(document).ready(function() {
var stars = 800;
var $stars = $(".stars");
var r = 800;
for (var i = 0; i < stars; i++) {
var $star = $("<div/>").addClass("star");
$stars.append($star);
}
$(".star").each(function() {
var cur = $(this);
var s = 0.2 + (Math.random() * 1);
var curR = r + (Math.random() * 300);
cur.css({
transformOrigin: "0 0 " + curR + "px",
transform: " translate3d(0,0,-" + curR + "px) rotateY(" + (
Math.random() * 360) + "deg) rotateX(" + (Math.random() *
-50) + "deg) scale(" + s + "," + s + ")"
})
})
})
2 Responses