[일상] 웹 개발자분 계신가요..?

질문이 있어서 여쭤보려구요,...!

http://tales.nexon.com/200521/Update

테일즈위버 이벤트 프로모션 페이지인데..

여기서 흩날리는 불꽃 애니메이션이 JS인가요?CSS?? 이런건가요?

아니면 알파채널 동영상을 Z-index를 통해서 얹어놓은건가요?

혹시 영상을 얹어놓은거면 방법 좀 알려주시면 감사하겠습니다!

[봉승구리]

캔버스로 만들어진것입니다. 디자인과 프론트앤드 개발의 그 사이 어딘가입죠 껄껄..

[늑대]

오잉..!캔버스는 또 뭔가요...?ㅜㅜ
우선 무엇인지는 알았으니 검색을 해보겠습니다!
감사해요!

[Jell]

http://js.nx.com/s1/game/tales/event/2020/event_0518.js
여기 particle 함수가 구현쪽이네요.

[늑대]

감사합니다!!!ㅎㅎㅎㅎㅎ

[봉승구리]

마크업 언어로 만드는것이긴한데 랜더링하는 형태입니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage

[늑대]

오우 함수가 필요하군요..감사합니다!!!
공부 좀 해야겠네요 ㅠㅠ

[봉승구리]

참고로 저기서 쓴건 이거일거예요.
https://vincentgarreau.com/particles.js/

[늑대]

와대박!!! 감사합니다!!!!

[김얗마]

저 사이트에서 다운받는 스크립트 중에 TweenMax.js 라는 것이 보여서 해당 사이트를 좀 살펴봤는데 이걸 이용해서 표현 할 수 있을 것 같아요.
랜덤으로 움직이는 경로를 정해주면 될듯
https://greensock.com/forums/topic/16931-animate-element-across-screen/
https://greensock.com/forums/topic/16631-migrate-from-svg-animations-to-canvas/

[늑대]

링크까지 상세하게...감사합니다!
포트폴리오 적용에 꼭 필요한 것들이라 ㅠㅠ
정말 감사해요

[김얗마]

여기다 html 태그 작성하면 변환되버리네요. 쪽지로 남길게요

[김얗마]

쪽지보내기도 코드가 잘려서 여기에 참고용 링크 남겨요.
https://codepen.io/yahma25/pen/bGVPWQw
html에 그대로 옮겨놨어요.
개발쪽이 아니시면 좀 어려울 수 있어요. 효과를 만드는 거라.