CSS Only Snow Falling Effect

Category: Animation , CSS & CSS3 | February 1, 2019
Author: Artimon
Views Total: 269
Official Page: Go to website
Last Update: February 1, 2019
License: MIT

Preview:

CSS Only Snow Falling Effect

Description:

A CSS only snow falling effect for the winter & holiday theme of your website.

Fully customizable by overriding the variables in the snowfall.scss.

How to use it:

Include the stylesheet snowfall.css in the document’s head section.

<link rel="stylesheet" type="text/css" href="css/snowfall.css">

Add snowflakes to the webpage.

<snowflake><span>❄</span>️️</snowflake>
<snowflake><span>🍂</span>️️</snowflake>
<snowflake><span>💝</span> ️️</snowflake>
<snowflake><span>🌟</span>️</snowflake>
<snowflake><img src="img/snowflake.png">️</snowflake>

Override the default variables to customize the snow falling effect.

$count: 50;
$screenOffset: 100px;
$fallDuration: 8;
$windNoise: 30;
$windSpeed: 10;
$sizeNoise: 40;
$rotation: 720;
$imageSize: 20px;
$fontSize: 40px;
$ sass ./src/sass/snowfall.scss ./dist/css/snowfall.css

You Might Be Interested In:


Leave a Reply