인터렉티브 웹? 애니메이션? 이러한 페이지는 어떤 기술로 만드나요?

Question

안녕하세요 신입 프론트엔드 개발자로 일하고 있습니다.랜딩페이지를 하나 만드려고 하는데요. 아래와 같이 계속해서 움직이는 애니메이션이나사용자 스크롤에 따라 반응하는 효과들을 구현하려고 하는데 보통 어떤 기술을 이용해서 구현을 하나요?인터렉티브 웹 검색하면 d3, three.js, framer motion 등 나오는데 어떤걸로 하는지 감이 잘 안오네요..주위에 물어볼 곳이 없어서 질문드립니다 !https://home.smore.im/template/work-from-home-surveyhttps://ohou.se/experts/moving

스프라이트마시쪙 · Answer

사용자 스크롤에 반응하는 효과 라이브러리는 gsap 한번 보시면 될 거 같고요아래와 같이 계속해서 움직이는 애니메이션은 보통 특정 기능 없으면 css로 구현 가능합니다.무한일 경우에는 이미지 두개를 flex로 해서 인피니티 속성하고 잘 맞춰서 작업하면 충분히 가능 할 것 같습니다.

범주 · Answer

브라우저에서 움직이는거 구현하시려면1. CSS 애니메이션2. SVG 애니메이3. 2D canvas4. webgl5. webgpu이정도가 옵션인데요보여주신 예제를 구현하려면 1번을 추천드립니다

풍월상신(가니메디안) · Answer

WEB 에서 애니메이션 효과는,video, transition, animation 이렇게 세가지로 분류됩니다.video 는 이미 알고 계시는 그런 유형의 동영상 파일이 embed 되는 거고요,transition 은, 하나의 요소가 [상태A] 에서 [상태B] 로 부드럽게 전환되는 효과입니다.animation 은 keyframe 으로 애니메이션 프레임이 관리되는 CSS 의 방식입니다.본문에서 링크로 붙여주신 사이트에서 사용된 애니메이션 효과는embed 된 동영상 파일들에, transition 뿐인, 매우 단순한 레벨의 애니메이션 효과만 사용되었어요.스크롤 에 반응하는 animation 에 대해 말씀드리자면...GSAP 은 무료가 아닙니다. 라이센스를 면밀히 조사하고 프로젝트에 도입하셔야 해요.최근에 Scroll-driven animation 이라고, 브라우저 공식 지원 표준이 크롬에서 나오긴 했지만,사파리와 FF 에서 아직 지원이 안됩니다. 마땅한 폴리필도 아직 없는 것으로 알아요.아직까지는 Scroll 에 반응하는 animation 은 intersectionObserver 를 사용해서 직접 구현하셔야 해요.처음 애니메이션 효과를 따라 배우기 좋은 유튜브 무료 강의를 하나 추천합니다.envato 에서 수준 있는 무료 강좌를 자주 공개해주고 있는데, 이 강의는 따라해 보면 애니메이션에 대한 이해도를 높이기 아주 좋습니다.영어 발음도 천천히 또박또박이어서 알아듣기도 어렵지는 않습니다. 캡션을 켜고 자막으로 보셔도 되요.https://www.youtube.com/watch?v&#61;vqXLGX0szIQ&t&#61;11075s&ab_channel&#61;EnvatoTuts%2B이 강좌만 따라하셔도 intersectionObserver 활용과, 본문에 예시로 드신 애니메이션 정도는 혼자서도 충분히 구현하실 수 있을 겁니다.그리고, 인터랙티브 애니메이션 연출은, daisy-UI 를 따라갈 만한 연출을 저는 보지 못한 것 같은데..견문을 넓힐 겸, 재미삼아 구경 한번 해보시죠.https://daisyui.com/

인터렉티브 웹? 애니메이션? 이러한 페이지는 어떤 기술로 만드나요?

3개의 답변

기술 목록