This is exactly what it says - a customizer for raindrops over a window with changeable cityscape backgrounds. Pretty cool and definitely useful for many artsy visualization projects.
A Pen by Sander Nizni on CodePen.
- raindrops=(1..200) | |
%input.focus#focusDrops{:type => "radio", :name=>"focus"} | |
%label{:for => "focusDrops"} Focus: raindrops | |
%input.focus#focusBG{:type => "radio", :name=>"focus"} | |
%label{:for => "focusBG"} Focus: city | |
%input.focus#focusBoth{:type => "radio", :name=>"focus", :checked => "checked"} | |
%label{:for => "focusBoth"} Focus: average | |
%br | |
- (1..5).each do |i| | |
- checked=i==1 | |
- warning=i==5?"(animated)":"" | |
%input.image{:type => "radio", :name=>"image", :id => "image#{i}", :checked => checked} | |
%label{:for => "image#{i}"} Pic #{i} #{warning} | |
.disclaimer | |
%a{:href => "http://hyperabsolute.com"} . | |
.container | |
.window <!-- As in a physical window, not a computer window--> | |
.raindrops | |
.borders | |
- raindrops.each do | |
.border | |
.drops | |
- raindrops.each do | |
.raindrop |
This is exactly what it says - a customizer for raindrops over a window with changeable cityscape backgrounds. Pretty cool and definitely useful for many artsy visualization projects.
A Pen by Sander Nizni on CodePen.
/* NO JS AND NO BS - ONLY CSS - ENJOY! | |
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 | |
*/ | |
social("codepen/sander-nizni", | |
"twitter/hyperabsolute", | |
"linkedin/sandernizni", | |
"instagram/hyperabsolute", | |
"facebook/sander.nizni", | |
"/sandernizni.wordpress.com", | |
"light", "Sander says... Try it in full screen, dawg."); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="http://codepen.io/Sander-Nizni/pen/mPoOjg"></script> |
@import "compass/css3"; | |
$images: | |
'http://hyperabsolute.com/_Codepen/RainDropCustomizer/RainDropBackgroun01.jpg', | |
'http://hyperabsolute.com/_Codepen/RainDropCustomizer/RainDropBackgroun02.jpg', | |
'http://hyperabsolute.com/_Codepen/RainDropCustomizer/RainDropBackgroun03.jpg', | |
'http://hyperabsolute.com/_Codepen/RainDropCustomizer/RainDropBackgroun04.jpg', | |
'http://hyperabsolute.com/_Codepen/RainDropCustomizer/RainDropBackgroun05.gif'; | |
$width:100vw; | |
$height:100vh; | |
$raindrops:200; | |
body{ | |
background:#111; | |
font-family:Helvetica, Arial, sans-serif; | |
font-size:0; | |
} | |
a{ | |
color:inherit; | |
} | |
.container{ | |
width:$width; | |
height:$height; | |
position:absolute; | |
top:0; | |
left:0; | |
right:0; | |
bottom:0; | |
margin:auto; | |
overflow:hidden; | |
transform:rotateY(0); | |
} | |
.window{ | |
background:url(nth($images,1)); | |
background-size:cover; | |
background-position:50%; | |
width:100%; | |
height:100%; | |
transform:rotateY(0); | |
transition:-webkit-filter 600ms; | |
} | |
.raindrops{ | |
width:$width; | |
height:$height; | |
//background:transparentize(white,0.9); | |
position:absolute; | |
top:0; | |
left:0; | |
transform:rotateY(0); | |
transition:-webkit-filter 600ms; | |
} | |
.borders{ | |
position:absolute; | |
} | |
@keyframes raindrop-fall{ | |
0% { | |
opacity:0; | |
transform:rotate(180deg) scale(2.5,2.3) rotateY(0); | |
} | |
100% { | |
opacity:1; | |
transform:rotate(180deg) scale(1,1) rotateY(0); | |
} | |
} | |
$raindrop-fall-transition:10ms cubic-bezier(0.175, 0.885, 0.320, 1.275); | |
.raindrop{ | |
background:black; | |
background-image:url(nth($images,1)); | |
background-size:$width*0.05 $height*0.05; | |
position:absolute; | |
border-radius:100%; | |
transform:rotate(180deg) rotateY(0); | |
transition:background-size 1s; | |
opacity:0; | |
animation:raindrop-fall $raindrop-fall-transition; | |
animation-fill-mode:forwards; | |
} | |
.raindrop:hover{ | |
background-size:600%; | |
} | |
.border{ | |
position:absolute; | |
box-shadow:0 0 0px 2px rgba(0,0,0,1); | |
border-radius:100%; | |
margin-left:2px; | |
margin-top:1px; | |
opacity:0; | |
animation:raindrop-fall $raindrop-fall-transition; | |
animation-fill-mode:forwards; | |
} | |
@for $i from 1 through $raindrops+1{ | |
$x:random(); | |
$y:random(); | |
$size:2+random(11); | |
$stretch:random(20)/100; | |
$drop-height:$size*(1+$stretch); | |
$delay:(random())*30s; | |
$transition:300ms; | |
.raindrop:nth-child(#{$i}){ | |
left:$x*$width; | |
top:$y*$height; | |
width:$size+px; | |
height:$drop-height+px; | |
background-position:#{($x*100)+"%"} #{($y*100)+"%"}; | |
animation-delay:$delay; | |
} | |
.border:nth-child(#{$i}){ | |
left:($x*$width); | |
top:($y*$height); | |
$shadow-size:(($size*0.3) - 1px); | |
width:($size - ($shadow-size*2)); | |
height:($drop-height - 0)+px; | |
box-shadow:0 0 0 $shadow-size rgba(0,0,0,0.6); | |
animation-delay:$delay; | |
} | |
} | |
%control{ | |
display:none; | |
&+label{ | |
position:relative; | |
z-index:2; | |
display:inline-block; | |
background:#fff; | |
text-transform:uppercase; | |
font-size:10pt; | |
height:30px; | |
line-height:30px; | |
padding-left:20px; | |
padding-right:20px; | |
cursor:pointer; | |
font-weight:bold; | |
transition:color 100ms; | |
border-right:1px solid #ccc; | |
&:hover{ | |
color:#36518f; | |
} | |
} | |
&:checked+label{ | |
color:#0088ff | |
} | |
} | |
.focus{ | |
@extend %control; | |
} | |
.image{ | |
@extend %control; | |
&+label{ | |
padding-left:22px; | |
padding-right:21px; | |
background:#222; | |
color:white; | |
border-right:1px solid #333; | |
} | |
} | |
#focusDrops:checked~.container .raindrops{ | |
@include filter(blur(0px) brightness(1.3)); | |
} | |
#focusDrops:checked~.container .window{ | |
@include filter(blur(5px)); | |
} | |
#focusBG:checked~.container .raindrops{ | |
@include filter(blur(2px) brightness(1.3)); | |
} | |
#focusBG:checked~.container .window{ | |
@include filter(blur(0)); | |
} | |
#focusBoth:checked~.container .raindrops{ | |
@include filter(blur(1px) brightness(1.3)); | |
} | |
#focusBoth:checked~.container .window{ | |
@include filter(blur(2px)); | |
} | |
@for $i from 1 through length($images){ | |
#image#{$i}:checked~.container .window, | |
#image#{$i}:checked~.container .raindrop{ | |
background-image:url(nth($images,$i)); | |
} | |
} | |
.disclaimer{ | |
color:#999; | |
z-index:2; | |
position:absolute; | |
bottom:35px; | |
left:35px; | |
text-transform:uppercase; | |
text-decoration:none; | |
font-weight:normal; | |
font-size:55px; | |
} | |
/* | |
SOCIAL STYLES APPEAR BELOW. | |
ALSO REMEMBER TO REFERENCE THE JS URL IN THE JS PAN SETTINGS: http://codepen.io/Sander-Nizni/pen/mPoOjg | |
*/ | |
#social-container { | |
opacity: 8.8; | |
bottom: 5px; | |
right: 5px; | |
} | |
#social-container p{ | |
padding-bottom: 0; | |
margin-bottom: 0; | |
} | |
#social-container #social-links a { | |
font-size: 3.9rem; | |
} | |
#social-message { | |
font-size: 1.07rem; | |
} |