인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요 ScrollSmoother에 대해 질문드릴게요
작성
·
79
1
안녕하세요 ScrollSmoother에 대해 질문드릴게요!
이번 강의 너무 잘보고 있는데 ,
다른분의 질문을 보고 ScrollSmoother가 무료가 되었다라고 말씀하셔서 활용해보려고 합니다.
사용법이 ID를 레퍼하여 자식 div를 tramsform으로 따라오는식으로 스무디 효과를 주는건 확인했습니다
근데 만약에 페러렉스 효과를 백그라운드 이미지에 반영해보려니 tramsform의 크기를 따라가는지 background fixed같은건 전혀먹히지가 않는거같네요 ..
스크롤링하면 부드럽게 스무스 하게 되면서
bg의 포지션도 살짝움직이는 식으로 구현해보려 했는데 혹시 방법이 없을지 질문드립니다. ㅜ
답변 2
1
1
안녕하세요 squirrel PARK님 😀
스크롤을 부드럽게 하는 플러그인의 도움을 받을때는 background-attachment:fixed와 같은 브라우저가 제공해주는 기능을 가지고는 효과를 구현할 수 없습니다
scrollSmoother에서 parallax효과를 주고 싶다면, effetcs 모드를 true로 설정 후 애니메이션을 주고싶은 대상 엘리먼트의 속성으로 data-speed값을 적용시켜주시면 쉽게 애니메이션을 구현할 수 있습니다 😀
import { gsap } from 'gsap';
import { ScrollSmoother } from 'gsap/ScrollSmoother';
gsap.registerPlugin(ScrollSmoother);
ScrollSmoother.create({
wrapper: '#smooth-wrapper',
content: '#smooth-content',
smooth: 1.5, // 부드러운 정도
effects: true // data-speed 지원 켜기
});
<img src="stars.png" data-speed="0.3">
<h1 data-speed="1.8">우주여행</h1>
scrollSmoother가 무료로 제공된 만큼 최대한 빠르게 영상을 업데이트해 올려보도록 하겠습니다.
강의 열심히 수강해주셔서 감사합니다 :)
안녕하세요 squirrel PARK 님 😀
parallax 와 부드러운 스크롤을 주기위한 선택으로 scrollSmoother와 lenis를 비교하진 않습니다.
background-attachment:fixed의 네이티브 (브라우저) 기능을 사용하고 싶다면 lenis를 사용하셔도 되고 네이티브가 동작하지 않는 문제는 거의 모든 스크롤 라이브러리가 가지고 있습니다. 사실문제라기 보다도 동작 방식이 부드럽게 translate 되도록 만들어야 하니 당연한 것이기도 하고요
단순 배경만 고정시키고 싶다면 간단하게 문제를 해결할 수 있습니다.
섹션보다 더 뒤에 고정될 이미지를 넣고 배경이 고정되어 보일 곳에 섹션의 배경을 투명하게 만들어 놓으면(아무 색깔도 넣지 않은 배경) 그 뒤에 이미지가 고정되어 보이는 효과를 가져올 수 있습니다.
(고정될 이미지는 전체 부모 스크롤보다 밖에 있어야 합니다)
말고도 여러 가지 방법들이 있지만,, 글로 설명하는 데에는 한계가 있는 듯합니다 ㅠㅠ
해당 설명을 참고하여 만들어보세요!
감사합니다 :)
빠른 답변 감사합니다!
그렇다면 강의 내용은 아니지만,
만약 페러랙스 효과 + 스크롤스무디 형식으로 주기위해서는 lenis 쓰는게 더 간단할까요?
이슈를 찾아보니 글로벌하게 ScrollSmoother를 쓰게되면 fixed나 bg-cover가 상이한 문제점들이 존재하더라구요..
페이지마다 새로 써야하는 방안이나 lenis로 변경하는 수밖에 없을까요?
스무서 강의 기대하고있겠습니다!