First, add a full-screen fixed canvas with CSS. The script uses this canvas to render
the falling snow. Simply add one of the classes to the elements you want to catch snow
on, and you are good to go! Users can easily shake the snow off the text and elements by
scrolling or clicking a button.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html>
<head>
<title>♻ Codump - Dumped codes ♻ | Catchy snow text and elements</title>
<meta charset="UTF-8" />
<style>
#snow-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 990;
pointer-events: none;
background: transparent;
}
</style>
</head>
<body>
<button type="submit" class="catch-snow-btn">THIS IS A BUTTON</button>
<footer class="catch-snow-element">THIS IS AN ELEMENT</footer>
<!-- 6 = Offset for mobile & 16 = Offset for desktop. You can change this per element. -->
<h1 class="catch-snow-text snow-offset-6_16">THIS IS TEXT</h1>
<script type="text/javascript" src="snow.js"></script>
</body>
</html>