-
@@ -44,38 +44,18 @@ import { gsap } from "gsap";
import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
import { ScrollTrigger } from "gsap/ScrollTrigger";
const textElement = ref(null);
+const mosterElement = ref(null);
gsap.registerPlugin(ScrollTrigger);
const slogan = ref(null);
-// const animateElement = () => {
-// gsap.to(slogan.value, {
-// opacity: 1,
-// y: 0,
-// duration: 1,
-// ease: "power2.out",
-// });
-// slogan.value.classList.add("animate");
-// };
-
-// onMounted(() => {
-// ScrollTrigger.create({
-// trigger: slogan.value,
-// start: "top-=240px center",
-// onEnter: animateElement,
-// });
-// });
const handleScroll = () => {
const scrollY = window.scrollY;
- // 计算透明度和放大比例
const opacity = 1 - Math.min(scrollY / 500, 1);
-
- // 将最大放大比例从2减小到1.5
const scale = 1 + Math.min(scrollY / 1000, 0.5);
- // 设置文本的样式
if (textElement.value) {
textElement.value.style.opacity = opacity;
textElement.value.style.transform = `scale(${scale})`;
@@ -84,6 +64,17 @@ const handleScroll = () => {
onMounted(() => {
window.addEventListener("scroll", handleScroll);
+
+ if (mosterElement.value) {
+ mosterElement.value.style.transform = "translateX(950px)";
+ }
+
+ gsap.to(mosterElement.value, {
+ x: 0,
+ delay: 0.5,
+ duration: 1,
+ ease: "power2.out",
+ });
});
onUnmounted(() => {
diff --git a/src/components/about/LatestNews.vue b/src/components/about/LatestNews.vue
index cd0debb..36c3286 100644
--- a/src/components/about/LatestNews.vue
+++ b/src/components/about/LatestNews.vue
@@ -19,6 +19,7 @@
:centeredSlides="true"
slidesPerView="3"
:spaceBetween="50"
+ :autoplay="{ delay: 1500, disableOnInteraction: false }"
:coverflowEffect="{
rotate: 0,
stretch: 10,
@@ -32,7 +33,6 @@
}"
:modules="modules"
:loop="true"
- :autoplay="{ delay: 3500, disableOnInteraction: false }"
class="mySwiper"
ref="myRef"
>
@@ -46,6 +46,7 @@
-->
+
@@ -66,9 +66,15 @@
import { ref, computed, reactive, onMounted } from "vue";
import Grid9Panel from "./Grid9Panel.vue";
import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
const Y1 = ref(0);
const ratio = ref(0.2); //视差偏移率
const positionY1 = ref(0); //背景Y轴偏移量
+const contentLeft = ref(null);
+const animationTriggered = ref(false);
const cardText = [
{
name: "Michael Yue",
@@ -97,9 +103,25 @@ onMounted(() => {
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
let bgTest = document.getElementById("bgTest");
Y1.value = bgTest.offsetTop * ratio.value;
+ contentLeftAnimation();
});
-
+function contentLeftAnimation() {
+ gsap.from(contentLeft.value, {
+ x: -1000,
+ duration: 1,
+ ease: "power2.out",
+ });
+}
+function isContentLeftVisible() {
+ const rect = contentLeft.value.getBoundingClientRect();
+ const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
+ return rect.top <= windowHeight && rect.bottom >= 0;
+}
function handleScroll() {
+ if (!animationTriggered.value && isContentLeftVisible()) {
+ contentLeftAnimation();
+ animationTriggered.value = true;
+ }
const scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
@@ -110,8 +132,6 @@ function handleScroll() {