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(() => {
-
+
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];