🎉 멋사 5기 최고의 네모 모야모야뀽 캐릭터 만들기 대회 🎉
실행 url - https://limjeein.github.io/1ghost/
배운것을 활용해서 나만의 캐릭터를 만들어 보는 시간을 가졌다
정말 마음대로 해도 된다고 ?! ㅎㅎ
주 평가는 캐릭터의 얼굴만 심사한다 하신다
(애니메이션, 몸통, 배경은 심사 대상에 큰 요인이 아니다)
심사위원은 누구신지 모르겠지만 '놀라주셨으면 좋겠다' 고만 생각하며 만들었다 👻✨
사용자가 이것저것 눌러보거나 마우스로 장난을 치기 때문에 마우스에 호버를 걸기로 다짐하며 시작 ㅎㅎ
HTML / CSS 레이아웃 단계
최대한 무섭게.....무섭게.. ? 나름 무섭게 만들었다고 노력했지만
참 단순하게 생겨서 몸통과 눈 모두 동글동글 귀여운거 같다 ㅠㅠ
아 캐릭터는 단순해야 하지...?
그래도 아쉽다
이럴때 다양한 곡선의 구현에 한계를 느꼈다
CSS animation 으로 유령을 움직여보았다
유령의 몸통과 눈 색상, 입 크기에 변화를 주었다
그리고 :hover { transform: scale(6); } 을 적용하면
유령이 커지며 화면 앞까지 다가오기 때문에 아이컨택이 가능하다
실행 url을 확인하면 움직임을 확인할 수 있다
( 쓰레드에 올릴 당시 페이지를 확인 할 사용자들에게 쓰다듬기 로 마우스 호버 유도를 했다 👻)
사용자의 입장에서 어떨 때 가장 놀랄까
친구들에게도 실험해 보았다
캐릭터가 무섭게 생기지 않은 편이라 그닥 놀라진 않지만 그래도 만족..! 👻
그리고 생각지도 못한 결과가 나왔다
별거 없는데 좋게 봐주셨나보다..
즐겁게 만들었는데 기분 좋은 경험이었다 😊
여기서 자바스크립트로 넘어가보자 ❗
