휴대폰이나 차량 소개페이지에 가서 보면 실사 이미지로 회전해 가면서 볼수 있게 만들어 놓은걸 볼 수 있을텐데요.
오늘 소개해드리는 내용이 바로 360도 회전 제품 소개 뷰어 html/css 소스입니다.
백문이 불여일견이죠. 아래 버튼을 눌러보면 레이어 팝업으로 구동되는 360도 회전 제품 뷰어를 보실 수 있습니다.
360 Degrees Product Viewer
멋진 자동차 이미지가 옆면 후면 앞면등을 살펴볼 수 있게 되어있네요.
역시나 간단한 방법으로 위와 같은 360도 뷰어를 만들어 볼 수 있습니다.
준비되어야 할 것들입니다.
첫번째로 JS파일을 업로드 합니다.
jquery.mobile.custom.min.js다음으로는 360도 회전시킬 이미지가 필요한대요. 사실 이 이미지 만드는게 가장 힘들 수 있겠네요^^
이 이미지는 기본 16프레임으로 되어있습니다. 좀 더 세밀함을 요할때는 프레임 수를 더 늘리면 되겠죠. 다만 아래 소개해드릴 html 소스에서 약간의 조정이 필요합니다.
위 소스의 멋진 자동차 이미지 파일입니다.
img.zip마지막으로 스타일을 잡아줄 CSS 소스를 적용시켜 줍니다.
이제 준비가 되었구요.
위 데모 뷰어와 같은 html을 소개해드릴게요. 참 잉크번짐 레이어 팝업 효과는 생략한 소스입니다.
Close360 Degrees Product Viewer
아까 말씀드렸듯이 프레임이 변경된다고 하면 data-frame= 부분의 16 숫자를 조정해주시면 됩니다.
32프레임이라고 하면 이미지는 32이 연속되서 나와야 하고 16 숫자를 32로 바꿔줘야 하겠죠.
도움이 되셨나요?
다음번에도 멋진 효과가 적용된 소스를 소개해드릴게요^^
이상으로 360도 회전 제품 소개 뷰어 html/css 소스에 대한 포스팅을 마칩니다.
'Smart' 카테고리의 다른 글
| 평창올림픽 기념으로 살펴보는 세계 최고 피겨퀸 김연아의 점프 과학!! (0) | 2018.02.03 |
|---|---|
| 문학 작품에서 현실적 자아 본질적 자아 차이 (0) | 2018.01.29 |
| 통통튀는 레이어 팝업 메뉴 네비게이션 (Bouncy Navigation) 소스 (0) | 2018.01.26 |
| 잉크 번짐 효과 전체화면 레이어 팝업 소스 (0) | 2018.01.25 |
| 연결어미 "~느니"는 대등적 연결어미? 종속적 연결어미? (0) | 2018.01.24 |
