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

[해피CGI][cgimall] jquery Grid to Fullscreen 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] jquery Grid to Fullscreen

해피CGI윤실장 2019. 7. 10. 09:10

* Grid to Fullscreen

사진을 확대, 애니메이션 격자형태로 변형하여 보여줄 수 있는 기능을 가진 jquery plugin



* 사용방법

첨부된 압축파일을 다운로드 하여 사용할 웹루트 디렉터리에 업로드하고 압축을 해제합니다

그후 아래와 같은 핵심코드들이 삽입되어야 합니다


적용할 html 문서에 샘플로 제공되는 css , js 파일을 선언

 

 

 


이미지 및 설명문구가 들어갈 html 구문을 아래와 같이 작성

 

 

 

하단에 기본 제공되는 js 파일 및 스크립트 선언

 

 

 

 

 

애니메이션 효과 관련 스크립트 옵션은 아래와 같습니다


timing - duration :  애니메이션 지속시간 조절할 수 있습니다(숫자형, 초단위)
activation : 사진의 애니메이션 움직임 위치를 선정할 수 있습니다(`closestCorner`, `top`, `left`)
seed : 효과를 나타내는 속도(숫자형)
flipBeizerControls : 격자형태의 사진 확대 또는 축소 애니메이션 효과시 사진의 x,y 축으로 효과범위를 정할 수 있습니다


첨부된 파일중 index~index6.html 파일에 샘플코드가 있으니 참고하여 이용하시면 되겠습니다

 

 

 

홈페이지바로가기

Comments