[2022.07.24] 특정 요소가 화면에 스크롤 되면 나타나게 하기(점점 오른쪽으로 커지게 loding처럼 효과)

ci.jsx파일

 

현재 화면에 요소가 스크롤시 나타나면 점점 커지게 효과를 주고 싶었음 (로딩처럼 왼쪽 기준고정, 점점 width가 커져보이는 효과)

 

const updateScroll = () => {
    const valueTop=ztColRef.current.getBoundingClientRect().top;
    const viewHeight=window.innerHeight;
    console.log('valueTop',valueTop);
    console.log('window.innerHeight',viewHeight);
    if(viewHeight>valueTop){
      ztColRef.current.className='ztColStGr ztColStGrOn';
    }else{
      ztColRef.current.className='ztColStGr';
    };
  };

  useEffect(()=>{
    window.addEventListener('scroll', updateScroll);
    return () => {
      window.removeEventListener('scroll', updateScroll);
    };
  });

 

해당요소에 ref주기

<p className='ztColStGr' ref={ztColRef}></p>

 

css 로 전(ztColStGr), 후(ztColStGrOn) 효과 설정

.ztColStGr{
 background: url('./../../img/zeta/zeta_gradient.png') no-repeat;
 background-size: contain;
 transform: scaleX(0);
 transform-origin: left;
 height:13.6rem;
 margin: 0 auto;
 position: relative;
}

 .ztColStGrOn{
  transform: scaleX(1);
  transition:3.5s;
}

 

innerHeight 참고

 

https://nykim.work/56?category=692676 

[JS] 스크롤 페이드인 효과