Tutorial Responsive Website mit und ohne Parallax

Dieses Tutorial beschreibt die im Moment einfachste Methode eine NetObjects Fusion (NOF) Seite responsive zu gestalten. Unten zusätzlich mit Parallax und auch für das responsive Video.

Markiert Euer Layout und fügt in die HTML vom Layout folgendes Meta-Tag und folgende Style-Anweisung ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>

  /* horizontalen Scrollbalken nicht darstellen, der bei einer Breite von 100% entsteht */
  html {
    overflow-x: hidden;
  }

  /* Bilder auf 100% der Seitenbreite verkleinern */
  img {
    max-width:100%;
    height:auto;
    width: auto; /* IE 8 */
  }
   
</style>

Weiterhin fügt Ihr folgendes DIV mit dieser Style-Anweisung im <body> der Seite ein.

> am “Beginn des Haupttextes

   <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%;">

schließt dieses DIV wieder

> am “Ende des Haupttextes

   </div>

... unten ein Screenshot aller Einfügungen in der Seiten-HTML

Seiten-HTML

Durch das oben eingefügt DIV im <body> wird diese, von der von NOF automatisch generierten Pixel-Breite, auf eine Breite von 100% gestellt und in eine absolute Position der Seite versetzt, die keine Ränder hat.

Daher müsst Ihr nun jedem Textfeld auch unter “Größe” eine Breite von 100% in den CSS-Eigenschaften geben und es auf die volle Layoutbreite aufziehen und fügt z.B. Objekte wie Bilder auch immer in Textfelder ein, denen eine Breite von 100% gegeben wurde.

CSS-Eigenschaften Textfelder

Damit habt Ihr bereits Eure responsive Seite erstellt. Dies ist jetzt ganz bewusst ein sehr einfaches Beispiel mit den minimalsten Anforderungen. Eurer Phantasie sind natürlich keine Grenzen gesetzt.

 

Parallax-Effekt mit reiner CSS:

Für den zusätzlichen Parallax-Effekt habe ich ebenfalls nur die minimalsten Anforderung an die CSS eingetragen. Bei dem Parallax-Effekt müssen die verwendeten Bilder eine ausreichende Größe haben, damit diese bei einer Vergrößerung auf die voller Bildschirm-Breite und Höhe nicht zu unscharf werden. Achtet dabei auch darauf, dass die Auflösung der Bilder nicht zu hoch ist, reduziert diese eventuell mit Euren Foto-Berarbeitungs-Programm, damit das Laden der Seite nicht extrem lange dauert.

Hierzu markiert Ihr das aufgezogene Textfeld für das Hintergrundbild, wählt bei “Hintergrund” unter “Bild” dieses Hintergrundbild (hier ‘blume.jpg’) und hakt “Höhe fixieren” an, dann könnt Ihr das Textfeld auf jede beliebige Höhe aufziehen.

Text-Eigenschaften

Nun tragt Ihr bei den CSS-Eigenschaften des Textfeldes unter “Hintergrund” ein:

  • bei ‘background-attachment’: fixed
  • bei ‘background-size’: cover
CSS-Eigenschaften Hintergrundbild

 

Responsive Video

gefunden auf: github.com/davatron5000/FitVids.js - ladet Euch dort die ZIP-Datei zum besseren Verständnis und für die benötigte JavaScript-Datei herunter oder ladet Euch die JavaScript-Datei am Link unten mittels Rechtsklick (Ziel speichern unter) hier herunter.

 

Das responsive Video habe ich auf der gleichen, responsiven Seite hier eingebaut. Hierfür benötigt Ihr lediglich einige Style-Anweisungen. Hier meine CSS als Beispiel, in der ich dem Video eine Breite (width) von 70% gegeben habe.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

<style>
   /* CSS responsive Iframe Video */
   video {
    max-width: 100%;
    height: auto;
  }

  .container {
    width: 70%;
    margin:0px auto;
    box-shadow: 5px 5px 5px #888888;
  }
</style>

Für das Video selbst wird vom Autor angegeben, dass folgende Videos verlinkt werden können:

Von:

  • YouTube
  • Vimeo

Ich habe hier den Einbettungscode vom Video “Big Buck Bunny” (YouTube) verwendet. Klickt dazu mit der rechten Maustaste auf das YouTube Video und wählt “Einbettungscode kopieren”. Fügt die URL zu Eurem Video mit dem Iframe-Code, wie unten zu sehen, in den HTML-Code Editor eines Textfeldes ein.

> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Textfeld” > Button “HTML

            <div class="container">
                <iframe width="854" height="480" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
            </div>

Jetzt baut Ihr noch die Verlinkung zu der JavaScript-Datei “jquery.fitvids.js” und das dazugehörige Script am “Ende des Haupttextes” der Seite ein. Achtet bei der Verlinkung (wie immer) auf die korrekte relative Pfadangabe zu der JavaScript-Datei, die bei mir im gleichen Verzeichnis wie meine Seite liegt.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Ende des Haupttextes” einfügen

    <!-- Video-JavaScript -->
    <script src="jquery.fitvids.js"></script>
    <script>
        // Videoaufruf
        $(".container").fitVids();
    </script>

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik