TheShopCritics2/TSC2/wwwroot/js/modules/hover3d.js

48 lines
1.3 KiB
JavaScript
Raw Normal View History

CNVS.Hover3D = function() {
var __core = SEMICOLON.Core;
return {
init: function(selector) {
if( __core.getSelector(selector, false, false).length < 1 ){
return true;
}
__core.initFunction({ class: 'has-plugin-hover3d', event: 'pluginHover3DReady' });
selector = __core.getSelector( selector, false );
if( selector.length < 1 ){
return true;
}
selector.forEach( function(el) {
var height = el.clientHeight;
var width = el.clientWidth;
el.addEventListener( 'mousemove', function(e) {
var xVal = e.layerX;
var yVal = e.layerY;
var yRotation = 20 * ((xVal - width / 2) / width);
var xRotation = -20 * ((yVal - height / 2) / height);
var transform = 'perspective(500px) scale(1.1) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg) rotateZ(0)';
el.style.transform = transform;
});
el.addEventListener( 'mouseout', function() {
el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0) rotateZ(0)';
});
el.addEventListener( 'mousedown', function() {
el.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0) rotateZ(0)';
});
el.addEventListener( 'mouseup', function() {
el.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0) rotateZ(0)';
});
});
}
};
}();