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) => { 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 @@ 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}