Electric Boogaloo Part 5: Project Decode

Sleet827 · Dec 28, 2024 · ca0e9d7 · ca0e9d7
1 parent addd0e8
commit ca0e9d7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <div class="snow"></div>
     <div class="container">
         <h1>Welcome to Winter Wonderland</h1>
         <p>Experience the magic of winter with snowflakes, hot cocoa, and cozy nights by the fire.</p>

diff --git a/script.js b/script.js
@@ -2,4 +2,23 @@ document.getElementById('changeColorBtn').addEventListener('click', function() {
     const colors = ['#ff6347', '#4682b4', '#32cd32', '#ff69b4', '#ffd700'];
     const randomColor = colors[Math.floor(Math.random() * colors.length)];
     document.body.style.backgroundColor = randomColor;
-});
+});
+
+// Snowflake generation
+function createSnowflake() {
+    const snowflake = document.createElement('div');
+    snowflake.classList.add('snowflake');
+    const size = Math.random() * 10 + 5; // Random size between 5px and 15px
+    snowflake.style.width = `${size}px`;
+    snowflake.style.height = `${size}px`;
+    snowflake.style.left = Math.random() * 100 + 'vw'; // Random horizontal position
+    snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // Random fall duration
+    document.querySelector('.snow').appendChild(snowflake);
+
+    // Remove snowflake after it falls
+    snowflake.addEventListener('animationend', () => {
+        snowflake.remove();
+    });
+}
+
+//
diff --git a/styles.css b/styles.css
@@ -16,12 +16,15 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
 }
 
 .container {
     background: rgba(0, 0, 0, 0.5);
     padding: 20px;
     border-radius: 10px;
+    position: relative;
+    z-index: 1;
 }
 
 h1 {
@@ -49,6 +52,32 @@ button:hover {
     background-color: #ff4500;
 }
 
+/* Snow Animation */
+.snow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.snowflake {
+    position: absolute;
+    top: -10px;
+    background: white;
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: fall linear infinite;
+}
+
+@keyframes fall {
+    to {
+        transform: translateY(100vh);
+    }
+}
+
 @media (max-width: 600px) {
     h1 {
         font-size: 2em;