diff options
-rw-r--r-- | assets/css/objects/_icon.scss | 8 | ||||
-rw-r--r-- | content/script.js | 13 |
2 files changed, 12 insertions, 9 deletions
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss index d074f55..f80f422 100644 --- a/assets/css/objects/_icon.scss +++ b/assets/css/objects/_icon.scss | |||
@@ -7,8 +7,8 @@ | |||
7 | 7 | ||
8 | @include object(namespace()) { | 8 | @include object(namespace()) { |
9 | display: block; | 9 | display: block; |
10 | width: 16px; | 10 | width: iro-px-to-rem(16px); |
11 | height: 16px; | 11 | height: iro-px-to-rem(16px); |
12 | stroke-width: 1.5px; | 12 | stroke-width: 1.5px; |
13 | stroke-linecap: round; | 13 | stroke-linecap: round; |
14 | stroke-linejoin: round; | 14 | stroke-linejoin: round; |
@@ -21,7 +21,9 @@ | |||
21 | @include modifier('snow') { | 21 | @include modifier('snow') { |
22 | position: fixed; | 22 | position: fixed; |
23 | z-index: 9999; | 23 | z-index: 9999; |
24 | top: -20px; | 24 | top: -1.2em; |
25 | width: 1em; | ||
26 | height: 1em; | ||
25 | animation: fall linear forwards; | 27 | animation: fall linear forwards; |
26 | stroke-width: 2px; | 28 | stroke-width: 2px; |
27 | color: #fff; | 29 | color: #fff; |
diff --git a/content/script.js b/content/script.js index df5a9c0..b972200 100644 --- a/content/script.js +++ b/content/script.js | |||
@@ -12,21 +12,22 @@ function createSnowFlake() { | |||
12 | const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg"); | 12 | const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg"); |
13 | const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use"); | 13 | const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use"); |
14 | 14 | ||
15 | const aniDuration = (Math.random() * 3 + 2) * 1000; | ||
16 | |||
15 | snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk"); | 17 | snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk"); |
16 | 18 | ||
17 | snowFlake.classList.add("o-icon"); | 19 | snowFlake.classList.add("o-icon", "o-icon--snow"); |
18 | snowFlake.classList.add("o-icon--snow"); | 20 | snowFlake.setAttribute("aria-hidden", "true"); |
19 | snowFlake.ariaHidden = true; | ||
20 | 21 | ||
21 | snowFlake.style.width = Math.random() * 10 + 10 + 'px'; | 22 | snowFlake.style.fontSize = Math.random() * 0.5 + 0.7 + 'em'; |
22 | snowFlake.style.left = Math.random() * window.innerWidth + 'px'; | 23 | snowFlake.style.left = Math.random() * window.innerWidth + 'px'; |
23 | snowFlake.style.animationDuration = Math.random() * 3 + 2 + 's'; | 24 | snowFlake.style.animationDuration = aniDuration + 'ms'; |
24 | snowFlake.style.opacity = Math.random(); | 25 | snowFlake.style.opacity = Math.random(); |
25 | 26 | ||
26 | snowFlake.appendChild(snowFlakeInner); | 27 | snowFlake.appendChild(snowFlakeInner); |
27 | document.body.appendChild(snowFlake); | 28 | document.body.appendChild(snowFlake); |
28 | 29 | ||
29 | setTimeout(() => { snowFlake.remove(); }, 5000); | 30 | setTimeout(() => { snowFlake.remove(); }, aniDuration); |
30 | } | 31 | } |
31 | 32 | ||
32 | setInterval(createSnowFlake, 100); | 33 | setInterval(createSnowFlake, 100); |