|
1 | 1 | // https://codepen.io/alphardex/pen/dyPorwJ, modified at line 21~22 |
2 | 2 |
|
| 3 | +@use 'sass:math'; |
| 4 | + |
3 | 5 | @function random_range($min, $max) { |
4 | | - $rand: random(); |
5 | | - $random_range: $min + floor($rand * (($max - $min) + 1)); |
| 6 | + $rand: math.random(); |
| 7 | + $random_range: $min + math.floor($rand * (($max - $min) + 1)); |
6 | 8 | @return $random_range; |
7 | 9 | } |
8 | 10 |
|
|
15 | 17 | border-radius: 50%; |
16 | 18 |
|
17 | 19 | @for $i from 1 through $total { |
18 | | - $random-x: random(1000000) * 0.0001vw; |
| 20 | + $random-x: math.random(1000000) * 0.0001vw; |
19 | 21 | $random-offset: random_range(-100000, 100000) * 0.0001vw; |
20 | 22 | $random-x-end: $random-x + $random-offset; |
21 | 23 | $random-x-end-yoyo: $random-x + calc($random-offset / 2); |
22 | 24 | $random-yoyo-time: calc(random_range(30000, 80000) / 100000); |
23 | 25 | $random-yoyo-y: $random-yoyo-time * 100vh; |
24 | | - $random-scale: random(10000) * 0.0001; |
| 26 | + $random-scale: math.random(10000) * 0.0001; |
25 | 27 | $fall-duration: random_range(10, 30) * 1s; |
26 | | - $fall-delay: random(30) * -1s; |
| 28 | + $fall-delay: math.random(30) * -1s; |
27 | 29 |
|
28 | 30 | &:nth-child(#{$i}) { |
29 | | - opacity: random(10000) * 0.0001; |
| 31 | + opacity: math.random(10000) * 0.0001; |
30 | 32 | transform: translate($random-x, -10px) scale($random-scale); |
31 | 33 | animation: fall-#{$i} $fall-duration $fall-delay linear infinite; |
32 | 34 | } |
33 | 35 |
|
34 | 36 | @keyframes fall-#{$i} { |
35 | | - #{percentage($random-yoyo-time)} { |
| 37 | + #{math.percentage($random-yoyo-time)} { |
36 | 38 | transform: translate($random-x-end, $random-yoyo-y) scale($random-scale); |
37 | 39 | } |
38 | 40 |
|
|
0 commit comments