Skip to content

Instantly share code, notes, and snippets.

@hyperabsolute
Created September 5, 2016 18:54
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hyperabsolute/58d5ff7ee297bafc356f2b40c05b0518 to your computer and use it in GitHub Desktop.
Save hyperabsolute/58d5ff7ee297bafc356f2b40c05b0518 to your computer and use it in GitHub Desktop.
Pure CSS Cityscape Rain Drop Customizer
- 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

Pure CSS Cityscape Rain Drop Customizer

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.

License.

/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment