Author: | Artimon |
---|---|
Views Total: | 6,894 views |
Official Page: | Go to website |
Last Update: | February 1, 2019 |
License: | MIT |
Preview:

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
It unfortunately totally glitches in IE… snowflakes are moving horizontally only at the top of page.
Replace below in CSS file:
calc(100% + 100px) with 110%
calc(0% – 100px) with -10%
And it will works smoothly in IE as well.
because calc does not work properly in IE.