A web component built with StencilJS that generates falling snowflakes, providing an easy-to-use snow effect for any website.
You can use the snow-effect custom element in your HTML. It allows customization of the quantity of snowflakes, color, and speed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snow Effect Demo</title>
<script type="module" src="https://unpkg.com/snow-effect"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #282c34;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
margin-bottom: 20px;
}
label {
margin-right: 10px;
}
button {
padding: 10px 15px;
background-color: #61dafb;
color: #282c34;
border: none;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #21a1f1;
}
</style>
</head>
<body>
<h1>Snow Effect Custom Element Demo</h1>
<form id="controls">
<div>
<label for="flakes">Flakes quantity:</label>
<input type="number" id="flakes" name="flakes" min="1" max="500" value="100" />
</div>
<div>
<label for="color">Flakes color:</label>
<input type="color" id="color" name="color" value="#ffffff" />
</div>
<div>
<label for="speed">Flakes speed:</label>
<input type="range" id="speed" name="speed" min="1" max="10" value="5" />
</div>
<button type="button" id="apply">Apply Changes</button>
</form>
<!-- Snow Effect custom element -->
<snow-effect id="snow-component" flakes="100" color="#ffffff" speed="5"></snow-effect>
<script>
document.getElementById('apply').addEventListener('click', () => {
const flakes = document.getElementById('flakes').value;
const color = document.getElementById('color').value;
const speed = document.getElementById('speed').value;
const snowComponent = document.getElementById('snow-component');
snowComponent.setAttribute('flakes', flakes);
snowComponent.setAttribute('color', color);
snowComponent.setAttribute('speed', speed);
});
</script>
</body>
</html>-
flakes: Number of snowflakes (default:100) -
color: Color of the snowflakes (default:#ffffff) -
speed: Speed of falling snowflakes, with values from1(slow) to10(fast) (default:1)
To build the project locally:
npm install
npm startThis project is licensed under the MIT License. See the LICENSE file for details.
- [ ] Get a logo
- [ ] Support for node module
- [ ] Add frameworks wrapper (React, Angular, Vue)