CSS Only Snow Falling Effect


Author: Artimon
Views Total: 5,105 views
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

See also  Interactive Box & Text Shadow Library - ShadowCSS

Leave a Reply

Your email address will not be published. Required fields are marked *