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

[해피CGI][cgimall] jQuery Hover3d 본문

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

[해피CGI][cgimall] jQuery Hover3d

해피CGI윤실장 2018. 1. 31. 09:18

JQuery 를 이용하여 이미지에 3D 효과를 줄 수 있습니다. 
  
소스코드도 간단하여 사용이 편리 합니다. 
 

HTML

<script src="jquery.min.js"></script>
<script src="jquery.hover3d.min.js"></script>

There is a minimal markup required, the element container and element that will be transformed into 3d card

<div class="project">
	<div class="project__card">
		<!-- Content element goes here -->
	</div>
</div>

CSS

There is no special CSS file to be included, you can write your own CSS and playing with transform on child elements. However there is helper class that will be added when hovering in and out.

/* This class can be replaced using options */
.hover-in{
	transition: .3s ease-out;
}
.hover-out{
	transition: .3s ease-in;
}

Options

Option Type Default Description
selector string null Selector for element that will be the 3d card
perspective integer 1000 Perspective value for 3d space
sensitivity integer 20 Mouse movement sensitivity, larger number is less sensitive
invert boolean false Default behavior is the element will follow the mouse, look like it facing the mouse
shine boolean false Add shining layer
hoverInClass string hover-in Helper class when mouse hover in the element, will be removed after 300ms
hoverOutClass string hover-out Helper class when mouse hover Out the element, will be removed after 300ms
hoverClass string hover-3d Helper class when the mouse is hovering the element




네이버블로그전송

 

홈페이지바로가기 소스다운로드

Comments