diff --git a/100_projects/86-white-snow-rain/index.html b/100_projects/86-white-snow-rain/index.html new file mode 100644 index 0000000..49f3f1b --- /dev/null +++ b/100_projects/86-white-snow-rain/index.html @@ -0,0 +1,11 @@ + + + + + + White Snow Rain + + + + + \ No newline at end of file diff --git a/100_projects/86-white-snow-rain/script.js b/100_projects/86-white-snow-rain/script.js new file mode 100644 index 0000000..634f19e --- /dev/null +++ b/100_projects/86-white-snow-rain/script.js @@ -0,0 +1,15 @@ +function createSnow () { + const snow = document.createElement("div"); + snow.classList.add("snow"); + snow.style.left = Math.random() * 100 + "vw"; + snow.style.animationDuration = Math.random() * 2 + 3 + "s"; + + snow.innerText = "❄️️"; + + document.body.appendChild(snow); + + setTimeout(() => { + snow.remove(); + }, 5000); +} +setInterval(createSnow, 300); \ No newline at end of file diff --git a/100_projects/86-white-snow-rain/style.css b/100_projects/86-white-snow-rain/style.css new file mode 100644 index 0000000..d065442 --- /dev/null +++ b/100_projects/86-white-snow-rain/style.css @@ -0,0 +1,23 @@ +* { + box-sizing: border-box; +} +body { + display: flex; + align-items: center; + justify-content: center; + margin: 0; + min-height: 100vh; + background: #ADD8E6; +} +.snow { + position: fixed; + top: -1vh; + font-size: 2rem; + transform: translateY(0); + animation: fall 3s linear forwards; +} +@keyframes fall { + to { + transform: translateY(105vh); + } +} \ No newline at end of file