jQuery Scroll animate (동적 스크롤 이동)

jQuery를 이용하여 Scroll animate 를 해봅시다.

jQuery의 공식 site는 http://jquery.com 입니다.
모든 프로그래밍이 그렇겠지만 공식 사이트에서 document만큼 중요한것이 없습니다.

제가 하고자 하는것은 scroll을 동적으로 이동 시키는 것입니다.
html 태그와 jQuery의 기본 문법을 알고 있으면 간단하게 구현할수 있습니다.

jQuery에서는 Effect 효과중 animate라는 것을 제공하고 있습니다.
http://api.jquery.com/animate/

해당 api document 에는 간단한 예제들을 예를 들고 있습니다.
위의 link를 타고 들어가시면 이게 어떻게 사용하시는지 아실수 있으실 것입니다.

간단하게 설명을 드리면..
.animate뒤에 파라메터로 총 4개(혹은 2개)를 넣을수 있습니다. (2개는 1개는 properties, 나머지는 option으로 인식합니다.-4개를 않넣었을경우)

• properties :animate 이벤트 동작시 변화시킬 css 형식입니다. 즉, animate는 css를 변경시켜 효과가 일어나게 하는것 입니다. (필수값 입니다.)
  
• duration : 속도를 의미합니다. 기본적으로 제공되는 두가지는 'fast','slow' 입니다. fast는 200 millisecond, slow는 600 millisecond 입니다. 사용자는 임의로 duration에 millisecond 단위를 입력하셔도 됩니다.
• easing : 이 파라메터는 외부의 jquery plugin 이니 외부 fuction에서 이 해당 animate의 paramter를 사용하게 할경우 사용되게 됩니다. easing 에는 function 이름이 들어가게 됩니다.주로 animate의 기능을 향상시키고자 하는 목적으로 사용하게 됩니다. 
• (원문: The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.)
• callback : 해당 animate 기능이 다 완료 된뒤에 어떠한 작업을 하고 싶을경우 사용합니다.

그럼 제가 간단하게 scroll에 animate를 적용하는 것을 보여 드리도록 하겠습니다.

html 코드

　
　

			

				

					

						test11
						test12
						test13
						test14
						test15
						test16
						test17
						test18
						test19
						test20
						test21
						test22
						test23
					
				
			
		
		

		test11

javascript 코드

sample page (http://devmind.hosting.paran.com/sample/scroll)

디자인 감각이 없어서 이쁘게 만들지는 못했지만.
소스를 모시면 아시겠지만.아래 링크를 누르면 javascript function을 호출합니다.
파라메터로 접근하고자 하는 객체의 id 값을 넘겨줍니다.
그러면 javascript function 에서

$("#sc").animate({scrollLeft:locationPosition},1000,function(){ 
				// animate complete
});

css의 scrollLeft 의 위치를 변경 시켜 주고 있습니다.

var locationPosition = $("#"+obj).position().left-$("#sc").position().left
                                   +$("#sc").attr("scrollLeft");

위의 위치를 설정하는 script를 보면 이동하고자 하는 obj의 왼쪽위치-스크롤이 있는 왼쪽위치+현재 스크롤바의 스코롤 위치 입니다.

간단하게 jQuery의 animate를 이용하여 동적으로 이동하는 스크롤 event를 만들어 보았습니다.