Nextjs/Typescript - 重新创建滚动、图像/文本动画、淡入淡出

Question

我正在尝试重新创建一个演示模板https://az-bold.webflow.io/，它在 nextjs/typescript 中使用滚动效果和鼠标位置跟踪。

我看到有一个水平滚动问题，确实通过溢出修复：隐藏在部分标签上 - 但这会破坏任何粘性内容交互..

我还没有看到任何有关如何正确重新创建这些操作的示例 - 并且我不确定如何操纵样式/dom 来正确重新创建效果。

我已经开始创建一个可以操作这些元素的函数 - 但如何针对鼠标事件正确绑定它并为其设置动画

加载时有标题动画，其中文本很大，然后缩小，然后恢复到当前位置

侧面的环在旋转

// Hero Section
const Hero = () => {
  React.useEffect(() => {
    var ellipseLeft = document.querySelector(".ellipse-left");
    var ellipseRight = document.querySelector(".ellipse-right");
    //document.querySelectorAll('[data-fill]').forEach(elem => {
    //  elem.style.width = elem.getAttribute("data-fill");
    //});

    var rotateZ = 23;

    setInterval(() => {
      rotateZ++;
      console.log("this is the first message");

      ellipseRight.style.transform =
        "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(" +
        rotateZ +
        "deg) skew(0deg, 0deg)";
      ellipseRight.style["transform-style"] = "preserve-3d";
      ellipseRight.style["will-change"] = "transform";

      ellipseLeft.style.transform =
        "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(" +
        rotateZ +
        "deg) skew(0deg, 0deg)";
      ellipseLeft.style["transform-style"] = "preserve-3d";
      ellipseLeft.style["will-change"] = "transform";
    }, 50);
  }, []);

滚动手机解锁并出现文本视差

https://codesandbox.io/p/sandbox/fervent-fast-forked-wcsmh4 https://wcsmh4.csb.app/

首次展示 - 这些部分顺利淡入

根据滚动的方向和速度，此部分有从亮到暗的对比度过渡

Answer 1

要使用 TypeScript 在 Next.js 项目中重新创建滚动效果、图像/文本动画和淡入效果，您可以利用诸如用于动画的 Framer-motion 和用于处理基于滚动的动画的 React-intersection-observer 等库。

下面是一个基本示例，演示如何构建组件以实现类似的效果：

jsx

import { useEffect, useRef } from 'react';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

const HeroSection = () => {
    const controls = useAnimation();
    const [ref, inView] = useInView();
    const titleRef = useRef(null);

    useEffect(() => {
        if (inView) {
            controls.start('visible');
        }
    }, [controls, inView]);

    useEffect(() => {
        if (titleRef.current) {
            const titleTimeline = controls
                .sequence()
                .add({ scale: 1.2, transition: { duration: 0.5 } })
                .add({ scale: 1, transition: { duration: 0.5 } });

            titleTimeline.start();
        }
    }, [controls]);

    return (
        <section className="hero" ref={ref}>
            <motion.div
                className="title"
                ref={titleRef}
                initial={{ scale: 0 }}
                animate={controls}
            >
                Your Title Here
            </motion.div>
            {/* Other content and animations */}
        </section>
    );
};

export default HeroSection;

说明：

我们使用react-intersection-observer来检测组件何时进入视图。 当组件处于视图中时，我们启动由成帧器运动控件定义的动画序列。 对于标题动画，我们使用 useRef 挂钩来获取对标题元素的引用，并在它进入视图时对其进行动画处理。 您可以使用成帧器运动控件和挂钩类似地添加其他动画和效果。 确保安装了framer-motion和react-intersection-observer：

重击

npm install framer-motion
npm install react-intersection-observer

记住还要在文件顶部导入这些依赖项：

jsx

import { useEffect, useRef } from 'react';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

此代码提供了在 Next.js TypeScript 项目中实现基于滚动的动画和淡入的基本结构。您可以根据需要添加更多动画和交互来扩展此功能。