Merge pull request #274 from dnyandeepchute/animation

done #202
ChromeGaming · Jul 30, 2024 · 319a499 · 319a499
2 parents b1ed2e0 + db524ca
commit 319a499
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git a/css/style.css b/css/style.css
@@ -707,3 +707,46 @@ a {
     font-size: 18px;
   }
 }
+
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  background-color: #282c34;
+  color: white;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.snowflakes {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.snowflake {
+  position: absolute;
+  top: -10px;
+  z-index: 9999;
+  user-select: none;
+  pointer-events: none;
+  color: white;
+  font-size: 1em;
+  will-change: transform;
+  animation: fall linear infinite;
+}
+
+@keyframes fall {
+  0% {
+      transform: translateY(-100vh) rotate(0deg);
+      opacity: 1;
+  }
+  100% {
+      transform: translateY(100vh) rotate(360deg);
+      opacity: 0;
+  }
+}
diff --git a/index.html b/index.html
@@ -54,8 +54,14 @@ <h1 class="focusin">Physi-c<br />Tech</h1>
           <span class="btn" onclick="window.location.href='about.html'">ABOUT</span><br />
         </div>
       </div>
+      <div class="snowflakes">
+        <div class="snowflake">❅</div>
+        <div class="snowflake">❆</div>
+        <div class="snowflake">❄</div>
+      </div>  
     </div>
-
+
+
     <button id="feedbackButton" class="feedback-btn" onclick="handleFeedback()">
       Facing an Issue? Help Us Improve!
     </button>
@@ -71,6 +77,8 @@ <h2 id="moves"></h2>
       <div id="finalcontent" class="trophy"></div>
     </div>
 
+
+
     <div id="modal" class="modal">
       <div id="modalcontent" class="modal">
         <div class="cross">
@@ -145,7 +153,32 @@ <h1><span id="score">0</span>/<span id="max">0</span> discovered</h1>
         </div>
       </div>
     </div>
+
 
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+    const snowflakesContainer = document.querySelector('.snowflakes');
+
+    function createSnowflake() {
+        const snowflake = document.createElement('div');
+        snowflake.classList.add('snowflake');
+        snowflake.textContent = ['❅', '❆', '❄'][Math.floor(Math.random() * 3)];
+        snowflake.style.left = Math.random() * 100 + 'vw';
+        snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // between 2 and 5 seconds
+        snowflake.style.fontSize = Math.random() * 1 + 1 + 'em'; // between 1em and 2em
+        snowflake.style.opacity = Math.random();
+
+        snowflakesContainer.appendChild(snowflake);
+
+        setTimeout(() => {
+            snowflake.remove();
+        }, 5000); // remove snowflake after 5 seconds
+    }
+
+    setInterval(createSnowflake, 200);
+});
+
+    </script>
 
     <script src="./js/preloader.js"></script>
     <script src="./js/elements.js"></script>
@@ -154,5 +187,6 @@ <h1><span id="score">0</span>/<span id="max">0</span> discovered</h1>
     <script src="./js/svg.js"></script>
     <script src="./js/index.js"></script>
     <script src="./js/description.js"></script>
+
   </body>
 </html>