개발자
https://www.does.kr/# 안녕하세요. 읽어주셔서 감사합니다. 이 웹사이트를 보는데 스크롤링 할 때마다 다음 페이지가 넘어오기 전에 잠깐 화면을 가렸다가 다시 나타나는 효과를 뭐라고 찾아봐야 할지 아시는 분 계실까요? 저 효과가 마음에 들어서 한번 따라 만들어보고 싶어서요. canvas로 이루어져 있는 것 같은데 .. 자세히 보면 그 화면 가리는 레이어의 위와 아래쪽이 살짝 일렁이는 것도 있고요. GSAP로 비슷하게 구현이 가능한 것 같던데 유료인거같아서요. 하루 종일 찾아봐도 뭐라고 찾아봐야 하는지 몰라서 여쭈어봅니다!
답변 1
인기 답변
swiper를 사용해서 특정 동작시 animation이 실행되도록 스크립트를 먹인것 같네요. 이밖에 여러가지 추가한 것 같습니다. 샘플코드 : https://swiperjs.com/demos https://swiperjs.com/demos#mousewheel-control 이게 기반이고, 이것저것 더 넣은것 같네요. 화면을 덮는건 css swiper 화면 cover 등으로 찾아보면 되지 싶습니다.
익명
작성자
2024년 03월 26일
답변감사합니다 ! swiper는 바닐라로 만들었는데 애니메이션같은 트렌지션이 갈피가 안잡히네요.. 감사합니다!
박정환
HecatonAI Lab Leader • 2024년 03월 26일
https://do-dam.tistory.com/145 이분 글도 참고해보세요 물결이 차오르는 애니메이션이네요.
박정환
HecatonAI Lab Leader • 2024년 03월 26일
https://getwaves.io/ 웨이브를 만들어주는 사이트. 유용하네요
익명
작성자
2024년 03월 27일
감사합니다. 참고해서 만들어보겠습니다 ! 저도 찾다보니 괜찮은 사이트가 있어서 공유해봅니다 ! https://tympanus.net/codrops/demos/
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!