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

(perf) パララックスをCSSに置き換え

Browse Source
This commit is contained in:
kakkokari-gtyih 2023-09-23 18:24:31 +09:00
parent 9e4c2cfa47
commit 24349378a2
4 changed files with 37 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +0,0 @@
import Rellax from 'rellax';
let rellax: Rellax.RellaxInstance;
export const vParallax = {
mounted: (src: HTMLElement, binding: Ref<number>) => {
src.style.willChange = 'transform';
rellax = new Rellax(src, {
speed: Math.pow(binding.value, 1.4) * -1,
});
},
unmounted: () => {
if (rellax) {
rellax.destroy();
}
}
}

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

@ -1,14 +1,13 @@
<template>
<div class="absolute z-0 top-0 left-0 w-full h-full overflow-hidden">
<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 class="bg1 absolute -z-10 invisible h-[200vh]"></div>
<div class="blobs object1"><Blob1 aria-hidden="true" /></div>
<div class="blobs object2"><Blob2 aria-hidden="true" /></div>
<div class="blobs object3"><Blob2 aria-hidden="true" /></div>
</div>
</template>
<script setup lang="ts">
import { vParallax } from '@/assets/js/parallax';
import Blob1 from '@/assets/svg/top-bg-object1.svg';
import Blob2 from '@/assets/svg/top-bg-object2.svg';
@ -17,6 +16,9 @@ import Blob2 from '@/assets/svg/top-bg-object2.svg';
<style scoped>
.blobs {
@apply absolute select-none pointer-events-none;
animation: parallax linear;
animation-timeline: scroll(root y);
--coefficient-parallax: 6;
}
.blobs > svg {
@ -60,5 +62,9 @@ import Blob2 from '@/assets/svg/top-bg-object2.svg';
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes parallax {
from { transform: translateY(0); }
to { transform: translateY(calc(var(--coefficient-parallax) * 66vh)); }
}
</style>
assets/js/paralax

1
components/index/hero/Left.vue
View File

@ -22,7 +22,6 @@
<script setup lang="ts">
import MkLogo from '@/assets/svg/misskey-logotype.svg';
import { scrollTo } from '@/assets/js/scroll-to';
import { vParallax } from 'assets/js/parallax';
const tagline = ref<HTMLElement>();

34
components/index/hero/Right.vue
View File

@ -1,17 +1,13 @@
<template>
<div class="absolute top-0 w-full hidden lg:block">
<GDots v-parallax="1.4" class="dots dots1" :space="30"/>
<GDots v-parallax="1.5" class="dots dots2" :space="30"/>
<img v-parallax="2" src="/img/hero/screenshot-desktop.png" class="screenshot desktop" alt="screenshot of Misskey in a PC browser">
<img v-parallax="3" src="/img/hero/screenshot-mobile.png" class="screenshot mobile" alt="screenshot of Misskey in a mobile browser">
<img v-parallax="4" src="/img/hero/ai.png" class="ai" alt="Ai-chan, Misskey's mascott">
<GDots class="dots dots1" :space="30"/>
<GDots class="dots dots2" :space="30"/>
<img src="/img/hero/screenshot-desktop.png" class="screenshot desktop" alt="screenshot of Misskey in a PC browser">
<img src="/img/hero/screenshot-mobile.png" class="screenshot mobile" alt="screenshot of Misskey in a mobile browser">
<img src="/img/hero/ai.png" class="ai" alt="Ai-chan, Misskey's mascott">
</div>
</template>
<script setup lang="ts">
import { vParallax } from '@/assets/js/parallax';
</script>
<style scoped>
.dots {
@apply absolute text-accent-600 pointer-events-none select-none w-[300px] h-[300px];
@ -20,11 +16,17 @@ import { vParallax } from '@/assets/js/parallax';
.dots1 {
right: 900px;
top: 200px;
animation: parallax linear;
animation-timeline: scroll(root y);
--coefficient-parallax: 1.4;
}
.dots2 {
right: 120px;
top: 500px;
animation: parallax linear;
animation-timeline: scroll(root y);
--coefficient-parallax: 1.5;
}
.screenshot {
@ -35,12 +37,18 @@ import { vParallax } from '@/assets/js/parallax';
right: 650px;
top: 400px;
height: 400px;
animation: parallax linear;
animation-timeline: scroll(root y);
--coefficient-parallax: 3;
}
.screenshot.desktop {
width: 750px;
top: 128px;
right: 300px;
animation: parallax linear;
animation-timeline: scroll(root y);
--coefficient-parallax: 2;
}
.ai {
@ -48,6 +56,9 @@ import { vParallax } from '@/assets/js/parallax';
right: 130px;
top: 128px;
height: 900px;
animation: parallax linear;
animation-timeline: scroll(root y);
--coefficient-parallax: 4;
}
@media (max-width: 1800px) {
@ -102,4 +113,9 @@ import { vParallax } from '@/assets/js/parallax';
right: 450px
}
}
@keyframes parallax {
from { transform: translateY(0); }
to { transform: translateY(calc(var(--coefficient-parallax) * 66vh)); }
}
</style>