add background

reednel · Oct 3, 2023 · 2cc8a8c · 2cc8a8c
1 parent c031947
commit 2cc8a8c
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 2 deletions.
diff --git a/src/layouts/components/Background.astro b/src/layouts/components/Background.astro
@@ -0,0 +1,35 @@
+
+<div class="">
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import Base from "@/layouts/Base.astro";
+import Background from "@/components/Background.astro";
 import { markdownify } from "@/lib/utils/textConverter";
 import type { Button, Feature } from "@/types";
 import { getEntryBySlug } from "astro:content";
@@ -22,13 +23,15 @@ const { title, meta_title, banner }: Homepage = homepage.data;
   title={title}
   meta_title={meta_title}
 >
+  <Background />
   <!-- Banner -->
-  <section class="section pt-14">
+  <section class="section pt-14 background-area">
     <div class="container">
       <div class="row justify-center">
         <div class="mb-16 text-center lg:col-7">
           <h1 set:html={markdownify(banner.title)} class="mb-4" />
           <p set:html={markdownify(banner.content)} class="mb-8" />
+
         </div>
       </div>
     </div>

diff --git a/src/styles/background.scss b/src/styles/background.scss
@@ -0,0 +1,84 @@
+$quantity: 32;
+
+.light-particle {
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	width: 0.4vw;
+	height: 0.4vw;
+	margin: -0.2vw 0 0 9.8vw;
+	animation: ease 200s alternate infinite;
+	pointer-events: none;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		transform-origin: -10vw;
+	}
+
+	&::before {
+		background: black;
+		opacity: 0;
+		animation: drift ease alternate infinite;
+	}
+
+	&::after {
+		background: white;
+		opacity: 0;
+		box-shadow: 0 0 0vw 0vw yellow;
+		animation: drift ease alternate infinite, flash ease infinite;
+	}
+}
+
+// Randomize Motion
+@for $i from 1 through $quantity {
+	$steps: random(12) + 16;
+	$rotationSpeed: random(10) + 8s;
+
+	.light-particle:nth-child(#{$i}){
+		animation-name: move#{$i};
+
+		&::before {
+			animation-duration: #{$rotationSpeed};
+		}
+
+		&::after {
+			animation-duration: #{$rotationSpeed}, random(6000) + 5000ms;
+			animation-delay: 0ms, random(8000) + 500ms;
+		}
+	}
+
+	@keyframes move#{$i} {
+		@for $step from 0 through $steps {
+			#{$step * calc(100 / $steps)}% {
+				transform: translateX(random(100) - 50vw) translateY(random(100) - 50vh) scale(calc(random(75) / 100) + .25);
+			}	
+		}	
+	}
+
+}
+
+@keyframes drift {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes flash {
+	0%, 30%, 100% {
+		opacity: 0;
+		box-shadow: 0 0 0vw 0vw yellow;
+	}
+	5% {
+		opacity: 1;
+		box-shadow: 0 0 2vw 0.4vw yellow;
+	}
+}
+
diff --git a/src/styles/base.scss b/src/styles/base.scss
@@ -105,4 +105,4 @@ a:hover {
 
 hr {
   @apply dark:border-light;
-}
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -10,6 +10,7 @@
   @import "components";
   @import "navigation";
   @import "buttons";
+  @import "background";
 }
 
 @layer utilities {