마우스 스크롤 시 이미지가 바뀌는 기능 구현하기

 마우스 스크롤에 따라 이미지가 바뀌는 기능 기록

---

 

 

1. TextArea.js 파일을 생성

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import _ from "lodash";
import { Link } from "react-router-dom";

// 스타일 정의
const TextAreaBlock = styled.div`
 //생략
`;

// 텍스트와 이미지가 포함된 컴포넌트
const TextArea = () => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0); // 현재 이미지 인덱스
  const [scrollPosition, setScrollPosition] = useState(0); // 스크롤 위치
  const threshold = 5400; // 이미지 변경 기준 스크롤 위치

  useEffect(() => {
    const handleScroll = _.throttle(() => {
      setScrollPosition(window.scrollY || window.pageYOffset);
    }, 200);

    window.addEventListener("scroll", handleScroll);

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

  useEffect(() => {
    if (scrollPosition > threshold) {
      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % product.length);
    }
  }, [scrollPosition, threshold]);

  const product = [
    { img: "./assets/image/advertise/batadorayaki_img2.jpg" },
    { img: "./assets/image/advertise/home_img17.jpg" },
    { img: "./assets/image/advertise/home_img19.jpg" },
    { img: "./assets/image/advertise/jonamagashi_img4.jpg" },
  ];

  return (
    <TextAreaBlock className="row">
      <div className="container">
        <h3>전통과 정성</h3>
        <div className="imgBox">
          <img src={product[currentImageIndex].img} alt="" />
        </div>

        <div className="cream">
          <p>传统</p>
        </div>
        <div className="and">
          <p>与</p>
        </div>
        <div className="paste">
          <p>真诚</p>
        </div>
      </div>
      <div className="bottom">
        <br />
        <p>후쿠시마현 이시카와초에 있는 창업 메이지 20년의 화과자점 입니다 .</p>
        <p>
          창업 당시부터 변함없는 맛의 차, 만주, 도랴야끼에 생크림 샌드. 인기의
          화과자 장인이 색채를 더하는 계절의 화과자 등 . 수제로만든 맛있는
          느낌을 즐기세요 .
        </p>
        <button className="btn">
          <Link to="/storeInfo">View More</Link>
        </button>
      </div>
    </TextAreaBlock>
  );
};

export default TextArea;

 

 

 

2. 스크롤 위치 추적하기

useEffect를 사용하여 스크롤 위치를 추적할 수 있습니다. lodash의 throttle 메서드를 사용하여 스크롤 이벤트를 최적화합니다..

useEffect(() => {
  const handleScroll = _.throttle(() => {
    setScrollPosition(window.scrollY || window.pageYOffset); // 현재 스크롤 위치를 상태로 설정
  }, 200);

  window.addEventListener("scroll", handleScroll);

  return () => {
    window.removeEventListener("scroll", handleScroll); // 컴포넌트 언마운트 시 이벤트 리스너 제거
  };
}, []);

 

 

3. 이미지 변경 로직 구현

스크롤 위치가 특정 임계값(threshold)을 넘으면 이미지를 변경하도록 합니다.

useEffect(() => {
  if (scrollPosition > threshold) {
    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % product.length); // 이미지 인덱스 변경
  }
}, [scrollPosition, threshold]);

 

 

4. 스타일 적용 및 레이아웃 구성

이미지를 감싸는 컨테이너와 텍스트를 포함하는 레이아웃을 구성합니다. 이 부분은 styled-components를 사용하여 스타일링할 합니다

 

.