강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của edwinpark
edwinpark

câu hỏi đã được viết

Bản sao tương tác trang web của Apple!

chi tiết ứng dụng main.js

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

Đã giải quyết

Viết

·

528

·

Đã chỉnh sửa

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)}%)`
HTML/CSSjavascript웹-디자인svg인터랙티브-웹클론코딩

Câu trả lời 1

0

studiomeal님의 프로필 이미지
studiomeal
Người chia sẻ kiến thức

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

Hình ảnh hồ sơ của edwinpark
edwinpark

câu hỏi đã được viết

Đặt câu hỏi