이런 기능은 어떻게 만드는지 아시는분 계신가여?
본문
안녕하세요
http://atdfair2021.co.kr/home/
해당 홈페이지의 메인에 사람들이 움직이는데
캔버스? 로 하는 것 같은데
저 사람들은 gif 일까요?
아니면 진짜로 canvas로 만든걸까요...
어떻게 만든건지 궁금한데 아신느분 계신가요???
답변 2
개발자도구(F12) 해서 소스 보시면,
canvas 라고 나옵니다.
<div id="animation_container" class="main_obj" style="width:1308px; height:900px">
<canvas id="canvas" width="1308" height="900" style="position: absolute; display: block; width: 1308px; height: 900px;"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1308px; height:900px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
canvas 맞습니다. 어차피 살펴보면 다 나오니까 적어보자면…
- http://atdfair2021.co.kr/images/obj2.png - 왼쪽 아래
- http://atdfair2021.co.kr/images/main_bg.png - 오른쪽 바닥
- http://atdfair2021.co.kr/home/images/main_ani_atlas_.png?1622417877162 - 그 위에 배치되는 이미지들(이미지 스프라이트)
그 외 움직이는 4명, 와이파이 신호, 하트, 스크린 속 화면 등 요소 추가군요.
Canvas animation으로 검색하면 많이 나옵니다.
답변을 작성하시기 전에 로그인 해주세요.
