Built with blockbuilder.org
Forked from here
To do:
- remake parts with d3.js
- adjust conditional CSS
Last active
January 5, 2017 22:57
-
-
Save jalapic/252a35ee1b4ee336c3f45dc94752bb04 to your computer and use it in GitHub Desktop.
night sky
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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