목록#rotate (3)

웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 터치식 360도 제품보기 Jquery 플러그인 - 360 ImageRotate

360ImageRotate는 반응형 모바일 친화적인 이미지 뷰어 플러그인으로 사용자에게 제품에 대한 360도의 시청 경험을 제공합니다. - 라이센스 MIT - 작동 브라우저 Chrome, IE 9 이상, FireFox, Opera, Safari - 사용 방법 1. 각도를 다르게 한 여러장에 사진을 준비합니다. 기본 이미지 저장 경로는 images 입니다. 2. 필요한 JavaScript 및 CSS 파일을 HTML 파일에서 호출합니다. 3. 360도 이미지가 노출될 자리에 객체를 추가합니다. 4. 플러그인을 호출합니다. 5. 각종 옵션들을 추가할 수 있습니다. totalFrames : 보유한 총 이미지 수endFrame : 자동 회전 애니메이션의 끝 프레임currentFrame : 자동 회전 시작 프레임s..
웹프로그램밍 자료실/JAVA 자료 2020. 2. 25. 09:07
[해피CGI][cgimall] 다양한 이미지 마우스 오버 이펙트 CSS image hover effects

Zoom In, Zoom Out, Slide, Rotate, Blur, Gray Scale, Sepia, Blur + Gray Scale, Opacity, Flashing, Shine, Circle 다양한 이미지 마우스 오버 효과입니다. 원하는 효과의 클래스만 적용하면 바로 사용이 가능합니다.
웹프로그램밍 자료실/HTML 자료 2019. 3. 27. 08:59
[해피CGI][cgimall] 360-degree Product Image Viewer - jQuery rotate360.js

여러 각도에서 촬영한 상품의 이미지를 360도 회전하면서 마치 동영상을 보여주듯이 화면에 재생시키는 스크립트 입니다. 첨부된 파일의 압축을 해제하고 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 재생하기 버튼, 멈추기 버튼 막대바를 이용해서 화면에 이미지를 표시해줍니다. 샘플 파일을 다운로드 받아서 압축을 풀어보면, 360도 회전하면서 이미지를 보여주기 위해서, 아래 그림 처럼 이미지를 총 36개를 준비해둔게 확인이 됩니다. 재생하기 버튼을 클릭하면 이미지를 순차적으로 표시해주는데 사진을 보여주면서, 마치 동영상을 재생하는것 과 같은 효과가 나타나네요. 온라인으로 상품을 판매하는 쇼핑몰 사이트에서 특정 상품의 이미지를 보여줄 때 사용할만할 듯 하네요.
웹프로그램밍 자료실/JAVA 자료 2019. 3. 5. 09:02
Prev 1 Next