From 306e10022e2fd184bacde81ec067529b88384d26 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sun, 16 Jul 2023 19:08:33 +0900
Subject: [PATCH] (performance) parallax

---
 assets/js/parallax/index.ts  | 15 ++++++++++++---
 components/index/hero/Bg.vue |  6 +++---
 package.json                 |  2 ++
 pnpm-lock.yaml               | 14 ++++++++++++++
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/assets/js/parallax/index.ts b/assets/js/parallax/index.ts
index d0e8d041..3b9dfe7c 100644
--- a/assets/js/parallax/index.ts
+++ b/assets/js/parallax/index.ts
@@ -1,9 +1,18 @@
+import Rellax from 'rellax';
+
+let rellax: Rellax.RellaxInstance;
+
 export const vParallax = {
 	mounted: (src: HTMLElement, binding: Ref<number>) => {
 		src.style.willChange = 'transform';
 
-		window.addEventListener('scroll', () => {
-			src.style.transform = `translateY(${window.scrollY / binding.value}px)`;
-		}, { passive: true });
+		rellax = new Rellax(src, {
+			speed: Math.pow(binding.value, 1.4) * -1,
+		});
+	},
+	unmounted: () => {
+		if (rellax) {
+			rellax.destroy();
+		}
 	}
 }
diff --git a/components/index/hero/Bg.vue b/components/index/hero/Bg.vue
index a9daeb13..1f86081b 100644
--- a/components/index/hero/Bg.vue
+++ b/components/index/hero/Bg.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="absolute z-0 top-0 left-0 w-full h-full overflow-hidden">
-		<div v-parallax="1.2" class="blobs object1"><Blob1 aria-hidden="true" /></div>
-		<div v-parallax="1.2" class="blobs object2"><Blob2 aria-hidden="true" /></div>
-		<div v-parallax="1.2" class="blobs object3"><Blob2 aria-hidden="true" /></div>
+		<div v-parallax="6" class="blobs object1"><Blob1 aria-hidden="true" /></div>
+		<div v-parallax="6" class="blobs object2"><Blob2 aria-hidden="true" /></div>
+		<div v-parallax="6" class="blobs object3"><Blob2 aria-hidden="true" /></div>
     </div>
 </template>
 
diff --git a/package.json b/package.json
index 5353c3eb..cc8fe3d9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@nuxtjs/color-mode": "^3.3.0",
     "@nuxtjs/i18n": "8.0.0-beta.13",
     "@types/node": "^18",
+    "@types/rellax": "^1.7.4",
     "@types/three": "^0.153.0",
     "@types/tinycolor2": "^1.4.3",
     "autoprefixer": "^10.4.14",
@@ -24,6 +25,7 @@
     "mfm-js": "^0.23.3",
     "nuxt": "^3.6.2",
     "postcss": "^8.4.25",
+    "rellax": "^1.12.1",
     "sass": "^1.63.6",
     "schema-dts": "^1.1.2",
     "sitemap": "^7.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c6fe8e0c..4279d286 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ devDependencies:
   '@types/node':
     specifier: ^18
     version: 18.0.0
+  '@types/rellax':
+    specifier: ^1.7.4
+    version: 1.7.4
   '@types/three':
     specifier: ^0.153.0
     version: 0.153.0
@@ -50,6 +53,9 @@ devDependencies:
   postcss:
     specifier: ^8.4.25
     version: 8.4.25
+  rellax:
+    specifier: ^1.12.1
+    version: 1.12.1
   sass:
     specifier: ^1.63.6
     version: 1.63.6
@@ -1514,6 +1520,10 @@ packages:
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
     dev: true
 
+  /@types/rellax@1.7.4:
+    resolution: {integrity: sha512-2WAC+xAhLuJZjm/es2L7JL9BSSRo85bwzWPxGvXInN0YtOlyTjrVgpOinUKBV4xydtQuHntXKCMdkSlO8awimw==}
+    dev: true
+
   /@types/resolve@1.20.2:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
     dev: true
@@ -5268,6 +5278,10 @@ packages:
       unist-util-visit: 4.1.2
     dev: true
 
+  /rellax@1.12.1:
+    resolution: {integrity: sha512-XBIi0CDpW5FLTujYjYBn1CIbK2CJL6TsAg/w409KghP2LucjjzBjsujXDAjyBLWgsfupfUcL5WzdnIPcGfK7XA==}
+    dev: true
+
   /remark-emoji@3.1.1:
     resolution: {integrity: sha512-kVCTaHzX+/ls67mE8JsGd3ZX511p2FlAPmKhdGpRCb5z6GSwp+3sAIB5oTySIetPh7CtqfGf7JBUt5fyMjgOHw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}