이런 기능은 어떻게 만드는지 아시는분 계신가여?

이런 기능은 어떻게 만드는지 아시는분 계신가여?

QA

이런 기능은 어떻게 만드는지 아시는분 계신가여?

본문

안녕하세요

 

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으로 검색하면 많이 나옵니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 21
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT