sssupers ist ein Squarespace Spezialist Webdesign Studio mit Website Boutique, das vom Fotografen und Designer Rasmus Schübel geführt wird. "Ich helfe meinen Kunden, ihre Website als sicheren Hafen der Selbstdarstellung im Internet zu erleben und verkaufe in meiner Boutique schlüsselfertige, maßgeschneiderte Websites an qualitätsbewußte Kunden mit Stil."

 

Parallax-Scrolling

 

LICHT AUS - SPOT AN !

 

PARALLAX SCROLLING

Einige Vorlagen verwenden einen besonderen visuellen Effekt auf den Banner-Bildern, Parallax-Scrolling genannt. Parallax Scrolling bewirkt, das sich das Hintergrundbild langsamer als der Inhalt im Vordergrund bewegt, wodurch eine Illusion der Tiefe erzeugt wird, die den Betrachter in den Bann zieht.

.

 
 

Sie haben übrigens Ihre eigene Parallax-Einheit zur Demonstration stets dabei: halten Sie einen Finger aufrecht am ausgestreckten Arm und betrachten Sie ihn abwechselnd erst nur mit dem rechten und dann mit dem linken Auge: das Springen des Bildes 'hinter' Ihrem Finger wird von der Parallaxe (dem Abstand) zwischen Ihren Augen erzeugt.

Die Stelle, an der Parallax-Scrolling zur Verfügung steht, hängt mit Ihrem Template zusammen.
Parallax-Scrolling steht Ihnen in diesen Templates zur Verfügung:

ADVERSARY, ALEX, MARQUEE & SHIFT

  • Index Seite > Einfache Seiten werden im Index als Banner angezeigt.
  • Einfache Seiten
  • Produkt-Seiten
  • Event-Seiten
  • Blog-Posts

BRINE, CLAY, FEED, FOSTER, GREENWICH, HATCH, HEIGHTS, HUNTER, HYDE, JAUNT, JUKE, KEENE, MARTA, MERCER, MOTTO, MOJAVE, NUEVA, RALLY, ROVER, SONORA, AND THORNE

  • Einfache Seiten
  • Produkt-Seiten
  • Event-Seiten
  • Album-Seiten
  • Blog-Seiten (Nicht jedoch Blog-Posts)
  • Galerie-Seiten

Wenn Parallax-Scrolling in einem Template vorhanden ist, stellen Sie sicher, daß diese Seiten Vorschau- oder Bannerbilder (sog.THUMBNAILS) haben. Ohne Thumbnails kein Prallax-Scrolling. 

Hier ist ein Beispiel des Parallax-Scrollings beim Shift-Template:

.

 

Bevor Sie beginnen

  • Parallax Scrolling steht nur für Bannerbilder / THUMBNAILS zur Verfügung.
  • Bildblöcke und Galerie-Bilder bieten keinen Parallax-Scrolling-Effekt.
  • Vorlagen, die Parallax-Scrolling verwenden, unterstützen auch spezielle Banner-Gestaltungen, die Text und Buttons auf einem mit Parallaxe genutzten Bild anzeigen können. Für die wirkungsvollste Gestaltung bietet sich eine Kombination aus Text und Parallax-Scrolling an. Texte und Inhalte auf den Bannern werden in den individuellen, erweiterten Einstellungen der jeweiligen Seiten oder auf den Seiteninhalten selber eingefügt.
  • Im Falle der Adversary-, Alex-, Marquee- und Shift-Templates arbeitet Parallax-Scrolling auf mobilen Geräten NUR INNERHALB DER INDEX-SEITE. 'Mobile Styles' muss aktiviert sein.
  • Für die Templates BRINE, HYDE, MARTA & THORNE funktioniert Parallax-Scrolling auf Smartphones. Die einzige Ausnahme ist der Chrome-Browser auf iOS-Geräten, wo Banner als statische Hintergrundbilder angezeigt werden.
    Bei ADVERSARY, ALEX, MARQUEE & SHIFT sind Banner Bilder automatisch zentriert. Anders als bei den meisten Bildbereiche in Squarespace reagieren die Thumbnail-Bilder dieser Banner nicht auf Änderungen des Focus-Punktes.

.

 

Schritt 1 - Fügen Sie ein Hintergrundbild hinzu

Navigieren Sie im HOME MENU zu der Seite, deren Parallax-Bild Sie bearbeiten möchten und klicken Sie auf das Zahnrad-Symbol neben dem Seiten-Titel, um die Optionen zu öffnen.

In den erscheinenden Optionen / Seiteneinstellungen scrollen Sie bis zum Miniaturbild-Feld nach unten. Ziehen Sie ein Bild in den Bild-Uploader ( oder suchen Sie das zutreffende Bild nach einem Klick auf den Pfeil aus der Verzeichnis-Struktur Ihres Rechners heraus ) und klicken Sie auf SAVE / Speichern. Wiederholen Sie diesen Schritt für jede Seite auf Ihrer Website.

.

 

Schritt 2 - Parallax Scrolling ermöglichen

Öffnen Sie den Style Editor im Admin-Bereich Ihrer Website unter HOME > DESIGN.
Die Stelle, an der Parallax-Scrolling zur Verfügung steht, hängt mit Ihrem Template zusammen.

ADVERSARY, ALEX, MARQUEE & SHIFT:

Blättern Sie zu Parallax Scrolling und prüfen Sie, ob der Punkt aktiviert ist - die Grundeinstellung sieht eine aktivierte Einstellung vor. Dann klicken Sie auf SAVE / SPEICHERN.
 


Bei diesen Templates können Sie außerdem bestimmen, ob Sie eine stabil am rechten Seitenrand verlaufende Zusatz-Navigation anzeigen möchten. Diese ist standardmäßig eingeschaltet und lässt sich unter dem StyleEditor Menupunkt HIDE PARALLAX NAV ausblenden.
Die einzelnen Punkte zeigen den Namen des im Index liegenden Seitenabschnitts an und springen auf Klick zu dessen Position.


BRINE, HYDE, MARTA & THORNE:

Blättern Sie nach unten und suchen Sie nach dem Style Editor Menupunkt 'MAIN: OVERLAY' und überprüfen Sie, ob Parallax Scrolling aktiviert ist - wenn dies nicht bereits geschehen ist. Dann klicken Sie auf SAVE / SPEICHERN.

 

.

 

Schritt 3 - Parallax Scrolling abschalten

Um das Parallax-Scrolling deaktivieren, öffnen Sie den Style Editor und deaktivieren Sie 'Parallax-Scrolling' (BRINE, HYDE, MARTA & THORNE) oder 'Enable Parallax' ( ADVERSARY, ALEX, MARQUEE & SHIFT). Die Deaktivierung des Parallax-Scrolling wirkt sich auf die gesamte Website aus und kann nicht seitenweise deaktiviert werden.

NACH OBEN ↑


Alles über Blocks lesen Sie in ALLES ÜBER BLOCKS

Für die Gestaltung von Layous lesen Sie weiter in  SEITEN AUFBAUEN