@zachleat/snow-fall
v1.0.3
Published
A web component to add snow to your web site (or to an element on your web site).
Downloads
982
Readme
<snow-fall>
A web component to add snow to your web site (or to an element on your web site). Based off of this Codepen from alphardex
.
Usage
<script type="module" src="snow-fall.js"></script>
<!-- Add snow to the page -->
<snow-fall></snow-fall>
<!-- Add snow to the first child element -->
<snow-fall>
<div style="width: 300px; height: 300px">
</snow-fall>
Installable from npm:
npm install @zachleat/snow-fall
Use with <is-land>
This is best used with <is-land>
to respect user preferences for reduced motion:
<is-land on:media="(prefers-reduced-motion: no-preference)">
<snow-fall></snow-fall>
</is-land>
Change the snow color
<!-- Change snow color -->
<snow-fall style="--snow-fall-color: rebeccapurple"></snow-fall>
Change the number of snowflakes
<!-- Default: 100 -->
<snow-fall count="200"></snow-fall>
Change the size of the snowflakes
Added in v1.0.2
<!-- Default: 10px -->
<snow-fall style="--snow-fall-size: 20px"></snow-fall>
Force the rendering mode (page/element)
You probably don’t need this.
<snow-fall mode="page"></snow-fall>
<snow-fall mode="element"></snow-fall>