본문 바로가기
코딩

스크롤 속도를 컴포넌트마다 다르게 하는 법

by KUROMI98 2025. 3. 20.
import { ParallaxProvider, Parallax } from "react-scroll-parallax";
      <ParallaxProvider>
        <div style={{ height: "1260px", display: "flex", justifyContent: "center", width: "100%", overflow:"hidden"  }}>
          <Parallax speed={-50} style={{ width: "100%", height: "940px", marginTop: "104px", background: "blue", display: "flex", alignItems: "center", justifyContent: "center", position: "relative"}}>
            <div style={{ position: "absolute", width: "100%", height: "100%",
              backgroundImage: `url(${latestExhibition.imageUrl ? util.getThumbnailImageUrl(latestExhibition.imageUrl) : emptyImagePath})`,
              backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat"}} 
            />
          </Parallax>
          <Parallax speed={5} style={{position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", zIndex: 100 }}>
            <div className={styles.artcityExhibitionInfo}>
              <div className={styles.artcityExhibitionTitle} style={{ fontFamily: selectedFont, color: backgroundColor }}>
                {latestExhibition.artistName} {titleSlicer(latestExhibition.title)}
              </div>
              <div className={styles.artcityExhibitionDesc} style={{ fontFamily: selectedSubFont, color: backgroundColor }}>
                {dateStatus(latestExhibition)}
              </div>
            </div>
          </Parallax>
        </div>
      </ParallaxProvider>

댓글