<snow-fall> Web Component
December 15, 2023
@zachleat/snow-fall
A web component to add snow to your web site (or to an element on your web site).
Demo GitHub npm- Popularity
- npm11k
cdn2k
- Versions
- 4 versions in1.0.3
- Audit
-
0 reports
0 deps - Issues
-
4
- PRs
-
0
<snow-fall> is a zero-dependency, JavaScript web component to add snow to your web site (or to an element on your web site). This is a web component implementation 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-fallUse 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>
Poster image by Adam Chang
16 Comments
@zachleat I just remembered I made this last year https://emojistorm.rknight.me EmojiStorm
@robb hell yeah you did
if you look in the footer of https://blog.fontawesome.com/ and tap on the Font Awesome flag you’ll see a variant of this component made to work with Font Awesome icons (and reusing the colors from the header image of the blog post too: https://blog.fontawesome.com/blog-awesome-to… Truncated
if you look in the footer of blog.fontawesome.com and tap on the Font Awesome flag you’ll see a variant of this component made to work with Font Awesome icons ???? (and reusing the colors from the header image of the blog post too: blog.fontawesome.com/blog-awesome...)
@zachleat it was 38°C today and tomorrow is forecast for 39°C with more fires. Are you sure that's not ash? Tis the season.
@webaware let’s not read too much into the fact that I accidentally implied that everyone in the southern hemisphere might not be my friend *runs away screaming*
@zachleat I recently added an SVG Rudolph with shiny blinky red nose to a website. If you clicked the nose hearts would emit from it in all directions. My PM:"How long did it take you to build that? It wasn't part of the plan to do this. Why is it even there?" The C… Truncated
@nice2meatu hahahahahaha ????????????????
@zachleat altogether now "It's the moooost wonderful tiiiiime of the yeeeaaaaar"!
@zachleat Nice!
Ha, this just reminded me to turn on my toolbar lights. festivitas.app
Lovely!
@zachleat Excellent, thank you ???? ❄️ https://unapologetic.io Unapologetic
@zachleat Ready. Light/dark theme implementation is as easy as it can be. Predefining two HTML nodes or update one node selector. Finally writing some CSS lines: --snow-fall-color for color value or variable. Perfect, big thank you!
@zachleat I looked more closely, and can indeed see the snow on the body text occasionally. I guess since it's not so dense it simply isn't visible so much, whereas on larger dark areas it stands out more. Next time I'll examine more closely before yelling questions. … Truncated
Used a couple of other web components too snow-fall web component from https://www.zachleat.com/web/snow-fall/ @zachleat color-input web component from https://github.com/argyleink/css-color-component?tab=readme-ov-file @argyleink snow-fall Web Component—zachleat.com