인프런 커뮤니티 질문&답변
작성한 질문수
궁금한게 있습니다~!
작성
·
198
0
안녕하세요~!
ScrollTrigger 실무 활용_visual영역 제작하기 강의를 보던중 궁금한게 생겨서 여쭤봅니다!
8분 25초쯤보면 html,css 작업까지만 했을때 img_1의 높이만큼 스크롤이 생겼는데,
10분 47초에 scrollTrigger를 적용해주니까 높이값이 많이 늘어나있던데
혹시 왜 늘어나는지 알수있을까요??
스크롤트리거를 사용하려면 스크롤이 되어야하는건 알겠지만 따로 높이값을 지정하지 않았는데 어떤것을 기준으로 늘어난건지 궁금해서 여쭤봅니다!
답변 2
0
안녕하세요? 넴모님
제가 개인사정으로 출타중이여서 이제서야 답변드리게되어 정말 죄송합니다.
말씀하신부분이 ScrollTrigger실무활용_ visual영역 마크업작성부분인가요? 영상으 8분27초에 부분을 살펴보는데 이미지가 늘어난 부분은 안보여서요...
제 메일로 코딩결과물을 보내주시면 확인하고 답드리도록 하겠습니다.
jjjh523@nate.com입니다.
감사합니다.
J.young드림
0
안녕하세요, 인프런 AI 인턴입니다.
님께서 궁금해하신 ScrollTrigger의 작동 방식에 대해 말씀드리겠습니다. GSAP의 ScrollTrigger 플러그인을 사용할 때, 특정 요소를 기준으로 스크롤 애니메이션이 시작되고 종료되는 지점을 설정할 수 있습니다. ScrollTrigger를 적용하면, 해당 요소가 뷰포트(화면)에 들어오고 나갈 때까지의 스크롤 길이를 기반으로 애니메이션 효과가 발생합니다.
스크롤 길이가 늘어난 것은 ScrollTrigger가 애니메이션 효과를 구현하기 위해 추가적인 스크롤 공간을 생성했기 때문입니다. 즉, ScrollTrigger를 사용하면, 애니메이션 효과의 시작과 끝을 정의하는 과정에서 자동으로 필요한 만큼의 스크롤 길이를 설정하기 때문에 높이 값이 늘어난 것처럼 보일 수 있습니다. 이는 사용자가 따로 높이 값을 지정하지 않아도 ScrollTrigger가 내부적으로 계산하여 처리하기 때문입니다.
이러한 특성 때문에 ScrollTrigger를 사용하여 동적으로 페이지의 스크롤 길이를 조절하며 다양한 스크롤 기반 애니메이션을 구현할 수 있습니다. 당연히 개발자는 애니메이션 효과가 어떻게 보여질지, 어느 정도의 스크롤 길이가 필요할지를 ScrollTrigger의 옵션을 통해 조절할 수 있습니다.
추가적으로 강의나 ScrollTrigger 관련 문서를 참고하시면, 보다 자세한 사용 방법과 다양한 효과 구현 사례를 확인하실 수 있을 것입니다.
원하는 답변을 드릴 수 있었기를 바랍니다. 다른 궁금한 점이 있거나 추가적인 도움이 필요하시다면 언제든지 문의해주세요!