m/onepager
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: smartin3.de — mouse interaction covers full hero section width and depth

Browse Source
This commit is contained in:
m
2026-04-18 21:20:56 +02:00
parent 1caf12d801
commit dadfa0df7c
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
sites/smartin3.de/index.html
View File

@@ -672,26 +672,26 @@
// Interactive 3D text
(function() {
var wrapper = document.querySelector('.text3d-wrapper');
var hero = document.querySelector('.hero');
var text = document.querySelector('.text3d');
if (!wrapper || !text) return;
if (!hero || !text) return;
function handleMove(x, y) {
var rect = wrapper.getBoundingClientRect();
var cx = (x - rect.left) / rect.width - 0.5;
var cy = (y - rect.top) / rect.height - 0.5;
var w = window.innerWidth;
var cx = x / w - 0.5;
var cy = y / (hero.getBoundingClientRect().bottom + 100) - 0.4;
var rotY = cx * 90;
var rotX = -cy * 30;
text.style.animation = 'none';
text.style.transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';
}
wrapper.addEventListener('mousemove', function(e) { handleMove(e.clientX, e.clientY); });
wrapper.addEventListener('touchmove', function(e) {
hero.addEventListener('mousemove', function(e) { handleMove(e.clientX, e.clientY); });
hero.addEventListener('touchmove', function(e) {
e.preventDefault();
handleMove(e.touches[0].clientX, e.touches[0].clientY);
}, {passive: false});
wrapper.addEventListener('mouseleave', function() {
hero.addEventListener('mouseleave', function() {
text.style.animation = '';
text.style.transform = '';
});