40 Smartphone Effekte
Mobile Websites brauchen andere Interaktionen als Desktop-Hover. Diese Demo zeigt 40 moderne Smartphone-Effekte in 5 Kategorien: Tap & Touch, Swipe & Drag, Scroll-Erlebnisse, Navigation/UI und kreative Media-Effekte.
1. Tap & Touch Feedback
Direkte Reaktionen auf Antippen, Drücken oder Toggle. Das ist der wichtigste Ersatz für Hover auf Smartphones.
Press Feedback
Die Card wird kurz kleiner und fühlt sich dadurch klickbar an.
Ripple Touch
Ein Kreis breitet sich beim Antippen aus, ähnlich wie in App-Interfaces.
Tap Glow
Beim Antippen leuchtet die Card kurz auf.
Image Pulse
Bild und Text springen leicht nach vorne.
Tap Flip
Gedrückt halten und die Card dreht sich kurz um.
Rückseite
Gut für Zusatzinfos oder Produktdetails.
Double Tap Like
Tippe doppelt oder einmal zum Testen. Ein Herz poppt kurz auf.
Tap to Reveal
Ein Tap öffnet eine Infofläche. Perfekt statt Hover-Text.
Zusatzinfo
Erneut tippen, um zu schließen.
Quick Action Menu
Tap öffnet kleine Schnellaktionen direkt auf der Card.
2. Swipe, Drag & Gesten
Wischen und Ziehen sind auf Smartphones extrem natürlich. Ideal für Galerien, Panels, Vergleiche und Aktionen.
Swipe Card Stack
Tap simuliert eine weggewischte Karte.
Drag Panel
Ein Panel lässt sich öffnen, ähnlich wie in Apps.
Zieh mich
Nach oben ziehen oder antippen.
Before / After
Regler ziehen für Bildvergleich oder Filter-Vergleich.
Scratch Reveal
Mit dem Finger rubbeln und Inhalt freilegen.
Pull Interaction
Ziehe den Kreis nach unten. Gut für Refresh- oder Reveal-Ideen.
Swipe Actions
Nach links oder rechts ziehen, um Aktionen anzudeuten.
Pan Image
Tap verschiebt das Bild wie eine Mini-Karte oder Panorama-Fläche.
3. Scroll-Erlebnisse
Scroll-Reveals sind auf Mobile besonders stark, weil der User sowieso mit dem Daumen durch die Seite geht.
Fade Up Reveal
Die Card fährt beim Sichtbarwerden weich nach oben.
Parallax Image
Das Bild bewegt sich leicht anders als die Card.
Story Step
Eine Textbox fährt beim Scrollen wie ein Kapitel nach oben.
Scroll Progress
Ein Ring füllt sich, sobald die Card sichtbar wird.
Word by Word
Text erscheint in kleinen Etappen statt auf einmal.
Counter Reveal
Zahlen animieren beim Scrollen hoch.
Timeline Fill
Eine Linie füllt sich und wirkt wie eine Story-Abfolge.
Scale on Scroll
Die Card wächst beim Erscheinen ganz subtil.
4. Navigation & UI Patterns
Diese Effekte fühlen sich mehr nach App an: Sheets, Tabs, Toasts, Modals und mobile Navigationsleisten.
Bottom Sheet
Tap öffnet ein Panel von unten.
Details
Perfekt für Filter, Buchung oder Produktinfos.
Floating Action
Ein Button öffnet Schnellaktionen.
Accordion
Kompakte mobile Inhalte.
Inhalt klappt direkt unter der Zeile auf.
Ideal für FAQs und Produktdaten.
Mobile Tabs
Tippe die Tabs oben rechts. Bildstimmung und Inhalt können wechseln.
Step Progress
Mehrstufige mobile Prozesse wie Checkout oder Onboarding.
Toast Notification
Tippe den Button für eine kurze mobile Rückmeldung.
Tap Modal
Ein kompaktes Overlay für wichtige Entscheidungen.
Mobile Modal
Gut für Bestätigung, Login oder Hinweis.
Bottom Navigation
Eine mobile Dock-Navigation mit aktiven Zuständen.
5. Kreative Media-Effekte
Für moderne Websites, Portfolios und Kampagnen: visuelle Effekte, die sich per Touch oder kurzer Interaktion aktivieren.
Floating Object
Ein Objekt springt beim Tap nach vorne. Gut für Produktinszenierung.
Audio Visualizer
Tap startet eine kleine Visualizer-Animation.
Cinematic Bars
Gedrückt halten: schwarze Balken erzeugen Film-Look.
Color Splash
Beim Tap kommt Farbe zurück ins Bild.
Gradient Motion
Ein animierter Farbverlauf legt sich beim Tap über die Card.
Circle Mask
Eine Kreis-Maske öffnet sich beim Antippen.
Touch Tilt
Simuliert einen Gyro-/3D-Tilt beim Drücken.
Save Pop
Ein Icon poppt beim Speichern auf. Sehr gut für Likes, Favoriten und Bookmarks.