<!--Трансформация текста
https://mt-webdesign.ru/text-transformation-->
<style>
.letter-transform {
display: flex;
transition: transform 0.2s linear;
transform-origin: bottom;
cursor: default;
}
</style>
<script>
// Разрешение с которого начнет работать скрипт (600px)
if (window.innerWidth >= 600) {
document.addEventListener('mousemove', function(e) {
const paddingX = 50; // Доп отступы по X
const paddingY = 50; // Доп отступы по Y
const letters = document.querySelectorAll('.letter-transform');
letters.forEach((letter, index) => {
applyTransformation(letter, index, e, paddingX, paddingY);
});
});
}
function applyTransformation(letter, index, e, paddingX, paddingY) {
let minX = Infinity;
let minY = Infinity;
let maxX = -Infinity;
let maxY = -Infinity;
const boundingRect = letter.getBoundingClientRect();
minX = boundingRect.left - paddingX;
minY = boundingRect.top - paddingY;
maxX = boundingRect.right + paddingX;
maxY = boundingRect.bottom + paddingY;
if (e.clientX >= minX && e.clientX <= maxX && e.clientY >= minY && e.clientY <= maxY) {
const centerX = boundingRect.left + boundingRect.width / 2;
const distanceFromCenter = Math.abs(centerX - e.clientX);
const centerY = boundingRect.height / 2;
const computedStyle = window.getComputedStyle(letter);
const zoomValue = parseFloat(computedStyle.zoom) || 1;
let scaleFactorY = 1 + ((boundingRect.width / 2 - distanceFromCenter) / (boundingRect.width / 2) * 0.6) / zoomValue;
scaleFactorY = Math.max(1, Math.min(scaleFactorY, 1.3)); // Scale от 1 до 1.3
const translateY = (scaleFactorY - 1) * boundingRect.height / 26; // Сдвиг вверх
letter.style.transform = `scale(1, ${scaleFactorY}) translateY(${translateY}px)`;
} else {
letter.style.transform = 'scale(1, 1) translateY(0)';
}
}
</script>