샘플 작업물 모음 (html, css, js)
https://catteine.github.io/my-samples/
canvas 활용해서 서명하는 박스 만들기.
어떤 이벤트 페이지에 있던 모듈을 참고해서 샘플을 만들어봄.
마우스로 서명 입력 후 이미지로 뽑아내는 기능을 구현.
데이터 카운터 모듈.
data 속성에 입력된 값으로 delay 순으로 카운팅 진행.
여러 형태의 모듈을 만든 후, 다른 페이지들에 사용했었음.
flash를 가지고 이것저것 해보던 생각이 나서 js로 만들어봄.
여러 개의 오브젝트가 움직이고 튕기는 동작을 구현하기를 원했음.
충돌각이나 튕겨나가는 계산법은 다른 블로그에 올라와 있던 것을 참조해서 작성하였음.
실제 작업에 사용했던 Charts.js 샘플.
작업물 중 일부만 옮겨옴.
원형 프로그레스바 샘플.
canvas를 사용하지 않고, clip을 사용해서 원을 표현.
스크롤 진행 상황의 계산식을 넣어서 프로그레스 기능으로 활용.
프로젝트에 사용하기 전 샘플로 만들었던 것을 옮겨옴.
룰렛 샘플.
Winwheel.js 활용 (http://dougtesting.net/home)
타입1 : 지정된 결과를 향해 룰렛이 돌아가다 서서히 멈춤
타입2 : 룰렛은 계속 돌아가며, 일정 시간 후 결과값을 내보냄
처음에 css3로 간단히 룰렛을 제작하였다가, 이런 저런 기능이 필요해서 찾아본 라이브러리를 활용.