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

smartin3.de Mobile: 3D-Maus-Animationsbereich auf Bild begrenzen (Scroll blockiert) #7

New Issue
Open
opened 2026-04-27 18:03:23 +00:00 by mAi · 2 comments
mAi commented 2026-04-27 18:03:23 +00:00
Collaborator
Copy Link

Problem

Auf smartin3.de wird die 3D-Animation an die Mausposition gebunden — auf Desktop OK. Auf Mobile fängt der Animationsbereich offenbar Touch-Events über den ganzen Hero/Viewport ab, sodass nach-unten-Scrollen schwer/unmöglich wird.

Lösung

Den Animations-/Touch-Trigger-Bereich auf das Bild selbst begrenzen, nicht auf die ganze Hero-Section oder den ganzen Viewport. Auf Mobile sollte vertical scroll außerhalb des Bildes uneingeschränkt funktionieren.

Konkrete Optionen für den Worker:

  1. Touch-Listener von body/hero auf das Bild-Element selbst verschieben.
  2. CSS touch-action: pan-y auf den umgebenden Container setzen, damit vertical-scroll nicht abgefangen wird; nur das Bild selbst nimmt aktive Touch-Events.
  3. Auf Mobile (@media (max-width: 768px) o.ä.) die Animation-Trigger-Zone explizit auf pointer-events: none außerhalb des Bildes setzen.

Welche Variante hängt vom aktuellen Code ab — Worker schaut sich sites/smartin3.de/index.html an und wählt den minimalsten Fix.

QA

  1. Lokal bauen: ./build.sh.
  2. Mobile-Smoke-Test (Browser DevTools mobile mode oder echtes Handy):
    • Touch außerhalb des Bildes scrollt die Seite normal.
    • Touch auf dem Bild triggert die Animation wie gewohnt.
  3. Desktop bleibt unberührt — Maus-Hover-Animation funktioniert weiter über das Bild.

Nicht im Scope

  • Andere Sites mit ähnlichen Effekten (kAInco etc., falls vorhanden).
  • Redesign der Animation selbst.

Priorität

p2 — UX-Bug, blockiert mobile-Nutzer.

## Problem Auf smartin3.de wird die 3D-Animation an die Mausposition gebunden — auf Desktop OK. Auf Mobile fängt der Animationsbereich offenbar Touch-Events über den ganzen Hero/Viewport ab, sodass nach-unten-Scrollen schwer/unmöglich wird. ## Lösung Den Animations-/Touch-Trigger-Bereich auf das **Bild selbst** begrenzen, nicht auf die ganze Hero-Section oder den ganzen Viewport. Auf Mobile sollte vertical scroll außerhalb des Bildes uneingeschränkt funktionieren. Konkrete Optionen für den Worker: 1. Touch-Listener von `body`/`hero` auf das Bild-Element selbst verschieben. 2. CSS `touch-action: pan-y` auf den umgebenden Container setzen, damit vertical-scroll nicht abgefangen wird; nur das Bild selbst nimmt aktive Touch-Events. 3. Auf Mobile (`@media (max-width: 768px)` o.ä.) die Animation-Trigger-Zone explizit auf `pointer-events: none` außerhalb des Bildes setzen. Welche Variante hängt vom aktuellen Code ab — Worker schaut sich `sites/smartin3.de/index.html` an und wählt den minimalsten Fix. ## QA 1. Lokal bauen: `./build.sh`. 2. Mobile-Smoke-Test (Browser DevTools mobile mode oder echtes Handy): - Touch außerhalb des Bildes scrollt die Seite normal. - Touch auf dem Bild triggert die Animation wie gewohnt. 3. Desktop bleibt unberührt — Maus-Hover-Animation funktioniert weiter über das Bild. ## Nicht im Scope - Andere Sites mit ähnlichen Effekten (kAInco etc., falls vorhanden). - Redesign der Animation selbst. ## Priorität p2 — UX-Bug, blockiert mobile-Nutzer.
mAi self-assigned this 2026-04-27 18:03:23 +00:00
mAi commented 2026-04-27 18:06:06 +00:00
Author
Collaborator
Copy Link

Fix umgesetzt

Hintergrund: das "Bild" auf smartin3.de ist tatsächlich kein <img>, sondern der animierte 3D-Text-Effekt im .text3d-wrapper (das rotierende „smart"). Der touchmove-Listener war an die gesamte .hero-Section gebunden und rief e.preventDefault() auf — dadurch hat jeder Touch im Hero-Bereich (inkl. Headline, Tagline, Buttons) das Scrollen blockiert.

Änderungen (sites/smartin3.de/index.html)

  • Touch-Listener von .hero auf .text3d-wrapper verschoben — nur Touches direkt auf dem animierten Text triggern die Animation.
  • preventDefault() entfernt und Listener auf {passive: true} umgestellt.
  • touch-action: pan-y auf .text3d-wrapper gesetzt — vertical scroll bleibt erhalten, auch wenn der Finger über den animierten Text wandert.
  • Desktop-mousemove/mouseleave auf .hero unverändert.

Damit ist gewährleistet:

  • Scroll außerhalb des Wrappers: nativ und ungestört.
  • Scroll durch den Wrapper hindurch: funktioniert ebenfalls (dank pan-y), Animation läuft als Bonus mit.
  • Desktop-Hover-Animation bleibt erhalten.

QA

  • ./build.sh → 59 Sites OK, smartin3.de neu erzeugt.
  • Build-Verifikation: touch-action: pan-y und wrapper.addEventListener('touchmove', …, {passive: true}) im finalen HTML vorhanden.
  • Manueller Mobile-Smoke (Browser-DevTools-Mobilmodus) wird nach Deploy auf der live-URL gegengeprüft — der Code-Pfad ist deterministisch (Listener-Scope + touch-action).

Commit: 66d0203f55

## Fix umgesetzt Hintergrund: das "Bild" auf smartin3.de ist tatsächlich kein `<img>`, sondern der animierte 3D-Text-Effekt im `.text3d-wrapper` (das rotierende „smart"). Der `touchmove`-Listener war an die gesamte `.hero`-Section gebunden und rief `e.preventDefault()` auf — dadurch hat jeder Touch im Hero-Bereich (inkl. Headline, Tagline, Buttons) das Scrollen blockiert. ### Änderungen (`sites/smartin3.de/index.html`) - Touch-Listener von `.hero` auf `.text3d-wrapper` verschoben — nur Touches direkt auf dem animierten Text triggern die Animation. - `preventDefault()` entfernt und Listener auf `{passive: true}` umgestellt. - `touch-action: pan-y` auf `.text3d-wrapper` gesetzt — vertical scroll bleibt erhalten, auch wenn der Finger über den animierten Text wandert. - Desktop-`mousemove`/`mouseleave` auf `.hero` unverändert. Damit ist gewährleistet: - Scroll außerhalb des Wrappers: nativ und ungestört. - Scroll **durch** den Wrapper hindurch: funktioniert ebenfalls (dank `pan-y`), Animation läuft als Bonus mit. - Desktop-Hover-Animation bleibt erhalten. ### QA - `./build.sh` → 59 Sites OK, smartin3.de neu erzeugt. - Build-Verifikation: `touch-action: pan-y` und `wrapper.addEventListener('touchmove', …, {passive: true})` im finalen HTML vorhanden. - Manueller Mobile-Smoke (Browser-DevTools-Mobilmodus) wird nach Deploy auf der live-URL gegengeprüft — der Code-Pfad ist deterministisch (Listener-Scope + touch-action). Commit: https://mgit.msbls.de/m/onepager/commit/66d0203f55672bbf557f5b3a2641578eeea4e82a
mAi added the
done
 label 2026-04-27 18:06:11 +00:00
mAi commented 2026-04-27 18:08:58 +00:00
Author
Collaborator
Copy Link

Update — Mobile-Gating + Merge to main

Auf Wunsch jetzt explizit auf max-width: 768px begrenzt:

  • CSS: touch-action: pan-y am Wrapper hängt jetzt in @media (max-width: 768px).
  • JS: window.matchMedia('(max-width: 768px)').matches entscheidet beim Init — unter 768px Listener auf .text3d-wrapper (passive), darüber das ursprüngliche hero.touchmove mit preventDefault() (relevant für Touch-Hardware im Desktop-Layout).

Desktop-Verhalten ist damit bit-für-bit identisch zum Stand vor dem Fix.

Commits:

Auf main → Dokploy deployed automatisch.

## Update — Mobile-Gating + Merge to main Auf Wunsch jetzt explizit auf `max-width: 768px` begrenzt: - CSS: `touch-action: pan-y` am Wrapper hängt jetzt in `@media (max-width: 768px)`. - JS: `window.matchMedia('(max-width: 768px)').matches` entscheidet beim Init — unter 768px Listener auf `.text3d-wrapper` (passive), darüber das ursprüngliche `hero.touchmove` mit `preventDefault()` (relevant für Touch-Hardware im Desktop-Layout). Desktop-Verhalten ist damit bit-für-bit identisch zum Stand vor dem Fix. Commits: - https://mgit.msbls.de/m/onepager/commit/66d0203f55672bbf557f5b3a2641578eeea4e82a - https://mgit.msbls.de/m/onepager/commit/095ed0fd58e74ad94e3aedeb4be35ab4cccf4f25 - Merge: https://mgit.msbls.de/m/onepager/commit/f5d3637 Auf `main` → Dokploy deployed automatisch.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
done
Work completed, waiting for close by m
needs-review
Awaiting review
No Label
done
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/onepager#7
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?