Tutorial Parallax Hintergrund Effekt - hier in NOF 2015

Diese Seite ist aus einer Idee von NetObjects Fusion entstanden. Bitte guckt Euch auch dieses Tutorial als Film einmal an.

Ladet Euch diese JavaScript-Datei von meinem Server herunter, die NetObjects Fusion erstellt hat (rechte Maustaste auf den Link unten, speichern unter).

full-width-snippet.js

Stellt die HTML-Ausgabe auf “HTML5 Dynamic” und das Layout auf die Ausgabe “ZeroMargins”, sodass Ihr nur in einem Layout ohne Master-Rahmen arbeitet.

Kopiert diese JavaScript-Datei “full-width-snippet.js” in Euer Projekt-Verzeichnis “Assets” und lest diese in NOF ein. Dazu markiert Ihr das Layout und lest die Datei wie hier beschrieben ein. Wählt dabei am besten “Client-Seite“ und “Site-übergreifend”, damit wird die JavaScript Datei auf allen Seiten mittels Link von NOF eingelesen.

JavaScript

Zieht Euch nun mehrere Layoutbereiche auf. Ich habe hier die Layoutbereiche für die Texte auf eine Höhe von 400px und die Layoutbereiche für die Hintergrundbilder auf eine Höhe von 600px aufgezogen. Zieht die Layoutbereiche alle auf die volle Breite Eurer Seite auf und setzt diese in der Höhe direkt und bündig aneinander. Achtet darauf, dass dabei keine Überlappungen der Layoutbereiche entstehen.

Gebt allen Layoutbereichen folgende Class, die in der JavaScript-Datei gegründet wurde.

nof-fullwidth

Layoutbereich Class

Legt nun in den Layoutbereich mit Eurem Text eine Hintergrundfarbe Eurer Wahl...

Hintergrund Farbe

... und in den Layoutbereich mit Eurem Bild ein Hintergrundbild Eurer Wahl.

Hintergrund Bild

Gebt in den CSS-Eigenschaften der Layoutbereiche mit den Bildern noch folgende Attribute ein:

  • background-attachment: fixed
  • background-position: center
  • background-size: cover
CSS Layoutbereich

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik