Propeller는 마우스를 사용하여 요소를 회전시키는 JavaScript 라이브러리입니다. 관성 회전과 단계적 회전을 지원하며 터치 장치와도 호환됩니다.
평가하기
# 설명
Propeller.js 는 마우스를 이용하여 요소를 회전시키는 JavaScript 라이브러리 입니다.
관성 회전과 단계적 회전을 지원하며, 터치 기기와도 호환 됩니다.
# 라이센스
MIT License
# 사용방법
압축파일에 보시면 index.html 파일을 이용하면 바로 작동되는 걸 확인할 수 있습니다.
# 옵션 설정
- angle: 초기 회전 각도를 설정합니다.
- inertia: 가장 중요한 옵션으로, 0과 1 사이의 숫자로 설정합니다. 0은 마우스를 뗐을 때 회전이 즉시 멈추는 것을 의미하며, 1은 무한히 회전함을 의미합니다. (이 데모에서는 0.99를 사용합니다.) - speed: 초기 회전 속도입니다. 실행 중(Runtime)에 속도 값을 변경하는 용도로도 사용할 수 있습니다. - minimalSpeed: 회전의 최소 속도입니다. 관성(inertia) 값이 0에서 1 사이일 때만 작동합니다. - step: 단계별 회전 모드를 사용할 때, 각도 단위로 단계(step)를 설정합니다. - stepTransitionTime: 단계와 단계 사이를 이동할 때 CSS 트랜지션(효과)을 활성화합니다. 이를 통해 회전 단계를 부드럽게 만들고 CSS의 easing 효과를 적용할 수 있습니다. - stepTransitionEasing: 단계별 회전 모드에서 stepTransitionTime이 0보다 클 때 적용되는 CSS easing 모드입니다. - onRotate: 회전하는 동안 실행되는 콜백 함수입니다. 함수 내부에서 this.angle을 통해 현재 각도를 쉽게 가져올 수 있습니다. - onStop: 회전이 멈췄을 때 실행되는 콜백 함수입니다. - onDragStart: 드래그를 시작할 때 실행되는 콜백 함수입니다. - onDragStop: 드래그를 멈췄을 때 실행되는 콜백 함수입니다.
이미지 변경하면 뽑기 돌림판으로 사용해도 좋을 것 같습니다.
네티즌 의견이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
