| #parallax | |
| .layer(data-depth="0.6") | |
| .some-space | |
| h1 C9H9NO3 (Adrenochrome) | |
| .layer(data-depth="0.4") | |
| #particles-js | |
| .layer(data-depth="0.3") | |
| .some-more-space | |
| a(href="http://codepen.io/Sander-Nizni" target="_blank") Adrenochrome? But why!?! |
You didn't know this was adrenochrome? No one did. But this visualization is a valid hypothesis. If this doesn't sit well with you, think of this visualization as something else, such as alcohol or ibuprofen... or a meringue pie.
A Pen by Sander Nizni on CodePen.
| /* | |
| SANDER SAYS: | |
| NO WARRANTIES EXPRESSED OR IMPLIED | |
| FOR USING THIS CODE. THIS OR SIMILAR | |
| CODE WAS WRITTEN BEFORE, AND IT WILL | |
| BE WRITTEN AGAIN... BUT IT DOESN'T | |
| MATTER - BECAUSE WE ARE IN THIS | |
| TOGETHER. EVERY PATH IS THE RIGHT | |
| PATH: EVERYTHING COULD HAVE | |
| BEEN ANYTHING ELSE, AND IT WOULD | |
| HAVE JUST AS MUCH MEANING. | |
| COMPLIMENTS? PARTY INVITATIONS? | |
| RIGHT ON! CONTACT @HYPERABSOLUTE ON | |
| TWITTER OR ON UXRIG.COM | |
| STAY AWESOME | HYPERABSOLUTE | |
| */ | |
| $('#parallax').parallax({ | |
| invertX: true, | |
| invertY: true, | |
| scalarX: 10, | |
| frictionY: .1 | |
| }); | |
| particlesJS("particles-js", { | |
| "particles": { | |
| "number": { | |
| "value": 90, | |
| "density": { | |
| "enable": true, | |
| "value_area": 800 | |
| } | |
| }, | |
| "color": { | |
| "value": "#cc3300" | |
| }, | |
| "shape": { | |
| "type": "circle", | |
| "stroke": { | |
| "width": 0, | |
| "color": "#000000" | |
| }, | |
| "polygon": { | |
| "nb_sides": 7 | |
| }, | |
| "image": { | |
| "src": "img/github.svg", | |
| "width": 100, | |
| "height": 100 | |
| } | |
| }, | |
| "opacity": { | |
| "value": 0.75, | |
| "random": false, | |
| "anim": { | |
| "enable": false, | |
| "speed": 1, | |
| "opacity_min": 0.3, | |
| "sync": false | |
| } | |
| }, | |
| "size": { | |
| "value": 3, | |
| "random": true, | |
| "anim": { | |
| "enable": false, | |
| "speed": 40, | |
| "size_min": 0.1, | |
| "sync": false | |
| } | |
| }, | |
| "line_linked": { | |
| "enable": true, | |
| "distance": 135, | |
| "color": "#ffffff", | |
| "opacity": 0.55, | |
| "width": 1.5 | |
| }, | |
| "move": { | |
| "enable": true, | |
| "speed": 6, | |
| "direction": "none", | |
| "random": false, | |
| "straight": false, | |
| "out_mode": "out", | |
| "bounce": false, | |
| "attract": { | |
| "enable": false, | |
| "rotateX": 600, | |
| "rotateY": 1200 | |
| } | |
| } | |
| }, | |
| "interactivity": { | |
| "detect_on": "canvas", | |
| "events": { | |
| "onhover": { | |
| "enable": true, | |
| "mode": "grab" | |
| }, | |
| "onclick": { | |
| "enable": true, | |
| "mode": "push" | |
| }, | |
| "resize": true | |
| }, | |
| "modes": { | |
| "grab": { | |
| "distance": 140, | |
| "line_linked": { | |
| "opacity": 1 | |
| } | |
| }, | |
| "bubble": { | |
| "distance": 400, | |
| "size": 40, | |
| "duration": 2, | |
| "opacity": 8, | |
| "speed": 3 | |
| }, | |
| "repulse": { | |
| "distance": 200, | |
| "duration": 0.4 | |
| }, | |
| "push": { | |
| "particles_nb": 4 | |
| }, | |
| "remove": { | |
| "particles_nb": 2 | |
| } | |
| } | |
| }, | |
| "retina_detect": true | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="http://codepen.io/Sander-Nizni/pen/eZXBMW"></script> | |
| <script src="http://codepen.io/Sander-Nizni/pen/grELvy"></script> | |
| <script src="http://codepen.io/Sander-Nizni/pen/mPoOjg"></script> |
| @import url(http://fonts.googleapis.com/css?family=Lato:400,300,100) | |
| body | |
| font-family: 'Lato' | |
| background: #65378F | |
| overflow: hidden | |
| height: 100% | |
| width: 100% | |
| -webkit-font-smoothing: antialiased | |
| user-select: none | |
| #particles-js, #parallax, .layer, .some-space, .some-more-space | |
| height: 100% | |
| position: absolute | |
| width: 100% | |
| #particles-js | |
| opacity: .8 | |
| h1 | |
| color: white | |
| font-size: 4.3em | |
| font-weight: 500 | |
| letter-spacing: .0666em | |
| position: absolute | |
| top: 30% | |
| left: 55% | |
| transform: translate3d(-50%,-50%,0) | |
| a | |
| color: white | |
| border: 1px solid #cecece | |
| display: table | |
| position: absolute | |
| top: 60% | |
| left: 55% | |
| letter-spacing: .05em | |
| transform: translate3d(-50%,-50%,0) | |
| text-decoration: none | |
| transition: all 200ms ease | |
| padding: 10px 15px | |
| &:hover | |
| background: white | |
| color: black | |
| .some-space | |
| animation: rotate 18s .5s infinite linear reverse | |
| .some-more-space | |
| animation: rotate 15s .1s infinite linear | |
| @keyframes rotate | |
| 0% | |
| transform: rotateZ(0deg) translate3d(0,1.5%,0) rotateZ(0deg) | |
| 100% | |
| transform: rotateZ(360deg) translate3d(0,1.5%,0) rotateZ(-360deg) |