Блог

Главная - Вопросы по программированию - Как эффективно выполнять анимацию при прокрутке с помощью react / next?

Как эффективно выполнять анимацию при прокрутке с помощью react / next?

reactjs #scroll #next.js

#reactjs #прокрутка #next.js

Вопрос:

Я искал везде и не могу понять, как сделать этот эффект с помощью react! https://codepen.io/j-v-w/pen/ZEbGzyv

У меня есть сложное решение с использованием framer motion, но я не могу понять, как заставить его работать хорошо. Я продолжаю читать, что я должен отображать на холсте. Я не уверен, как это сделать, используя react / next. Также я думаю, что мне следует предварительно загрузить изображения. Я тоже не совсем уверен, как это сделать.

Помощь приветствуется 🙂

Мое текущее решение, которое заикается:

 import Head from "next/head";
import {
    motion,
    useMotionValue,
    useTransform,
    useViewportScroll,
} from "framer-motion";
import { useEffect, useState, useRef } from "react";

export default function Home() {
    const [Frame, setFrame] = useState("00");
    const [checkFrame, setCheckFrame] = useState();
    const { scrollY } = useViewportScroll();

    const opacityHero = useTransform(scrollY, [400, 700], [1, 0]);
    const opacitySecondary = useTransform(scrollY, [700, 1000], [0, 1]);
    const xSecondary = useTransform(scrollY, [700, 1000], [-150, -50]);

    const refImage = useRef(null);

    useEffect(() => {
        let currentFrame = parseInt(scrollY.current * 0.1);
        setCheckFrame(currentFrame);
    }, [scrollY]);

    useEffect(() => {
        return scrollY.onChange((v) => {
            let frame = parseInt(scrollY.current * 0.1).toString();
            if (frame.length === 1) {
                frame = "0"   frame;
            }
            if (frame > 37) {
                frame = 37;
            }
            setFrame(frame);
        });
    }, [checkFrame]);

    return (
        <div>
            <div style={{ height: 2400 }} className="bg-white">
                <Head>
                    <title>Avatar</title>
                    <link rel="icon" href="/favicon.ico" />
                    <link
                        rel="preconnect"
                        href="https://fonts.googleapis.com"
                    />
                    <link
                        rel="preconnect"
                        href="https://fonts.gstatic.com"
                        crossorigin
                    />
                    <link
                        href="https://fonts.googleapis.com/css2?family=Roboto Mono:wght@400;700amp;display=swap"
                        rel="stylesheet"
                    />
                </Head>
                <div className="sticky top-0">
                    <motion.img
                        src={`/images/testAssets-website/Hero_asset_test${Frame}.webp`}
                        alt=""
                        ref={refImage}
                        style={{ opacity: opacityHero }}
                        className={`w-screen h-full z-10 ${
                            opacityHero === 0 ? "hidden" : null
                        }`}
                    />
                    <motion.div
                        style={{
                            opacity: opacitySecondary,
                            x: xSecondary,
                        }}
                        className="text-primary z-0 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                    >
                        Yes, we move.
                    </motion.div>
                </div>
            </div>
        </div>
    );
}

Комментарии:

1. для меня это выглядит довольно гладко. интересно, что вы видите по-другому

2. @imjared На локальном хостинге все гладко, но когда он размещен в netlify, это не так :/

Метки: