A Pen by Ruocaled.

CSS3-Snow-with-SASS-Random()-function.markdown

CSS3 Snow with SASS Random() function

Yet another css3 snow demo. I noticed codepen has a custom random() function for sass. It's very fun to use for sure!

More info: http://blog.codepen.io/2013/08/26/random-function-in-sass/

A Pen by Ruocaled on CodePen.

License.

index.jade

num_of_snow = 100

- for (var i=0; i<num_of_snow; i++)
            .snow(id="snow"+i)

style.scss

@import "compass";
$num_of_snow: 100;

:root {
  background-color: lighten(black,10%);
  overflow:hidden;
}

@keyframes letitsnow {
  0% {
	top: 100%;
  }
  100% {
	top: 0%;
  }
}

.snow {
  position: absolute;
  border-radius: 50%;
  background-color: white;
  top: -9999px;
}

@for $i from 0 through $num_of_snow - 1 {
  $size: random(5) + 2; // size 2-7
  $delay: random(500) * 0.05 + s; //0-25s delay
  $speed: random(10) + 10 + s;//10-20s finish loop

  #snow#{$i} {
	animation: letitsnow $speed infinite linear $delay;
	left: random(100) * 1%;
	height: $size + px;
	width: $size + px;
  }
}