Using SCSS Animation to Make Your Webpage “Snow”

Let it Snow – Web Inspiration

It’s always nice when you can tie web design to something fun. I always enjoy the opportunity to take something technical and turning it into something creative. Since its getting close to the holidays I thought it would be fun to make a webpage snow. Not only was I able to make a small creative work, I also was able to dig into some of the core features of SASS and scratch the surface of an HTML template engine called HAML.

Here is a preview of the snowfall you can create using the tutorial below:

See the Pen Let it Snow by Dillon (@dillonlara115) on CodePen.

The first thing I did was create the HTML. Using HAML I was quickly able to generate 100+ divs, each which would next become a snowflake.

HAML

.snow-container
  - (1...300).each do |i|
    .snow

Next I pulled an image from unsplash and made it a full width/height background image. Easy enough.

The real challenge was to create 100+ snowflakes dynamically. Yeah, I could create selects for each snow flake by using :nth-child() but I would have had to copy and paste it 100+ times and change the number inside :nth-child() individually. Thanks to the awesome power of SCSS we can use a for loop which basically tells the css to create 100+ snow:nth-child() selectors and adding in a variable to the :nth-child selector.

SCSS Snowflakes

@for $i from 1 through 300 {
  .snow:nth-child(#{$i}) {
    background-color: #fff;
    width: 20px;
    height:  20px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 50px;
    left: 10px;
  }
}

Okay, so now we have 300 snowflakes, but we also have several issues:
1) They are showing up in the same place
2) They are all the same size
3) The snowflakes aren’t falling

Let’s tackle the first two issues. SCSS is also great in that it has a function we can plug in called random(). Using this function we can say that we want a random number between 1 and whatever number gets plugged into the function. For example: padding: random(20) + px; would generate a random padding between 1 and 20 each time the page is loaded or the for loop is ran. We can use this function to generate a random width and random x and y start position of each snowflake.

Making each snowflake unique

@for $i from 1 through 300 {
  $rand: random(8);
  .snow:nth-child(#{$i}) {
    background-color: #fff;
    width: $rand + px;
    height: $rand + px;
    opacity: random(10)/10 + .1;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: random(50)-75 + px;
    left: random(1900)  + px;
  }
}

Finally, using css animations we can now animate each snowflake to fall from the top of the screen down to the bottom. The first thing I did was create a css animation called ‘snow’. Then I added 2 keyframes, one for 0% and the other for 100%. This basically gives the animation an action or css style to change from the beginning to the end of the animation. The initial animation is to have the snow start from above the page and then fall to the bottom of the page and slowly change the opacity from visible to invisible once off the page.

The only thing left to do was call the animation from the .snow class in the animation loop.

Creating the animation loop

@for $i from 1 through 300 {
  $rand: random(8);
  .snow:nth-child(#{$i}) {
    background-color: #fff;
    width: $rand + px;
    height: $rand + px;
    opacity: random(10)/10 + .1;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: random(50)-75 + px;
    left: random(1900)  + px;
    -moz-animation: snow random(5000) + 3000 + ms random(4000) + 2000 + ms linear infinite;
		-webkit-animation: snow random(5000) + 3000  + ms random(4000) + 2000 + ms linear infinite;
		animation: snow random(5000) + 3000 + ms random(4000) + 2000 + ms linear infinite;
  }
}

  @-moz-keyframes snow {
      0% {
      -moz-transform: translate(-250px, 0);
    }
    100% {
      -moz-transform: translate(250px, 1500px);
    }
  }  

  @-webkit-keyframes snow {
    0% {
      -webkit-transform: translate(-250px, 0);
    }
    100% {
      -webkit-transform: translate(250px, 1500px);
    }
  }
  

  @keyframes snow {
    0% {
      transform: translate(-250px, 0);
      opacity: 1;
    }
    100% {
      transform: translate(250px, 1500px);
      opacity: 0;
    }
  }

That’s all there is to it. Another challenge that could enhance this scene would be to create another loop for the animation randomly call a different snow animation which would make the snowflakes fall at different angles whereas they currently fall at the same angle.

See the Pen Let it Snow by Dillon (@dillonlara115) on CodePen.

photo credit: Sergei Akulich from unsplash.