161sh/jointrashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/Crimekillz/jointrashposs.git synced 2024-11-25 10:19:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

(performance) parallax

Browse Source
This commit is contained in:
kakkokari-gtyih 2023-07-16 19:08:33 +09:00
parent 881204a310
commit 306e10022e
4 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/js/parallax/index.ts
View File

@ -1,9 +1,18 @@
import Rellax from 'rellax';
let rellax: Rellax.RellaxInstance;
export const vParallax = { export const vParallax = {
mounted: (src: HTMLElement, binding: Ref<number>) => { mounted: (src: HTMLElement, binding: Ref<number>) => {
src.style.willChange = 'transform'; src.style.willChange = 'transform';
window.addEventListener('scroll', () => { rellax = new Rellax(src, {
src.style.transform = `translateY(${window.scrollY / binding.value}px)`; speed: Math.pow(binding.value, 1.4) * -1,
}, { passive: true }); });
},
unmounted: () => {
if (rellax) {
rellax.destroy();
}
} }
} }

6
components/index/hero/Bg.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="absolute z-0 top-0 left-0 w-full h-full overflow-hidden"> <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="6" class="blobs object1"><Blob1 aria-hidden="true" /></div>
<div v-parallax="1.2" class="blobs object2"><Blob2 aria-hidden="true" /></div> <div v-parallax="6" 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 object3"><Blob2 aria-hidden="true" /></div>
</div> </div>
</template> </template>

2
package.json
View File

@ -14,6 +14,7 @@
"@nuxtjs/color-mode": "^3.3.0", "@nuxtjs/color-mode": "^3.3.0",
"@nuxtjs/i18n": "8.0.0-beta.13", "@nuxtjs/i18n": "8.0.0-beta.13",
"@types/node": "^18", "@types/node": "^18",
"@types/rellax": "^1.7.4",
"@types/three": "^0.153.0", "@types/three": "^0.153.0",
"@types/tinycolor2": "^1.4.3", "@types/tinycolor2": "^1.4.3",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
@ -24,6 +25,7 @@
"mfm-js": "^0.23.3", "mfm-js": "^0.23.3",
"nuxt": "^3.6.2", "nuxt": "^3.6.2",
"postcss": "^8.4.25", "postcss": "^8.4.25",
"rellax": "^1.12.1",
"sass": "^1.63.6", "sass": "^1.63.6",
"schema-dts": "^1.1.2", "schema-dts": "^1.1.2",
"sitemap": "^7.1.1", "sitemap": "^7.1.1",

14
pnpm-lock.yaml
View File

@ -20,6 +20,9 @@ devDependencies:
'@types/node': '@types/node':
specifier: ^18 specifier: ^18
version: 18.0.0 version: 18.0.0
'@types/rellax':
specifier: ^1.7.4
version: 1.7.4
'@types/three': '@types/three':
specifier: ^0.153.0 specifier: ^0.153.0
version: 0.153.0 version: 0.153.0
@ -50,6 +53,9 @@ devDependencies:
postcss: postcss:
specifier: ^8.4.25 specifier: ^8.4.25
version: 8.4.25 version: 8.4.25
rellax:
specifier: ^1.12.1
version: 1.12.1
sass: sass:
specifier: ^1.63.6 specifier: ^1.63.6
version: 1.63.6 version: 1.63.6
@ -1514,6 +1520,10 @@ packages:
resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
dev: true dev: true
/@types/rellax@1.7.4:
resolution: {integrity: sha512-2WAC+xAhLuJZjm/es2L7JL9BSSRo85bwzWPxGvXInN0YtOlyTjrVgpOinUKBV4xydtQuHntXKCMdkSlO8awimw==}
dev: true
/@types/resolve@1.20.2: /@types/resolve@1.20.2:
resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
dev: true dev: true
@ -5268,6 +5278,10 @@ packages:
unist-util-visit: 4.1.2 unist-util-visit: 4.1.2
dev: true dev: true
/rellax@1.12.1:
resolution: {integrity: sha512-XBIi0CDpW5FLTujYjYBn1CIbK2CJL6TsAg/w409KghP2LucjjzBjsujXDAjyBLWgsfupfUcL5WzdnIPcGfK7XA==}
dev: true
/remark-emoji@3.1.1: /remark-emoji@3.1.1:
resolution: {integrity: sha512-kVCTaHzX+/ls67mE8JsGd3ZX511p2FlAPmKhdGpRCb5z6GSwp+3sAIB5oTySIetPh7CtqfGf7JBUt5fyMjgOHw==} resolution: {integrity: sha512-kVCTaHzX+/ls67mE8JsGd3ZX511p2FlAPmKhdGpRCb5z6GSwp+3sAIB5oTySIetPh7CtqfGf7JBUt5fyMjgOHw==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}