댓글 수정
패스워드 :
답변 쓰기
패스워드 :
- 확인을 누르면 댓글이 삭제됩니다 !! -
패스워드 :
등록일 :
작성자 :
급행 제이쿼리(jQuery) 강좌ㆍ강의 - 초급에서 중급까지만 !
[예제] 제이쿼리 애니메이션 효과 예제
제이쿼리 애니메이션의 움직임 특수효과를 예제로 만들어 보았습니다.
여러 효과가 있는데요. 이런건 직접 눈으로 봐야 알 수 있죠.
이 예제를 통해서 한번 확인해 보세요 ^^*

피사의 사탑에서 돌 낙하 실험 (아래 버튼들을 눌러서 돌을 떨어뜨려 보세요)

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 깜놀
▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

간단한 설명

그림 아래의 버튼들이 움직임 효과의 이름입니다. 이 이름을 사용하여 효과를 줄 수 있죠.
재미로 만들어본 예제인데요. 다음에 제대로 다뤄보겠습니다.
 
아래 소스도 있으니 직접 해보시면 좋겠죠? ㅎㅎ
별다른 준비없이 바로 실행할 수 있는 소스입니다.

참고 : http://jqueryui.com/resources/demos/effect/easing.html

제이쿼리 효과 데모페이지 입니다.

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

피사의 사탑 소스

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

마치며 ...

생각난 겸에 예제를 만들어 보았습니다. 오랫만에 재미있었습니다.
2000년대 초반 개인홈페이지를 만들기에 빠져있을때 이런 좀 엉뚱한것 만들기를 참 좋아했는데요.
나이를 먹으니 그런 성향이 바뀌네요.

그리고 오랫만에 해보니 감회가 새롭군요. 실력, 경험은 부족했지만 호기심과 열정이 충만했던 그 시절이 그립네요. ㅋㅋ

다음은 셀렉터 강좌를 다시 이어가겠습니다.

http://superkts.com/jquery/@easingEffects
위 링크에 관련 내용만 따로 정리해 두었습니다.
▼ 덧보기
댓글 쓰기
이름 : 패스워드 :