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>
댓글