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.
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
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.
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.
Nun tragt Ihr bei den CSS-Eigenschaften des Textfeldes unter “Hintergrund” ein:
- bei ‘background-attachment’: fixed
- bei ‘background-size’: cover
Viel Spaß!
