개발자

css나 canvas같은데 효과이름을 모르겠습니다.

2024년 03월 26일조회 126

https://www.does.kr/# 안녕하세요. 읽어주셔서 감사합니다. 이 웹사이트를 보는데 스크롤링 할 때마다 다음 페이지가 넘어오기 전에 잠깐 화면을 가렸다가 다시 나타나는 효과를 뭐라고 찾아봐야 할지 아시는 분 계실까요? 저 효과가 마음에 들어서 한번 따라 만들어보고 싶어서요. canvas로 이루어져 있는 것 같은데 .. 자세히 보면 그 화면 가리는 레이어의 위와 아래쪽이 살짝 일렁이는 것도 있고요. GSAP로 비슷하게 구현이 가능한 것 같던데 유료인거같아서요. 하루 종일 찾아봐도 뭐라고 찾아봐야 하는지 몰라서 여쭈어봅니다!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

인기 답변

박정환님의 프로필 사진

swiper를 사용해서 특정 동작시 animation이 실행되도록 스크립트를 먹인것 같네요. 이밖에 여러가지 추가한 것 같습니다. 샘플코드 : https://swiperjs.com/demos https://swiperjs.com/demos#mousewheel-control 이게 기반이고, 이것저것 더 넣은것 같네요. 화면을 덮는건 css swiper 화면 cover 등으로 찾아보면 되지 싶습니다.

profile picture

익명

작성자

2024년 03월 26일

답변감사합니다 ! swiper는 바닐라로 만들었는데 애니메이션같은 트렌지션이 갈피가 안잡히네요.. 감사합니다!

박정환님의 프로필 사진

박정환

HecatonAI Lab Leader2024년 03월 26일

https://do-dam.tistory.com/145 이분 글도 참고해보세요 물결이 차오르는 애니메이션이네요.

박정환님의 프로필 사진

박정환

HecatonAI Lab Leader2024년 03월 26일

https://getwaves.io/ 웨이브를 만들어주는 사이트. 유용하네요

profile picture

익명

작성자

2024년 03월 27일

감사합니다. 참고해서 만들어보겠습니다 ! 저도 찾다보니 괜찮은 사이트가 있어서 공유해봅니다 ! https://tympanus.net/codrops/demos/

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!