| 1 |
( function () { |
| 2 |
function initTilt(card) { |
| 3 |
var maxTilt = parseFloat(card.dataset.tiltMax) || 15; |
| 4 |
var scale = parseFloat(card.dataset.tiltScale) || 1.05; |
| 5 |
var perspective= parseFloat(card.dataset.perspective) || 800; |
| 6 |
var glare = card.dataset.glare === '1'; |
| 7 |
var glareOpacity = parseFloat(card.dataset.glareOpacity) || 0.3; |
| 8 |
var glareEl = card.querySelector('.bktc2-glare'); |
| 9 |
|
| 10 |
var rect, active = false; |
| 11 |
|
| 12 |
function getRect() { rect = card.getBoundingClientRect(); } |
| 13 |
|
| 14 |
function onMove(e) { |
| 15 |
if (!active) return; |
| 16 |
var x = e.clientX - rect.left; |
| 17 |
var y = e.clientY - rect.top; |
| 18 |
var pctX = (x / rect.width) - 0.5; // -0.5 to 0.5 |
| 19 |
var pctY = (y / rect.height) - 0.5; |
| 20 |
var rotateY = pctX * maxTilt * 2; |
| 21 |
var rotateX = -pctY * maxTilt * 2; |
| 22 |
|
| 23 |
card.style.transform = 'perspective('+perspective+'px) rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) scale('+scale+')'; |
| 24 |
|
| 25 |
if (glare && glareEl) { |
| 26 |
var angle = Math.atan2(pctY, pctX) * (180 / Math.PI); |
| 27 |
glareEl.style.opacity = glareOpacity; |
| 28 |
glareEl.style.background = 'linear-gradient('+angle+'deg, rgba(255,255,255,'+glareOpacity+') 0%, transparent 60%)'; |
| 29 |
} |
| 30 |
} |
| 31 |
|
| 32 |
card.addEventListener('mouseenter', function () { |
| 33 |
active = true; |
| 34 |
getRect(); |
| 35 |
card.style.transition = 'none'; |
| 36 |
}); |
| 37 |
|
| 38 |
card.addEventListener('mousemove', onMove); |
| 39 |
|
| 40 |
card.addEventListener('mouseleave', function () { |
| 41 |
active = false; |
| 42 |
card.style.transition = 'transform 0.4s ease, box-shadow 0.4s ease'; |
| 43 |
card.style.transform = 'perspective('+perspective+'px) rotateX(0deg) rotateY(0deg) scale(1)'; |
| 44 |
if (glare && glareEl) glareEl.style.opacity = 0; |
| 45 |
}); |
| 46 |
} |
| 47 |
|
| 48 |
document.addEventListener('DOMContentLoaded', function () { |
| 49 |
// Skip on touch devices |
| 50 |
if ('ontouchstart' in window) return; |
| 51 |
document.querySelectorAll('.bktc2-card[data-tilt-max]').forEach(initTilt); |
| 52 |
}); |
| 53 |
}() ); |
| 54 |
|
