React / useState, useEffect 로 background parallax 구현하기

리엑트로 퍼블리싱중이다.

scrollmagic을 써볼까하다가 그냥 배너하나 만드는것이라 직접 구현하는법에 대해 공부해봤다.

useState와 useEffect 를 사용해서 구현하였다.

 

1. useState로 scroll 좌표를 받아오고 useEffect로 스크롤 될때마다 이벤트를 준다.

2. 좌표를 opacity 에 적용한다.

import React,{useEffect, useState} from 'react'
import css from '../../assets/css/main/main.module.css'

export default function MainCica() {
  const [position, setPosition] = useState(0);
  const windowWidth = window.innerWidth;
  
  function onScroll() {
    setPosition(window.scrollY);
  }
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
   	console.log("움직임")
    console.log(position)
    
    return () => {
      window.removeEventListener("scroll", onScroll);
    }
  });

  return (
    <>
      <div className={css.cicaWrap}
           style={{ backgroundPositionY: position / 4 -300 }}>
        <div className={css.cica_image} >
          <img src="/assets/images/cica-bg-item.png" alt="" style={windowWidth > 580 ? {opacity:(position -700 ) / 80} : {opacity:(position -400 ) / 80}}/>
        </div>
        <div className={css.text} style={windowWidth > 580 ? {opacity:(position -800 ) / 80} : {opacity:(position -500 ) / 80}}>
          <div>
            <img src="/assets/images/logo_white.png" alt="" />
            <p>
              시카페어 초록의 힘과<br/>
              더마톨로지 케어로<br/>
              민감해진 피부를 긴급 케어하세요
            </p>
            <button>cicapair more</button>
          </div>
        </div>
      </div>
    </>
  )
}

 

모바일에서는 패럴럭스가 빨리나와서 조건문을 걸어주었다