테스트 사이트 - 개발 중인 베타 버전입니다

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

완전핵초짜 3년 전 조회 1,830

안녕하세요

 

http://atdfair2021.co.kr/home/

 

해당 홈페이지의 메인에 사람들이 움직이는데

캔버스? 로 하는 것 같은데

저 사람들은 gif 일까요?

아니면 진짜로 canvas로 만든걸까요...

 

어떻게 만든건지 궁금한데 아신느분 계신가요???

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
e
3년 전

개발자도구(F12) 해서 소스 보시면,

canvas 라고 나옵니다.

</p>

<p><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></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

B
3년 전

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인