Flying Chars
- 홈페이지에 접속하면 아래 영상과 같이 이미지들이 둥둥 떠다니는데요.
- 다시 홈페이지로 접속해서 응답 값의 스크립트 태그 내부를 살펴보면, 애니메이션 관련 코드를 확인할 수 있습니다.
/static/images/{NUMBER}.png플래그 값이 저장된 이미지 파일인데요.move()함수 내부를 살펴보면 이 이미지 파일들을 한 눈에 보기 어렵도록 계속해서requestAnimationFrame(move)을 통해 재귀적으로move()함수를 호출하는 것을 알 수 있습니다.- 따라서, 53 라인의
requestAnimatinoFrame(move)코드만 제거해주면 이미지가 더 이상 움직이지 않게 됩니다.
- 백문이 불여일견, 53 라인의 코드를 제거한 후 홈페이지에 접속해보겠습니다. - 각 이미지(0~19.png)는 `Math.random()*60+20` 만큼 가로 축으로 이동(`translatX(${pos}px)`)한 것을 볼 수 있습니다. - 멈춰있는 이미지를 쭈우욱 이어주면 플래그가 나오네요.
