滚动触发的视频和文本动画效果

<style>
.video.video_power {
    position: relative;
    overflow: hidden;
}
.video.video_power video{
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.video_power .container-fluid{
    background-color: #000;
    transform: scale(1);
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100% !important;
    height: 100vh !important;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
}
.video_power .title{
    width: 100%;
    word-wrap: break-word;
    text-align: center;
    color: #fff;
}
.video_power .content{
    color: #fff;
    opacity: 0;
    transform: translateY(100px);
    transition: all .4s ease-in-out .2s;
    font-weight: 500;
}
.video_power .position-horizontal-vertical-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .4s ease-in-out .4s;
    display: flex;
    justify-content: center !important;
    text-align: center;
}
.video_power .position-horizontal-vertical-center.show{
    opacity: 1;
}
.video_power .position-horizontal-vertical-center.show h3{
    opacity: 1;
}
    .video_power .title{
        font-size: 16rem;
    }
    .video_power .content{
        font-size: 64px;
    }
</style>

<div class="video video_power" id="video">
  
  <video class="large_image_video" src="test.mp4" autoplay poster="" controls="false" width="100%", height="100%" ></video>
    <div class="container-fluid">
        <h1 class="title">test test</h1>
    </div>
    <div class="position-horizontal-vertical-center">
        <h3 class="content">content content content</h3>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
    // 获取视频元素
    const videoElement = document.querySelector('.large_image_video');
    // 暂停视频播放
    videoElement.pause();
    // 获取包含标题的容器元素
    const containerElement = document.querySelector('.container-fluid');
    // 获取包含内容的元素
    const contentElement = document.querySelector('.position-horizontal-vertical-center');
    // 获取内容文本元素
    const contentTextElement = document.querySelector('.video_power .content');

    // 创建一个 ScrollTrigger 实例
    ScrollTrigger.create({
        trigger: ".video_power#video", // 触发元素
        start: "top top", // 滚动开始的位置
        end: "+=200%", // 滚动结束的位置
        pin: true, // 固定触发元素的位置
        onUpdate: ({ progress }) => { // 更新回调函数
            // 计算缩放值，确保最小值为 1
            const scaleValue = Math.max(1, 50 * progress);
            // 设置容器的缩放和透明度
            containerElement.style.transform = `scale(${scaleValue})`;
            containerElement.style.opacity = 1 - progress;

            // 当滚动进度超过 50% 时
            if (progress > 0.5) {
                videoElement.play(); // 播放视频
                contentElement.classList.add('show'); // 添加 'show' 类
                contentTextElement.style.transform = 'translateY(0)'; // 重置内容文本的位置
                contentTextElement.style.opacity = '1'; // 显示内容文本
            } else {
                videoElement.pause(); // 暂停视频
                contentElement.classList.remove('show'); // 移除 'show' 类
                contentTextElement.style.transform = 'translateY(100px)'; // 设置内容文本的位置
                contentTextElement.style.opacity = '0'; // 隐藏内容文本
            }
        },
    });
</script>