Created
July 1, 2024 15:19
-
-
Save WolfDenCode/0da6955e945c467ef683f6c31da0b47d to your computer and use it in GitHub Desktop.
Snowfall Effect Short
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Snowfall Effect</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div id="snowfall"></div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const snowfallContainer = | |
| document.getElementById("snowfall"); | |
| const maxSnowflakeCount = 200; | |
| let currentSnowflakes = 0; | |
| function createSnowflake() { | |
| if ( | |
| currentSnowflakes >= | |
| maxSnowflakeCount | |
| ) | |
| return; | |
| // Create a new div element to | |
| // represent the snowflake | |
| const snowflake = | |
| document.createElement("div"); | |
| // Add the class "snowflake" | |
| snowflake.classList.add("snowflake"); | |
| // Set a random horizontal position | |
| // (between 0% and 100%) | |
| snowflake.style.left = | |
| Math.random() * 100 + "%"; | |
| // Set a random animation duration | |
| // (between 5s and 15s) | |
| snowflake.style.animationDuration = | |
| Math.random() * 10 + 5 + "s"; | |
| // Set a random size for the snowflake | |
| // (between 5px and 10px) | |
| snowflake.style.width = | |
| Math.random() * 5 + 5 + "px"; | |
| snowflake.style.height = | |
| snowflake.style.width; | |
| // Append to the snowfall container | |
| snowfallContainer.appendChild( | |
| snowflake | |
| ); | |
| currentSnowflakes++; | |
| // Remove once animated | |
| snowflake.addEventListener( | |
| "transitionend", | |
| () => { | |
| snowflake.remove(); | |
| currentSnowflakes--; | |
| } | |
| ); | |
| } | |
| setInterval(createSnowflake, 150); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100vh; | |
| width: 100%; | |
| overflow: hidden; | |
| background-image: url(bg.jpg); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| body::after { | |
| content: ""; | |
| position: absolute; | |
| background-color: black; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.5; | |
| z-index: 1; | |
| } | |
| #snowfall { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: 2; | |
| } | |
| .snowflake { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #fff; | |
| border-radius: 50%; | |
| animation: fall 10s linear infinite, | |
| fade 10s linear infinite; | |
| } | |
| @keyframes fall { | |
| 0% { | |
| top: -10%; | |
| } | |
| 100% { | |
| top: 110%; | |
| } | |
| } | |
| @keyframes fade { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment