코드로보시면 간단합니다.

왠만한건 다돌아가기 때문에 해석할 필요는 없으실겁니다.

테일윈드

backgroundImage 를 단축어로설정하여 bg-sky2 를사용하면 사진이 불러와집니다. 모든것이 정상 작동잘됍니다.

아래는 제가 작성한 코드중 일부분입니다.

  <div
        className={`${
          scrollPercent >= 25 && scrollPercent < 50
            ? "opacity-100 "
            : "opacity-0 "
        } block absolute  h-full bg-sky2 transition-opacity duration-500`}
      ></div>

이때 absolute 를 사용하였을떄 bg-sky2 이미지가 안보이게됍니다.

일부분 버그인줄 알았습니다. 그래서 다른 백그라운드 색상을 바꾸어보았습니다.

bg-sky2 ==>(교체) bg-red-400 

동일하게 안보입니다.

하지만

absolute 를 사용하지 않으면 4개가 스택처럼 쌓이지만 정상적이게 원하는퍼 센테이지에 올떄 없어지고 생성됍니다.

고민중

이미지로 만들었는데 정상작동 하였습니다.하지만 저는

backgroundImage 로넣는것이 필터다 backgroundFixed 등 여러가지 활용이 된다고 생각하여 질문드립니다.

 <img
        className={`${
          scrollPercent >= 75 && scrollPercent < 102
            ? "opacity-100 "
            : "opacity-0  "
        }block  absolute h-full  transition-opacity duration-500`}
        src="/images2/motion_sky4.gif"
        alt="motion_moon"
      />

요약

absolute을 사용하면 다돌아가던것이 왜인지 안돌아갑니다.

개발환경은 next.js tailwind 입니다.(취업못하고 공부용입니다.)

전체코드는 다음과같습니다

"use client";
import React, { useRef, useEffect, useState } from "react";
import motion_sky1 from "@/../../public/images2/motion_sky1.gif";

function Page() {
  const [scrollPercent, setScrollPercent] = useState(0);
  const scrollBody = useRef(null);
  console.log(scrollPercent);
  useEffect(() => {
    const handleScroll = () => {
      const scrollRealHeight =
        document.documentElement.scrollHeight - window.innerHeight;
      const scrollTop = window.scrollY;
      const percentScroll = Math.round((scrollTop / scrollRealHeight) * 100);
      setScrollPercent(percentScroll);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div ref={scrollBody} className="relative  left-0 top-0 h-6000 w-full ">
      <div>내용</div>

      {/* <img
        className={`${
          scrollPercent < 25 ? "opacity-100 " : "opacity-0 "
        }block absolute   h-full bg-black transition-opacity duration-500 `}
        src="/images2/motion_sky1.gif"
        alt="motion_moon"
      />
      <img
        className={`${
          scrollPercent >= 25 && scrollPercent < 50
            ? "opacity-100 "
            : "opacity-0 "
        } block absolute  h-full bg-teal-500 transition-opacity duration-500`}
        src="/images2/motion_sky2.gif"
        alt="motion_moon"
      />
      <img
        className={`${
          scrollPercent >= 50 && scrollPercent < 75
            ? "opacity-100 "
            : "opacity-0  "
        }block  absolute h-full bg-red-400 transition-opacity duration-500`}
        src="/images2/motion_sky3.gif"
        alt="motion_moon"
      />
      <img
        className={`${
          scrollPercent >= 75 && scrollPercent < 102
            ? "opacity-100 "
            : "opacity-0  "
        }block  absolute h-full bg-blue-500 transition-opacity duration-500`}
        src="/images2/motion_sky4.gif"
        alt="motion_moon"
      /> */}

      <div
        className={`${
          scrollPercent < 25 ? "opacity-100 " : "opacity-0 "
        }block absolute  Fixed z-50 h-full bg-sky1 transition-opacity duration-500 `}
      ></div>
      <div
        className={`${
          scrollPercent >= 25 && scrollPercent < 50
            ? "opacity-100 "
            : "opacity-0 "
        } block absolute  h-full bg-sky2 transition-opacity duration-500`}
      ></div>
      <div
        className={`${
          scrollPercent >= 50 && scrollPercent < 75
            ? "opacity-100 "
            : "opacity-0  "
        }block  absolute h-full bg-red-400 transition-opacity duration-500`}
      ></div>
      <div
        className={`${
          scrollPercent >= 75 && scrollPercent < 102
            ? "opacity-100 "
            : "opacity-0  "
        }block  absolute h-full bg-blue-500 transition-opacity duration-500`}
      ></div>

      <div className="motion_ggang">
        <figure className="ch_body">
          {/* 몸 */}
          <img
            className="fixed h-40 w-32 top-12 left-7"
            src="/images2/motion_body2.png"
            alt="motion_body2"
          />
        </figure>
        {/* 손 */}
        <figure className="ch_hand_right">
          <img
            className="fixed h-40 w-32 top-12 left-7"
            src="/images2/motion_hand_right.png"
            alt="motion_hand_right"
          />
        </figure>
      </div>
      {/* 달 */}
      <figure className="motion_moon">
        <img
          className="fixed h-40 w-32 top-12 right-3"
          src="/images2/motion_moon.png"
          alt="motion_moon"
        />
      </figure>
    </div>
  );
}

export default Page;