Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/.block

Last active January 5, 2017 22:57
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 jalapic/252a35ee1b4ee336c3f45dc94752bb04 to your computer and use it in GitHub Desktop.
Save jalapic/252a35ee1b4ee336c3f45dc94752bb04 to your computer and use it in GitHub Desktop.
Download ZIP
night sky
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
*, *:after, *:before {
box-sizing: border-box;
}
body {
background-color: #000;
margin: 0;
}
.canvas {
overflow: hidden;
// relative, absolute
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.foreground {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('http://www.sketchworld.de/images/trees2.png') repeat-x left bottom;
background-size: 10%;
color: white;
text-align: center;
padding-top: 20px;
font-size: 20px;
}
.sky {
height: 300%;
width: 300%;
position: absolute;
top: -100%;
left: -100%;
margin-top: (100% / 2);
background-color: darkblue;
background:-webkit-radial-gradient(center, rgba(0,0,70,1) 0%, #000 60%);
-webkit-animation: rotate 250s infinite linear;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
}
.star-blink {
$Size: 7px;
position: absolute;
width: $Size;
height: $Size;
background-color: #b6cbd4;
border-radius: 50%;
z-index: 0;
-webkit-transform: rotate(0deg) scale(0.08);
-webkit-backface-visibility: hidden;
-webkit-animation: blinkAfter 15s infinite ease-out;
div {
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform: rotate(45deg) scale(0.75);
box-shadow: 0 0 2px 8px rgba(0,0,0,0.4),
0 0 2px 9px rgba(255,255,255,0.07),
0 0 2px 15px rgba(0,0,0,0.4),
0 0 2px 16px rgba(255,255,255,0.1);
-webkit-backface-visibility: hidden;
}
// NOT Relevant
//top: 25%;
//left: 25%;
$height: 800%;
&:after, &:before, div:after, div:before {
$width: 10%;
$color: #b6cbd4;
content: '';
position: absolute;
display: block;
top: -($height / 2 - 50%);
left: (50% - ($width / 2));
height: $height;
width: $width;
border-radius: 50%;
background-color: $color;
background:-webkit-linear-gradient(
top,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.7) 50%,
rgba(255,255,255,0.1) 100%);
z-index: 1;
box-shadow: 0 0 25px white;
-webkit-backface-visibility: hidden;
}
&:after {
}
&:before, div:before {
-webkit-transform: rotate(90deg);
}
&.blue {
&:after, &:before, div:after, div:before {
box-shadow: 0 0 25px rgba(0,0,255,1);
}
}
&.red {
&:after, &:before, div:after, div:before {
box-shadow: 0 0 25px rgba(255,0,0,1);
}
}
}
@-webkit-keyframes blinkAfter {
0% {
-webkit-transform: rotate(0deg) scale(0.08);
}
4% {
-webkit-transform: rotate(-20deg) scale(0.9);
}
8% {
-webkit-transform: rotate(-40deg) scale(0.08);
}
50% {
-webkit-transform: rotate(-40deg) scale(0.08);
}
52% {
-webkit-transform: rotate(-50deg) scale(0.3);
}
54% {
-webkit-transform: rotate(-60deg) scale(0.08);
}
100% {
-webkit-transform: rotate(0deg) scale(0.08);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="canvas">
<div class="sky"></div>
<div class="foreground"></div>
</div>
<script>
var amount = 800;
var sky = $('.sky');
for (var i = 0 ; i < amount ; i++ ) {
var s = $('<div class="star-blink"><div></div></div>');
s.css({
'top': Math.random() * 100 + '%',
'left': Math.random() * 100 + '%',
'animation': 'blinkAfter 15s infinite ' + Math.random() * 100 + 's ease-out',
'width': Math.random() * 2 + 7 + 'px',
'height': Math.random() * 2 + 7 + 'px',
'opacity': Math.random() * 5 / 10 + 0.5
});
if (i % 8 === 0) {
s.addClass('red');
} else if (i % 10 === 6) {
s.addClass('blue');
}
sky.append(s);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment