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

mAi: #7 - smartin3.de Mobile: 3D-Animation-Touch auf Wrapper begrenzen

Browse Source 
Touchmove-Listener von .hero auf .text3d-wrapper verschoben, sodass nur
Touches direkt auf der animierten Text-Komponente die Animation triggern.
preventDefault() entfernt + touch-action: pan-y auf den Wrapper —
vertical scroll funktioniert jetzt sowohl außerhalb als auch innerhalb
des Animations-Bereichs ungestört. Desktop-mousemove unverändert.
This commit is contained in:
mAi
2026-04-27 20:05:45 +02:00
parent 81a0837593
commit 66d0203f55
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -93,6 +93,7 @@
margin: 0 auto 40px; margin: 0 auto 40px;
display: flex; justify-content: center; display: flex; justify-content: center;
padding: 60px 40px; padding: 60px 40px;
touch-action: pan-y;
} }
.text3d { .text3d {
@@ -670,8 +671,9 @@
// Interactive 3D text // Interactive 3D text
(function() { (function() {
var hero = document.querySelector('.hero'); var hero = document.querySelector('.hero');
var wrapper = document.querySelector('.text3d-wrapper');
var text = document.querySelector('.text3d'); var text = document.querySelector('.text3d');
if (!hero || !text) return; if (!hero || !wrapper || !text) return;
function handleMove(x, y) { function handleMove(x, y) {
var w = window.innerWidth; var w = window.innerWidth;
@@ -684,10 +686,9 @@
} }
hero.addEventListener('mousemove', function(e) { handleMove(e.clientX, e.clientY); }); hero.addEventListener('mousemove', function(e) { handleMove(e.clientX, e.clientY); });
hero.addEventListener('touchmove', function(e) { wrapper.addEventListener('touchmove', function(e) {
e.preventDefault();
handleMove(e.touches[0].clientX, e.touches[0].clientY); handleMove(e.touches[0].clientX, e.touches[0].clientY);
}, {passive: false}); }, {passive: true});
hero.addEventListener('mouseleave', function() { hero.addEventListener('mouseleave', function() {
text.style.animation = ''; text.style.animation = '';
text.style.transform = ''; text.style.transform = '';