feat: christma season spotlight added #712

added Christmas spotlight
Planet-NULLCAST · Dec 24, 2021 · 308032a · 308032a
1 parent fb793ba
commit 308032a
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 18 deletions.
diff --git a/component/layout/HomeSpotlight/HomeSpotlight.jsx b/component/layout/HomeSpotlight/HomeSpotlight.jsx
@@ -20,9 +20,15 @@ export default function HomeSpotlight() {
 
   return (
     <section className={styles.spotlight}>
-      <div className={styles.stars}></div>
-      <div className={styles.twinkling}></div>
-      <div>
+      {/* <div className={styles.stars}></div>
+      <div className={styles.twinkling}></div> */}
+       <div className={styles.mainSnow}>
+        <div className={styles.snow}></div>
+        {Array.from({ length: 300 }, (_, i) => (
+          <div className={styles.snow}></div>
+        ))}
+      </div>
+      <div className="">
         <h2>
           <span className={styles.spotlight__title} id="title1">
             Planet Nullcast

diff --git a/component/layout/HomeSpotlight/HomeSpotlight.module.scss b/component/layout/HomeSpotlight/HomeSpotlight.module.scss
@@ -1,6 +1,7 @@
 .spotlight {
     @apply bg-black flex items-center justify-center text-white md:py-20 relative overflow-hidden;
     height: min(calc(100vh - 60px), 1500px);
+    position: relative;  
     &__title {
 
         @apply text-center relative z-10 py-2 block;
@@ -77,23 +78,23 @@
     to {background-position:-10000px 5000px;}
 }
 
-.stars, .twinkling {
-  @apply absolute top-0 left-0 right-0 bottom-0 w-full h-full pointer-events-none;
-}
+// .stars, .twinkling {
+//   @apply absolute top-0 left-0 right-0 bottom-0 w-full h-full pointer-events-none;
+// }
 
-.stars {
-  background:#000 url("../../../public/images/sky.png") repeat top center;
-}
+// .stars {
+//   background:#000 url("../../../public/images/sky.png") repeat top center;
+// }
 
-.twinkling{
-  background:transparent url("../../../public/images/twinkling.png") repeat top center;
+// .twinkling{
+//   background:transparent url("../../../public/images/twinkling.png") repeat top center;
 
-  -moz-animation:move-twink-back 200s linear infinite;
-  -ms-animation:move-twink-back 200s linear infinite;
-  -o-animation:move-twink-back 200s linear infinite;
-  -webkit-animation:move-twink-back 200s linear infinite;
-  animation:move-twink-back 200s linear infinite;
-}
+//   -moz-animation:move-twink-back 200s linear infinite;
+//   -ms-animation:move-twink-back 200s linear infinite;
+//   -o-animation:move-twink-back 200s linear infinite;
+//   -webkit-animation:move-twink-back 200s linear infinite;
+//   animation:move-twink-back 200s linear infinite;
+// }
 @keyframes arrow {
     0% { opacity: 0;  transform: translateY(-40px); }
     15% { opacity: 1; transform: translateY(0); fill:#969696; }
@@ -111,4 +112,61 @@
             }
         }
     }
-}
+}
+
+// snow
+
+.mainSnow {
+	height: 100vh;
+  position: absolute;
+  left: 0;
+	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
+	// overflow: hidden;
+	filter: drop-shadow(0 0 10px white);
+}
+
+@function random_range($min, $max) {
+  $rand: random();
+  $random_range: $min + floor($rand * (($max - $min) + 1));
+  @return $random_range;
+}
+
+.snow {
+  $total: 300;
+  position: absolute;
+  // left: -200px;
+  width: 10px;
+  height: 10px;
+  background: white;
+  border-radius: 50%;
+
+  @for $i from 1 through $total {
+    $random-x: random(1000000) * 0.0001vw;
+    $random-offset: random_range(-100000, 100000) * 0.0001vw;
+    $random-x-end: $random-x + $random-offset;
+    $random-x-end-yoyo: $random-x + ($random-offset / 2);
+    $random-yoyo-time: random_range(30000, 80000) / 100000;
+    $random-yoyo-y: $random-yoyo-time * 100vh;
+    $random-scale: random(10000) * 0.0001;
+    $fall-duration: random_range(10, 30) * 1s;
+    $fall-delay: random(30) * -1s;
+
+    &:nth-child(#{$i}) {
+      opacity: random(10000) * 0.0001;
+      transform: translate($random-x, -10px) scale($random-scale);
+      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
+    }
+
+    @keyframes fall-#{$i} {
+      #{percentage($random-yoyo-time)} {
+        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
+      }
+
+      to {
+        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
+      }
+    }
+  }
+}
+
+