jQuery 공작소 : easing(이징) 효과 모음

easing 효과를 사용하려면 ?

jQuery

easing 효과를 사용하는데만 중점을 둔 설명입니다.

- http://jqueryui.com/ 에 접속 후 우측에 Stable 버튼을 눌러서 다운 받습니다.
- 다운 받은 파일을 압축해제 하고 jquery-ui.min.js 파일을 찾습니다.
- 해당 파일을 추가로 로딩해서 사용하면 됩니다.
- <script type="text/javascript" src="jquery-ui.min.js"></script> 이렇게요.

※ 제이쿼리 자체만으로는 easing 효과를 지원하지 않습니다. 추가로 제이쿼리UI 필요.

피사의 사탑 낙석 easing 효과 모음

보기

linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce
위 효과의 이름을 눌러보세요.

jQuery

- easeOutBounce 효과가 가장 적절하군요.

이미지에 easing 효과 적용하기

보기

linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce
위 효과의 이름을 눌러보세요. 누를때 마다 보였다 안보였다 합니다.

다 같이 점프 !!

보기

linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce
위 효과의 이름을 눌러보세요.

jQuery

- 이 예제는 움직임이 끝날때까지 중복 실행이 되지 않도록 되어있습니다.

easing 효과 명칭 정리 (32개의 효과)

jQuery

linear
swing
위 두개는 제이쿼리UI 없이도 사용할 수 있습니다. 기본값은 swing 입니다.

효과의 이름은 ease In, Out, InOut 이름 형태로 조합이 됩니다.
예) easeInQuad, easeOutQuad, easeInOutQuad

easeInQuad
easeOutQuad
easeInOutQuad

easeInCubic
easeOutCubic
easeInOutCubic

easeInQuart
easeOutQuart
easeInOutQuart

easeInQuint
easeOutQuint
easeInOutQuint

easeInSine
easeOutSine
easeInOutSine

easeInExpo
easeOutExpo
easeInOutExpo

easeInCirc
easeOutCirc
easeInOutCirc

easeInElastic
easeOutElastic
easeInOutElastic

easeInBack
easeOutBack
easeInOutBack

easeInBounce
easeOutBounce
easeInOutBounce

jQuery 공작소 : easing(이징) 효과 모음

easing 효과를 사용하면 수학적인 계산을 이용하여 특수한 움직임을 만들 수 있습니다. 띠요오오옹~~ 이런 효과 말이죠. ^^;

easing 효과를 사용하면 수학적인 계산을 이용하여 특수한 움직임을 만들 수 있습니다.
띠요오오옹~~ 이런 효과 말이죠. ^^;