diff --git a/nginx/vue/src/assets/styles.css b/nginx/vue/src/assets/styles.css index 14618b7..af467f6 100644 --- a/nginx/vue/src/assets/styles.css +++ b/nginx/vue/src/assets/styles.css @@ -291,8 +291,4 @@ td { transparent var(--blur)); background-size: var(--bg_size) var(--bg_size); background-position: 0 0; - - mask-image: linear-gradient(-180deg, - rgba(1, 1, 1, 1) 0%, - rgba(1, 1, 1, 0.92) 100%); } diff --git a/nginx/vue/src/components/util/Slideshow.vue b/nginx/vue/src/components/util/Slideshow.vue index 8593e93..0de0273 100644 --- a/nginx/vue/src/components/util/Slideshow.vue +++ b/nginx/vue/src/components/util/Slideshow.vue @@ -41,7 +41,7 @@ onUnmounted(() => {
{{ currentComment }}
- Image Viewer + Image Viewer diff --git a/nginx/vue/src/views/home/Home.vue b/nginx/vue/src/views/home/Home.vue index 71dc8b5..97f69d1 100644 --- a/nginx/vue/src/views/home/Home.vue +++ b/nginx/vue/src/views/home/Home.vue @@ -69,6 +69,7 @@ import Consumption from "./Consumption.vue"; diff --git a/nginx/vue/src/views/home/Intro2.vue b/nginx/vue/src/views/home/Intro2.vue index 1332451..17bdd51 100644 --- a/nginx/vue/src/views/home/Intro2.vue +++ b/nginx/vue/src/views/home/Intro2.vue @@ -27,8 +27,8 @@ const phrases = [ const animState = phrases.map((text, i) => ({ x: i * 20, y: i * 20, - dx: rand(0, 30) / 100, - dy: 0.5, + dx: rand(0, 60) / 100, + dy: 1.0, content: text, cachedW: 0, cachedH: 0, @@ -48,6 +48,8 @@ const items = ref( let rafId = 0; let cachedCW = 0; let cachedCH = 0; +let lastFrameTime = 0; +const FRAME_INTERVAL = 1000 / 30; function measureSizes() { const c = container.value; @@ -63,12 +65,18 @@ function measureSizes() { }); } -function animate() { +function animate(timestamp: number) { if (!cachedCW || !cachedCH) { rafId = requestAnimationFrame(animate); return; } + if (timestamp - lastFrameTime < FRAME_INTERVAL) { + rafId = requestAnimationFrame(animate); + return; + } + lastFrameTime = timestamp; + for (let i = 0; i < animState.length; i++) { const s = animState[i]; const el = itemEls.value[i];