인프런 커뮤니티 질문&답변
작성한 질문수
[Main.js 적용내용 강의] 질문.
해결된 질문
작성
·
118
0
pinB & pinC같은경우는, sticky-elem desc-message의 하위속성인데요.
<div class="sticky-elem desc-message b">
...
<div class="pin"> </div>
</div>
그래서 sticky-elem desc-message b 의 태그에 대해서 js로 opacity를 정해주면 desc-message b 뿐만아니라 pin까지 opacity가 조정되더라구요.
근데 완성코드와 강의영상에는
(1) 메세지에대한 opacity정보와
messageB_opacity_in: [0, 1, { start: 0.6, end: 0.65 }]
(2) 추가적으로 pinB에 대한 opacity값까지 설정하고 조정하시던데..
pinB_opacity_in: [0, 1, { start: 0.6, end: 0.65 }],
이렇게하는 특별한 이유가 있을까요?
+) 또 opacity속성에 scaleY로 된 값을 넣어주는 특별한 이유가 있을까요?
objs.pinC.style.opacity = `scaleY(${calcValues(values.pinC_opacity_in, currentYOffset)})`;
감사합니다.
답변 1
2
아- 이 부분은 몇번 수정하다보니 코드에 잘못된 부분이 들어갔네요;
opacity에 scaleY를 설정한 부분은 제 실수입니다^^;;
저렇게 무용지물인 값을 넣게 되면 따로 에러가 나는 것은 아니고, 그냥 아무일도 일어나지 않습니다.
얼른 수정해두도록 하겠습니다!
말씀대로 opacity는 pin들이 따로 동작해야하는게 아니라면 message에만 설정해주시면 되고,
좀 다른 느낌으로 따로 진행되어야 하면 따로 해주시면 됩니다.
이 예제랑 똑같이 만든다기보다, 어떤 의도로 값을 넣었는지만 파악해주시면 될 것 같습니다^^
오류인 부분을 알려주셔서 감사합니다!! 예제가 좀 복잡하다보니 이런 부분이 조금씩 있네요^^;;;
말씀대로 여기서 pin은 이런 식으로 transform만 조정해주면 되겠네요!
if (scrollRatio <= 0.93) {
// in
objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`;
objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset);
objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`;
} else {