https://eztalking.ai/home/js/website/hover3d.js

1/*
2jQuery Hover3d
3=================================================
4Version: 1.0.0
5Author: Rian Ariona
6Website: http://ariona.net
7Docs: http://ariona.github.io/hover3d
8Repo: http://github.com/ariona/hover3d
9Issues: http://github.com/ariona/hover3d/issues
10*/
11
12(function($){
13
14	$.fn.hover3d = function(options){
15
16		var settings = $.extend({
17			selector      : null,
18			perspective   : 1000,
19			sensitivity   : 20,
20			invert        : false,
21			shine         : false,
22			hoverInClass  : "hover-in",
23			hoverOutClass : "hover-out",
24			hoverClass    : "hover-3d"
25		}, options);
26
27		return this.each(function(){
28
29			var $this = $(this),
30				$card = $this.find(settings.selector);
31
32			if( settings.shine ){
33				$card.append('<div class="shine"></div>');
34			}
35			var $shine = $(this).find(".shine");
36
37			// Set perspective and transformStyle value
38			// for element and 3d object
39			$this.css({
40				perspective: settings.perspective+"px",
41				transformStyle: "preserve-3d"
42			});
43
44			$card.css({
45				perspective: settings.perspective+"px",
46				transformStyle: "preserve-3d",
47			});
48
49			$shine.css({
50				position  : "absolute",
51				top       : 0,
52				left      : 0,
53				bottom    : 0,
54				right     : 0,
55				"z-index" : 9
56			});
57
58			// Mouse Enter function, this will add hover-in
59			// Class so when mouse over it will add transition
60			// based on hover-in class
61			function enter(){
62				$card.addClass(settings.hoverInClass+" "+settings.hoverClass);
63
64				setTimeout(function(){
65					$card.removeClass(settings.hoverInClass);
66				}, 1000);
67			}
68
69			// Mouse movement Parallax effect
70			function move(event){
71				var w      = $this.innerWidth(),
72					h      = $this.innerHeight(),
73					ax 	   = settings.invert ?  ( w / 2 - event.offsetX)/settings.sensitivity : -( w / 2 - event.offsetX)/settings.sensitivity,
74					ay     = settings.invert ? -( h / 2 - event.offsetY)/settings.sensitivity :  ( h / 2 - event.offsetY)/settings.sensitivity;
75					dy     = event.offsetY - h / 2,
76					dx     = event.offsetX - w / 2,
77					theta  = Math.atan2(dy, dx),
78					angle  = theta * 180 / Math.PI - 90;
79
80				if (angle < 0) {
81					angle  = angle + 360;
82				}
83
84
85				$card.css({
86					perspective    : settings.perspective+"px",
87					transformStyle : "preserve-3d",
88					transform      : "rotateY("+ax+"deg) rotateX("+ay+"deg)"
89				});
90
91				$shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + event.offsetY / h * .5 + ') 0%,rgba(255,255,255,0) 80%)');
92			}
93
94			// Mouse leave function, will set the transform
95			// property to 0, and add transition class
96			// for exit animation
97			function leave(){
98				$card.addClass(settings.hoverOutClass+" "+settings.hoverClass);
99				$card.css({
100					perspective    : settings.perspective+"px",
101					transformStyle : "preserve-3d",
102					transform      : "rotateX(0) rotateY(0)"
103				});
104				setTimeout( function(){
105					$card.removeClass(settings.hoverOutClass+" "+settings.hoverClass);
106				}, 1000 );
107			}
108
109			// Mouseenter event binding
110			$this.on( "mouseenter", function(){
111				return enter();
112			});
113
114			// Mousemove event binding
115			$this.on( "mousemove", function(event){
116				return move(event);
117			});
118
119			// Mouseleave event binding
120			$this.on( "mouseleave", function(){
121				return leave();
122			});
123
124		});
125
126	};
127
128}(jQuery));