• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.

23.07.18 12:31 작성 23.07.18 12:34 수정 조회수 268

0

섹션2 번째 내용입니다.

해당과정을 리액트에서 적용하면서 따라가고 있습니다. 돔접근에 대해서는 useRef를 사용해서 잘 따라가고 있는데, scrollSection1 의 부분에서 scrollSection1Msg1~scrollSection1Msg4 의 opacity 부분에서 아래와 같이 작업했습니다. 그런데 화면에 잔상이 남습니다. 완전히 opacity=0 가 되지 않는 것처럼 희미하게 글자들이 중첩되며 남아 있습니다. (맥북 M1)

1분코딩(1).gif

 values : {
        selectionMsgA_opacity : [0 ,1, {start: 0.1, end:0.2}], 
        selectionMsgA_opacity_out : [1 ,0, {start: 0.25, end:0.3}],

else if (scrollRatio <= 0.3) {
          obj.Section1Msg1.current.style.opacity = calcValues(values.selectionMsgA_opacity_out, currentYoffset)
          obj.Section1Msg1.current.style.transform = `translateY(${ calcValues(values.selectionMsgA_translateY_out, currentYoffset)}%)`

답변 1

답변을 작성해보세요.

0

와, 리액트로 응용해서 하시는군요! 👍
정확한 원인을 알기는 어렵지만.. calcValues가 리턴하는 값을 출력해 보시고, 특정 수치 이하(0.1이라든지)일 경우 opacity를 0으로 해주는 식으로 하면 일단 해결은 할 수 있을 것 같습니다.