feat: add noise animation to background image

k-urtica · Sep 3, 2024 · b5f5628 · b5f5628
1 parent 2bb82db
commit b5f5628
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/app.vue b/src/app.vue
@@ -1,9 +1,28 @@
-<script setup lang="ts"></script>
-
 <template>
-  <main class="min-h-dvh">
+  <main class="cover min-h-dvh">
     <img src="@/assets/bg.webp" class="fixed inset-0 size-full object-cover">
     <div class="fixed inset-0 size-full bg-gradient-to-b from-[rgb(0_0_0/0.08)] to-[rgb(0_0_0/0.35)]" />
     <NuxtPage />
   </main>
 </template>
+
+<style scoped>
+.cover::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  opacity: 0.04;
+  pointer-events: none;
+  background-image: url('/noise.webp');
+  animation: noise-anim 1s steps(7) infinite;
+}
+
+@keyframes noise-anim {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 140px 140px;
+  }
+}
+</style>
diff --git a/src/public/noise.webp b/src/public/noise.webp