360도 회전 제품 소개 뷰어 html/css 소스

휴대폰이나 차량 소개페이지에 가서 보면 실사 이미지로 회전해 가면서 볼수 있게 만들어 놓은걸 볼 수 있을텐데요.

오늘 소개해드리는 내용이 바로 360도 회전 제품 소개 뷰어 html/css 소스입니다. 

백문이 불여일견이죠. 아래 버튼을 눌러보면 레이어 팝업으로 구동되는 360도 회전 제품 뷰어를 보실 수 있습니다.

360 Degrees Product Viewer

360 Degrees Product Viewer

Handle

Close

멋진 자동차 이미지가 옆면 후면 앞면등을 살펴볼 수 있게 되어있네요.

역시나 간단한 방법으로 위와 같은 360도 뷰어를 만들어 볼 수 있습니다. 

준비되어야 할 것들입니다.

첫번째로 JS파일을 업로드 합니다.

jquery.mobile.custom.min.js

jquery-2.1.4.js

main.js

modernizr.js

다음으로는 360도 회전시킬 이미지가 필요한대요. 사실 이 이미지 만드는게 가장 힘들 수 있겠네요^^

이 이미지는 기본 16프레임으로 되어있습니다. 좀 더 세밀함을 요할때는 프레임 수를 더 늘리면 되겠죠. 다만 아래 소개해드릴 html 소스에서 약간의 조정이 필요합니다.

위 소스의 멋진 자동차 이미지 파일입니다. 

img.zip

마지막으로 스타일을 잡아줄 CSS 소스를 적용시켜 줍니다. 

style.css

이제 준비가 되었구요.

위 데모 뷰어와 같은 html을 소개해드릴게요. 참 잉크번짐 레이어 팝업 효과는 생략한 소스입니다.

	


	
360 Degrees Product Viewer


	

		

			
			

		
 

		

			
			Handle
		
	
 
 
	


 

	
 
	Close
 

아까 말씀드렸듯이 프레임이 변경된다고 하면 data-frame= 부분의 16 숫자를 조정해주시면 됩니다. 

32프레임이라고 하면 이미지는 32이 연속되서 나와야 하고 16 숫자를 32로 바꿔줘야 하겠죠.

도움이 되셨나요? 

다음번에도 멋진 효과가 적용된 소스를 소개해드릴게요^^

이상으로 360도 회전 제품 소개 뷰어 html/css 소스에 대한 포스팅을 마칩니다.