20 Smartphone Scroll-Effekte
Eine Demo in einem echten Phone-Fenster: Scroll-Reveals, Akkordeon, Sticky Stories, Progress, Timeline, Chat-Bubbles, horizontale Slider und weitere Ideen, die auf Mobile besser funktionieren als Hover.
Scroll fühlt sich an wie Story.
Diese Demo zeigt 20 mobile Scroll-Ideen in einem App-ähnlichen Fenster.
Fade Up Card
Ein Klassiker: Card fährt beim Scrollen weich von unten ein.
Image Zoom Reveal
Das Bild zoomt rein, sobald der Bereich sichtbar wird.
Blur to Focus
Von unscharf zu klar. Sehr schön für emotionale Bildflächen.
Gradient Wash
Ein Farbverlauf fährt beim Scrollen über die Card.
Sticky Info Box
Die Infobox bleibt kurz “kleben” und wirkt dadurch wie ein Story-Moment.
6 · Mobile Akkordeon
Sehr praktisch, wenn man auf kleinem Screen viel Inhalt kompakt halten möchte.
7 · Timeline Fill
Eine Linie füllt sich beim Scrollen.
Schritt zwei
Inhalte wirken wie eine kleine Reise.
Schritt drei
Perfekt für Prozesse, About-Seiten oder Case Studies.
Counter Reveal
Zahlen zählen beim Scrollen hoch.
10 · Reading Progress
Diese Card zeigt oben einen Fortschrittsbalken, der sich beim Scrollen im Phone-Fenster füllt.
Gut für Artikel, Stories, Landingpage-Abschnitte oder Onboarding-Screens.
11 · Staggered List
12 · Pinned Visual
Dieses Bild bleibt innerhalb des langen Abschnitts sticky.
Scale Title Reveal
Der Titel skaliert sichtbar rein, sobald die Card erscheint.
Split Curtain Reveal
Zwei Flächen öffnen sich wie ein Vorhang.
Glass Pop
Eine Glasfläche poppt beim Scrollen über dem Bild auf.
16 · Chat Bubble Reveal
Image Stack Spread
Bilder spreizen sich beim Scrollen leicht auseinander.
Color Shift
Die Bildfarbe verändert sich beim Erscheinen.
Depth Card
Basis-Reveal plus Schatten und Bildtiefe für moderne Mobile-Websites.
20 · Final Reveal
Ein großer Abschluss-Screen skaliert rein. Gut für CTA, Kontakt oder “Jetzt buchen”.
10 horizontale 3D Scroll-Varianten
Swipe horizontal durch verschiedene Rad-, Bogen-, Orbit- und Depth-Carousels. Das vorderste Element wird jeweils am stärksten hervorgehoben.
Wie ein Rad, ein Orbit oder eine Bühne.
10 Varianten für hochwertige mobile Side-Scroll-Erlebnisse.
Classic Wheel
Die mittlere Card steht vorne am Rad.
Depth
Seitliche Cards werden kleiner.
Rotate
Leichte Drehung erzeugt Radgefühl.
Focus
Vorne scharf, seitlich gedimmt.
Stage Arc
Cards liegen auf einer flachen Bühne.
Elegant
Ruhiger als ein starkes Rad.
Editorial
Gut für Case Studies.
Mobile
Sehr angenehm zu swipen.
Orbit
Die Cards wirken wie auf einer Umlaufbahn.
Center Pull
Die Mitte zieht optisch nach vorne.
Soft Curve
Seitlich stärker abgesenkt.
Premium
Rund und ruhig.
Coverflow
Stärkerer 3D-Twist.
Deep
Seitliche Elemente kippen nach hinten.
Gallery
Ideal für visuelle Referenzen.
Focus
Die Mitte dominiert klar.
Fan Spread
Wie Karten auf einem Tisch.
Stack Feel
Leicht gefächert.
Swipe
Die Mitte richtet sich auf.
Calm
Nicht verspielt, aber markant.
Tunnel
Die Mitte wirkt näher, Seiten fallen zurück.
Depth
Mehr Tiefenwirkung.
Dark UI
Sehr gut für Premium-Looks.
Visual Pull
Der Blick bleibt in der Mitte.
Film Reel
Wie ein hochwertiger Filmstreifen.
Frames
Seitliche Frames bleiben kleiner.
Scene
Gut für Storytelling.
Sequence
Ruhige Bildabfolge.
Lens Focus
Die Mitte wirkt wie unter einer Linse.
Sharp
Seitlich weicher und dunkler.
Zoom
Vorderes Bild wird leicht vergrössert.
Focus UI
Perfekt für Galerie-Highlights.
Size Wheel
Die Card-Höhe wächst zur Mitte.
Tall Focus
Bildgrösse verändert sich sichtbar.
Premium Crop
Sehr spannend für Bildserien.
Rhythm
Seitliche Cards bleiben kompakt.
Hero Wheel
Grosse, fast vollflächige Highlight-Cards.
Immersive
Sehr stark für Startbereiche.
Visual Story
Mehr Bühne, weniger UI.
Final
Ein ruhiger, grosser Abschluss.
Hinweis
Jede Variante nutzt dieselbe Logik, aber andere Bewegungswerte. Du kannst einzelne Blöcke einfach löschen, wenn du nur bestimmte Varianten brauchst.
30 seitliche Smartphone Scroll-Effekte
Sechs Kategorien mit je fünf Varianten: elegante Side-Scroll-Patterns, Bildgrössen-Spielereien, Editorial-Galerien und mobile Storytelling-Layouts.
Seitlich scrollen, aber hochwertig.
30 mobile Patterns mit Scroll-Snap, Image-Scale, Size-Shifts, Progress, Coverflow und Editorial-Cards.
Scale & Crop
Spielereien mit Bildgrössen, Ausschnitten und wechselnden Formaten.
Large
Grosse Hero-Card.
Small
Kompakter Teaser.
Tall
Vertikaler Crop.
Wide
Breites Panorama.
Forest Mood
Ocean Detail
Mountain Air
Portrait Crop
Vertical Mood
Editorial
Feature
Square
Slim
Block
Editorial Cards
Ruhige, hochwertige Layouts für Case Studies, Hotels, Restaurants und Portfolios.
Design Story
Bild und Text sauber geteilt.
Visual Detail
Ideal für Leistungen.
Case Study
Mobile Präsentation.
Analyse
Kurzer Einstieg.
Konzept
Klarer Prozess.
Design
Visueller Fokus.
Launch
Starker Abschluss.
„Mobile Seiten brauchen weniger Effekte, aber bessere Momente.“
Design Note„Seitliches Scrollen funktioniert, wenn die nächste Card sichtbar lockt.“
UX Pattern„Bildgrössen erzeugen Rhythmus, ohne laut zu wirken.“
Editorial RuleBranding
Identity System
Website
Mobile First
Campaign
Launch Visuals
Insight
Glasartige Cards mit ruhigem Premium-Look.
Strategy
Gut für kompakte Wissensblöcke.
Detail
Elegant ohne verspielt zu sein.
Depth & Motion
Mehr Tiefe durch Center-States, Perspektive und kontrollierte Bewegung.
Depth
Focus
Motion
Layer
Slow Image
Soft Drift
Layer Feel
Lift
Hoverless
Mobile
Layer One
Layer Two
Layer Three
Wide Scene
Landscape
Product & Service
Seitliche Module für Angebote, Leistungen, Pakete und Produktinszenierung.
Starter
Kompaktes Paket.
Business
Mehr Leistung.
Studio
Premium Setup.
CHF 490
Onepager Start
CHF 980
Website Paket
CHF 1800
Launch System
Before / After
Redesign
Beratung
Kurzer Einstieg.
Projekt
Website planen.
Launch
Online gehen.
Story & Progress
Geführte mobile Geschichten mit Fortschritt, Kapitel-Logik und Step-Rails.
Intro
Erster Abschnitt.
Problem
Kontext zeigen.
Lösung
Mehrwert erklären.
Resultat
Abschluss.
Start
Wendung
Ergebnis
Plan
Create
Review
Ship
Ein starker erster Screen.
Dann ein ruhiger Übergang.
Und ein klarer Abschluss.
Briefing
Startpunkt.
Design
Visuelle Richtung.
Build
Umsetzung.
Launch
Livegang.
Interactive UI
Mobile UI-Patterns mit Tabs, Indikatoren und gezielter Nutzerführung.
Design
Layouts und visuelle Richtung.
Content
Text, Struktur und Story.
Launch
Optimierung und Go-live.
One
Two
Three
Website
Web
Logo
Brand
Landingpage
Web
Identity
Brand
Visual System
Mobile Pages
Structure
Go Live
Bereit für Mobile?
Ein letzter starker Abschluss-Slider.
Elegant. Schnell. Klar.
Für hochwertige Smartphone-Erlebnisse.