Skip to content

Commit 718a2b0

Browse files
hcodeshcodes
committed
Add examples
1 parent 842d97a commit 718a2b0

File tree

3 files changed

+174
-0
lines changed

3 files changed

+174
-0
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@
1414

1515
## [Examples](https://hcodes.github.io/demo-snowflakes/)
1616
- 🔍 [Constructor](https://hcodes.github.io/snowflakes/examples/constructor): change settings and copy code for your site
17+
- 🎲 [3D Cube](https://hcodes.github.io/snowflakes/examples/3d_cube.html)
1718
- ❄ [Simple](https://hcodes.github.io/snowflakes/examples/simple.html)
1819
- 🎨 [Multicolor](https://hcodes.github.io/snowflakes/examples/multicolor.html)
1920
- 🐘 [Big](https://hcodes.github.io/snowflakes/examples/big.html)
21+
- 🍋 [Blend mode](https://hcodes.github.io/snowflakes/examples/blend_mode.html)
2022
- 🪟 [Layer](https://hcodes.github.io/snowflakes/examples/layer.html)
2123
- 🏠 [Some layers](https://hcodes.github.io/snowflakes/examples/some_layers.html)
2224
- 💛 [Own kind](https://hcodes.github.io/snowflakes/examples/balls.html)

‎examples/3d_cube.html

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
6+
<meta name="format-detection" content="telephone=no"/>
7+
<title>3D cube with snowflakes</title>
8+
<style>
9+
html, body {
10+
background-color: black;
11+
}
12+
13+
.cube-3d {
14+
position: fixed;
15+
left: 50%;
16+
top: 50%;
17+
transform: translate(-50%, -50%);
18+
}
19+
20+
.cube-3d__side,
21+
.cube-3d__container {
22+
width: 400px;
23+
height: 400px;
24+
}
25+
26+
.cube-3d__container {
27+
transform-style: preserve-3d;
28+
animation: cube-3d-rotate 10s infinite linear;
29+
}
30+
31+
.cube-3d__side {
32+
position: absolute;
33+
width: 100%;
34+
height: 100%;
35+
overflow: hidden;
36+
border: 2px solid black;
37+
opacity: .7;
38+
}
39+
40+
.cube-3d__side_back {
41+
transform: translateZ(-200px);
42+
background: orange;
43+
}
44+
45+
.cube-3d__side_left {
46+
transform: translateX(-200px) rotateY(90deg);
47+
background: violet;
48+
}
49+
50+
.cube-3d__side_right {
51+
transform: translateX(200px) rotateY(90deg);
52+
background: green;
53+
}
54+
55+
.cube-3d__side_top {
56+
transform: translateY(-200px) rotateX(90deg);
57+
background: blue;
58+
}
59+
60+
.cube-3d__side_bottom {
61+
transform: translateY(200px) rotateX(90deg);
62+
background: red;
63+
}
64+
65+
.cube-3d__side_front {
66+
transform: translateZ(200px);
67+
background: gold;
68+
}
69+
70+
@keyframes cube-3d-rotate {
71+
100% {
72+
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
73+
}
74+
}
75+
</style>
76+
</head>
77+
<body>
78+
<div class="cube-3d">
79+
<div class="cube-3d__container">
80+
<div class="cube-3d__side cube-3d__side_back"></div>
81+
<div class="cube-3d__side cube-3d__side_left"></div>
82+
<div class="cube-3d__side cube-3d__side_right"></div>
83+
<div class="cube-3d__side cube-3d__side_top"></div>
84+
<div class="cube-3d__side cube-3d__side_bottom"></div>
85+
<div class="cube-3d__side cube-3d__side_front"></div>
86+
</div>
87+
</div>
88+
89+
<script src="../dist/snowflakes.js"></script>
90+
<script>
91+
[
92+
['.cube-3d__side_back', 'black'],
93+
['.cube-3d__side_left', 'white'],
94+
['.cube-3d__side_right', 'yellow'],
95+
['.cube-3d__side_top', 'white'],
96+
['.cube-3d__side_bottom', 'pink'],
97+
['.cube-3d__side_front', 'green']
98+
].forEach((item) => {
99+
new Snowflakes({
100+
container: document.querySelector(item[0]),
101+
minSize: 20,
102+
maxSize: 100,
103+
count: 25,
104+
color: item[1],
105+
wind: false
106+
});
107+
});
108+
</script>
109+
</body>
110+
</html>

‎examples/blend_mode.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
6+
<meta name="format-detection" content="telephone=no"/>
7+
<title>Blend mode for snowflakes</title>
8+
<style>
9+
html, body {
10+
background-color: white;
11+
}
12+
13+
.snow, .snow2 {
14+
position: fixed;
15+
left: 0;
16+
top: 0;
17+
width: 100%;
18+
height: 100%;
19+
font-size: 25vw;
20+
font-weight: bold;
21+
line-height: 100vh;
22+
white-space: nowrap;
23+
text-align: center;
24+
vertical-align: middle;
25+
}
26+
27+
.snow {
28+
z-index: 10000;
29+
background: black;
30+
color: white;
31+
mix-blend-mode: difference;
32+
text-shadow: 1px 1px 2px red, 0 0 1em red, 0 0 0.2em blue;
33+
}
34+
35+
.snow2 {
36+
z-index: 99;
37+
color: rgba(255,255,255,.5);
38+
text-shadow: 1px 1px 2px white;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<div class="snow">
44+
SNOW!
45+
</div>
46+
47+
<div class="snow2">
48+
SNOW!
49+
</div>
50+
51+
<script src="../dist/snowflakes.js"></script>
52+
<script>
53+
new Snowflakes({
54+
minSize: 50,
55+
maxSize: 200,
56+
count: 100,
57+
color: 'black',
58+
wind: false
59+
});
60+
</script>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)