Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.container
.window
.raindrops
.borders
- (1..100).each do
.border
.drops
- (1..100).each do
.raindrop
// our background image.
// will be used for the window as well as
// the raindrops themselves
$image: 'http://i.imgur.com/xQdYC7x.jpg';
// container width and height.
// 100vw/vh so it fills the entire window
$width:100vw;
$height:100vh;
//number of raindrops
$raindrops:100;
body{
background:#222;
}
.container{
position:relative;
width:$width;
height:$height;
overflow:hidden;
}
.window{
position:absolute;
width:$width;
height:$height;
background:url($image);
background-size:cover;
background-position:50%;
filter:blur(10px);
}
// set all the containers to
// position:absolute, since
// they will overlap
.raindrops,
.borders,
.drops{
position:absolute;
}
// little brightness filter so our raindrops look shiny
.drops{
filter:brightness(1.2);
}
// general settings for all the
// raindrops and borders
.raindrop{
position:absolute;
border-radius:100%;
background-image:url($image);
background-size:$width*0.05 $height*0.05;
background-position:50%;
transform:rotate(180deg) rotateY(0);
}
.border{
position:absolute;
margin-left:2px;
margin-top:1px;
border-radius:100%;
box-shadow:0 0 0 2px rgba(0,0,0,0.5);
transform:rotateY(0);
}
// looping through each one of them
@for $i from 1 through $raindrops{
// generates a random number from 0 to 1, for the positioning
$x:random();
$y:random();
// Random raindrop size and stretching.
// Since each raindrop has different sizes, we'll do our sizing calculations here instead of on the main .raindrop selector
$drop-width:5px+random(11);
$drop-stretch:0.7+(random()*0.5);
$drop-height:$drop-width*$drop-stretch;
.raindrop:nth-child(#{$i}){
// multiply the random position value by the container's size
left:$x * $width;
top:$y * $height;
width:$drop-width;
height:$drop-height;
background-position:percentage($x) percentage($y);
}
.border:nth-child(#{$i}){
// we'll do the same positioning for the drop's border
left:$x * $width;
top:$y * $height;
width:$drop-width - 4;
height:$drop-height;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment