Willkommen auf unserer einzigartigen Reise durch Innovation und Kreativität! Tauchen Sie ein und entdecken Sie, was hinter den Kulissen verborgen liegt. Doch Vorsicht: Nicht alles ist auf den ersten Blick sichtbar. Verborgene Schätze warten darauf, von Ihnen entdeckt zu werden. Sind Sie bereit, die Geheimnisse zu enthüllen?
EINLEITUNG
Einen modernen Onepager von Grund auf entwickeln
In diesem Tutorial entwickeln wir Schritt für Schritt einen modernen Onepager mit HTML und CSS. Dabei entsteht nicht einfach nur eine statische Seite: Wir kombinieren ein bildschirmfüllendes Hintergrundvideo, große Typografie, Parallax-Effekte, animierte Hover-Bereiche, eine feste Navigation und einen individuellen Footer.
Wir beginnen bewusst mit einer einfachen Projektstruktur und bauen den Onepager Abschnitt für Abschnitt auf. So kannst du jeden Schritt nachvollziehen und das Design später problemlos an dein eigenes Projekt anpassen.
Im ersten Teil kümmern wir uns um das Grundgerüst und die wichtigsten Bereiche der Seite. Die weiterführenden Animationen und Interaktionen folgen anschließend.
Vorbereitung
Bilder, Video und Projektstruktur
Für unseren Onepager benötigen wir zunächst einige visuelle Elemente: zwei Bilder, ein kurzes Video und ein Logo. Passendes Material findest du beispielsweise bei pixabay oder anderen Plattformen mit frei nutzbaren Medien.
Für dieses Tutorial verwende ich folgende Dateien:
tropfen.mp4
7.21 MB
work.webp
80.3 KB
banner-bottom.webp
146 KB
Anschließend legen wir eine übersichtliche Projektstruktur an:
$ mkdir OnePager
$ cd OnePager
$ mkdir assets
$ cd assets
$ mkdir images
$ mkdir videos
Bilder und Logo kommen in assets/images, das Video in assets/videos.
Zusätzlich erstellen wir im Hauptordner die index.html und innerhalb von assets unsere styles.css.
2. GRUNDGERÜST
Die Basis unseres Onepagers
Jetzt erstellen wir das HTML-Grundgerüst unseres Onepagers. Die index.html bildet dabei die zentrale Datei unserer Seite. Im <head> hinterlegen wir die wichtigsten Meta-Angaben und binden außerdem unsere zuvor angelegte styles.css ein.
Damit steht das Grundgerüst. Über assets/styles.css werden später sämtliche Styles unseres Onepagers geladen. Alles, was auf der eigentlichen Seite sichtbar sein soll, fügen wir im weiteren Verlauf innerhalb des <body> ein.
3. HEADER & NAVIGATION
Logo und Navigation hinzufügen
Als ersten sichtbaren Bestandteil unseres Onepagers erstellen wir den Header. Er enthält links unser Logo und rechts die Navigation zu den drei Hauptbereichen About, Work und Contact.
Die Links verweisen bereits auf die entsprechenden IDs der späteren Bereiche. Dadurch können wir innerhalb derselben Seite direkt zu den einzelnen Abschnitten navigieren.
Zusätzlich erhalten die Links mit data-scroll und data-hover bereits Attribute, die wir später für unsere Effekte verwenden können.
Das Logo liegt in assets/images und wird über logo-white.webp eingebunden. Die Navigation selbst funktioniert bereits über normale Ankerlinks: href="#About" führt später beispielsweise zum Element mit id="About".
Optisch ist der Header allerdings noch nicht fertig. Bevor wir ihn gestalten, legen wir zunächst einige grundlegende CSS-Regeln fest, die wir im gesamten Onepager immer wieder benötigen werden.
4. BASIS-STYLES
Die Grundlage für das Design schaffen
Bevor wir unseren Header gestalten, legen wir einige grundlegende CSS-Regeln fest. Sie bestimmen unter anderem Hintergrundfarbe, Schrift, Abstände und das Verhalten unseres Layouts.
Außerdem erstellen wir einige kleine Hilfsklassen wie .row, .align-items-center und .min-vh-100. Diese können wir später in mehreren Bereichen wiederverwenden, ohne dieselben CSS-Eigenschaften jedes Mal neu schreiben zu müssen.
Mit :root legen wir zunächst globale CSS-Variablen fest. Unsere Hintergrundfarbe ist damit beispielsweise über var(--bg) im gesamten Stylesheet verfügbar.
Anschließend vereinheitlichen wir mit box-sizing: border-box die Größenberechnung aller Elemente und aktivieren über scroll-behavior: smooth das weiche Scrollen zu unseren Ankerpunkten.
Für body, Links und Überschriften definieren wir grundlegende Farben, Schrift- und Abstandseinstellungen. Die Media Query ab 768px passt dabei die seitlichen Abstände für größere Displays an.
Die Klassen .align-items-center, .justify-content-center, .justify-content-start und .min-vh-100 sind wiederverwendbare Hilfsklassen für unser späteres Flexbox-Layout. .row bildet dafür einen flexiblen Zeilen-Container mit definierten Abständen.
5. HEADER-STYLING
Navigation fixieren und den Hover-Effekt gestalten
Unser Header ist bereits im HTML vorhanden, besitzt aber noch kein eigenes Erscheinungsbild. Jetzt positionieren wir ihn dauerhaft am oberen Rand des Browserfensters und gestalten Logo und Navigation.
Die Navigation erhält außerdem ihren charakteristischen Hover-Effekt: Beim Überfahren eines Links bewegt sich der ursprüngliche Text nach oben und der über data-hover hinterlegte Text erscheint an seiner Stelle.
Füge Folgendes unter deinen bisherigen Code in assets/styles.css ein:
Mit position: fixed bleibt der Header auch beim Scrollen am oberen Bildschirmrand sichtbar. z-index: 100 sorgt dafür, dass Logo und Navigation über den später folgenden Seiteninhalten liegen.
Logo und Navigation werden mit Flexbox an den gegenüberliegenden Seiten des Headers positioniert. Ab einer Bildschirmbreite von 1248px erhöhen wir über die Media Query die Abstände und geben dem Layout auf großen Displays mehr Raum.
Für den Hover-Effekt nutzen wir das Pseudo-Element ::after. Dessen Inhalt stammt direkt aus dem jeweiligen data-hover-Attribut unseres HTML-Links. Standardmäßig befindet sich dieser Text unterhalb des sichtbaren Bereichs des Links.
Beim Hover wird der normale Text mit translateY(-100%) nach oben geschoben, während das Pseudo-Element gleichzeitig auf top: 0 fährt. Die cubic-bezier()-Kurve sorgt dabei für die etwas dynamischere Bewegung.
Damit steht unsere feste Navigation inklusive Hover-Effekt. Im nächsten Schritt bauen wir den eigentlichen Hero-Bereich mit unserem Hintergrundvideo auf.
1.mp4
107 KB
6. HERO
Den Hero-Bereich mit Hintergrundvideo aufbauen
Nach dem Header erstellen wir den ersten großen Inhaltsbereich unseres Onepagers. Der Hero nimmt die gesamte Höhe des Browserfensters ein und kombiniert unser vorbereitetes Video tropfen.mp4 mit einer großformatigen Typografie.
Der Hero kommt in der index.html direkt nach dem schließenden </header>.
Mit min-vh-100 erhält unser Hero eine Mindesthöhe von 100vh und nimmt damit mindestens die vollständige Höhe des Browserfensters ein. Die bereits angelegten Flexbox-Hilfsklassen zentrieren den Inhalt horizontal und vertikal.
Innerhalb von .bg-video binden wir unser zuvor vorbereitetes tropfen.mp4 ein. autoplay, muted und loop sorgen dafür, dass das Video automatisch und ohne Ton in einer Schleife abgespielt wird. playsinline verhindert insbesondere auf mobilen Geräten, dass das Video automatisch im Vollbildmodus geöffnet wird.
Mit .parallax-overlay legen wir zusätzlich eine Ebene über das Video. Diese benötigen wir gleich, um das Hintergrundvideo abzudunkeln und den darüberliegenden Text besser lesbar zu machen.
data-parallax="0.5" und die Klasse .parallax-img bereiten das Video außerdem bereits für den späteren Parallax-Effekt vor.
Momentan sieht der Hero noch nicht wie gewünscht aus. Im nächsten Schritt positionieren wir das Video als vollflächigen Hintergrund und gestalten das Overlay.
7. HINTERGRUNDVIDEO & PARALLAX-BASIS
Das Video vollflächig hinter dem Hero positionieren
Unser Video ist bereits im HTML eingebunden. Jetzt sorgen wir dafür, dass es den gesamten Hero-Bereich ausfüllt und tatsächlich als Hintergrund funktioniert.
Gleichzeitig legen wir die Grundlage für die späteren Parallax-Bereiche. Deshalb berücksichtigen wir hier nicht nur .bg-video, sondern auch .bg-img. Dieselben Regeln können wir später für unsere Hintergrundbilder wiederverwenden.
Füge Folgendes unter deinen bisherigen Code in assets/styles.css ein:
.bg-video und .bg-img werden absolut positioniert und auf die vollständige Höhe des Browserfensters gesetzt. Dadurch können Video und spätere Hintergrundbilder unabhängig vom eigentlichen Inhalt hinter unseren Abschnitten liegen.
Mit width: 100vw, height: 100vh und object-fit: cover füllt das Video den verfügbaren Bereich vollständig aus. Dabei bleiben seine Proportionen erhalten; überstehende Bereiche werden bei Bedarf abgeschnitten.
Die Klasse .parallax-overlay erzeugt eine halbtransparente schwarze Ebene über dem Hintergrund. Dadurch wird das Video abgedunkelt und der darüberliegende Inhalt bleibt besser lesbar.
Die Regeln für #About, #Work und #Contact sorgen mit overflow: hidden dafür, dass Inhalte der Hintergrund- und Parallax-Ebenen nicht aus ihrem jeweiligen Abschnitt herausragen.
Gleichzeitig bereiten .bg-parallax und .parallax-img bereits die später folgende Bewegung der Hintergründe vor. Deshalb verwenden wir diese Klassen schon jetzt, auch wenn der eigentliche Parallax-Effekt erst später vollständig umgesetzt wird.
Unser Hintergrundvideo sitzt damit an der richtigen Stelle. Allerdings fehlt unserem Hero-Text noch seine eigentliche Gestaltung. Genau darum kümmern wir uns als Nächstes.
8. HERO-TYPOGRAFIE
Die große Typografie über dem Video gestalten
Das Hintergrundvideo funktioniert bereits. Jetzt geben wir dem darüberliegenden Text sein eigentliches Erscheinungsbild. Dabei unterscheiden wir zwischen dem kleinen Label b4um, der großen Hero-Typografie und den orange hervorgehobenen Wörtern.
Füge den folgenden vorhandenen Code unter deinen bisherigen Code in assets/styles.css ein:
.about_content_label gestaltet das kleine Label oberhalb unseres Hero-Textes. Durch Großbuchstaben und einen großen Zeichenabstand hebt es sich deutlich von der restlichen Typografie ab.
Die eigentliche Hero-Typografie entsteht mit .text-center. Auf kleineren Displays verwenden wir eine feste Schriftgröße von 4rem. Ab einer Bildschirmbreite von 1248px wechseln wir auf 5vw, sodass sich die große Schrift proportional an die Breite des Browserfensters anpasst.
Über strong können einzelne Wörter innerhalb der großen Typografie hervorgehoben werden. In unserem Hero erhalten good und shit dadurch die Akzentfarbe #eb5939.
Die Eigenschaften background-clip, background-size und transition bereiten außerdem bereits einen späteren Texteffekt vor. Auch diesen Code behalten wir deshalb schon jetzt bei.
1.webp
109 KB
Damit ist unser Hero mit Hintergrundvideo und großer Typografie fertig aufgebaut. Im nächsten Abschnitt verlassen wir den bildschirmfüllenden Einstieg und erstellen den ersten inhaltlichen Bereich unseres Onepagers.
9. ABOUT ME
Den ersten Inhaltsbereich erstellen
Nach dem Hero folgt ein ruhigerer, rein typografischer Abschnitt. Auch dieser Bereich nimmt mindestens die gesamte Höhe des Browserfensters ein und wird horizontal sowie vertikal zentriert.
Die einzelnen Textzeilen bekommen eigene Container. Das benötigen wir später für die Gestaltung und weitere Effekte . Füge den folgenden Code in der index.html innerhalb von <div class="content"> direkt nach dem Hero-Bereichein:
// index.html
<divclass="row justify-content-center align-items-center min-vh-100"><divclass="display"><pclass="about_content_label text-color">About me</p><divclass="text no-padding no-border text-align-left text-row"><span>Ich bin ein <strong>selektiv</strong><strong>qualifizierter</strong> Produkt</span></div><divclass="text no-padding no-border text-align-left text-row"><span>Designer mit starkem Fokus auf</span></div><divclass="text no-padding no-border text-align-left text-row"><span>der Erstellung von hochwertigen &</span></div><divclass="text no-padding no-border text-align-left text-row"><span>wirkungsvollen digitalen Erlebnissen.</span></div></div></div>
Für den Aufbau verwenden wir erneut unsere bereits angelegten Hilfsklassen. min-vh-100 gibt dem Bereich mindestens die Höhe des Browserfensters, während justify-content-center und align-items-center den Inhalt zentrieren.
Jede Textzeile erhält die Klasse .text. Mit zusätzlichen Hilfsklassen können wir bei Bedarf Innenabstände und Rahmen entfernen oder die Ausrichtung verändern. Die bereits bekannte strong-Formatierung hebt einzelne Wörter wieder in unserer Akzentfarbe hervor.
Den About-Text gestalten
Jetzt ergänzen wir die noch fehlenden Klassen in unserer assets/styles.css:
.text bildet ab jetzt eine zentrale Klasse für die großen Textzeilen unseres Onepagers. Neben Schriftgröße und Gewicht enthält sie bereits Eigenschaften wie background-clip, background-size und transition, die wir für weitere visuelle Effekte vorbereiten.
Der Text wird zunächst mit einer sehr transparenten Farbe dargestellt. Das ist an dieser Stelle beabsichtigt und wird später im Abschnitt zu den globalen Einstellungen noch einmal wichtig.
Mit .no-padding, .no-border und .text-align-left können wir die Grundeinstellungen von .text gezielt überschreiben. .text-row begrenzt unseren Inhalt auf großen Displays später auf maximal 1248px.
Ab 1248px verwenden wir für .text eine Schriftgröße von 4vw. Dadurch wächst die Typografie mit der Breite des Browserfensters und erhält auf großen Displays die gewünschte Wirkung.
2.webp
51.7 KB
Unser About-Bereich steht. Als Nächstes verwenden wir dieselbe typografische Grundlage für eine deutlich interaktivere Variante: Textzeilen, deren zusätzliche Inhalte erst beim Hover sichtbar werden.
10. INTERAKTIVE HOVER-TEXTE
Zusätzliche Inhalte beim Hover sichtbar machen
Jetzt bekommt unser Onepager eine erste größere Interaktion. Die einzelnen Zeilen zeigen zunächst nur die jeweilige Leistung. Sobald wir mit der Maus über einen Eintrag fahren, wird eine farbige Fläche eingeblendet, auf der zusätzliche Informationen erscheinen.
Dafür benötigen wir kein JavaScript. Der Effekt wird vollständig mit CSS und clip-path umgesetzt.
Füge den folgenden Code in der index.html direkt nach dem About-Me-Bereich ein:
// index.html
<divclass="row justify-content-center align-items-center min-vh-100"><divclass="display-row width-100"><pclass="about_content_label text-color">What i do</p><divclass="text uppercase hidden-link"><divclass="text-row">3D</div><divclass="span"><divclass="text-row"><divclass="big">3D</div><divclass="smal">
Ich kann alles produzieren, was mein 16-Zoll-Laptop rendern
kann.
</div></div></div></div><divclass="text uppercase hidden-link"><divclass="text-row">Visuell</div><divclass="span"><divclass="text-row"><divclass="big">Visuell</div><divclass="smal">
Ich suche im Internet nach visuellen Referenzen und
kombiniere sie dann, um meine eigenen Arbeiten zu erstellen.
</div></div></div></div><divclass="text uppercase hidden-link"><divclass="text-row">Bewegung</div><divclass="span"><divclass="text-row"><divclass="big">Bewegung</div><divclass="smal">
Ich verwende ausgefallene Bewegungen, die mein Design
interessanter erscheinen lassen, als es tatsächlich ist.
</div></div></div></div><divclass="text uppercase hidden-link"><divclass="text-row">Produkt</div><divclass="span"><divclass="text-row"><divclass="big">Produkt</div><divclass="smal">
Ich nutze gängige Design-Best Practices, teste und
überarbeite sie, bis es funktioniert (hoffentlich).
</div></div></div></div><divclass="text uppercase hidden-link"><divclass="text-row">Tutorial</div><divclass="span"><divclass="text-row"><divclass="big">Tutorial</div><divclass="smal">
Ich dachte, ich würde Millionen von Dollar mit YouTube
verdienen, aber das habe ich nicht.
</div></div></div></div></div></div>
Jeder Eintrag besteht aus zwei Ebenen. Die erste .text-row enthält den zunächst sichtbaren Titel. Direkt danach folgt mit .span eine zweite Ebene mit dem zusätzlichen Inhalt.
Diese zweite Ebene wird nicht aus dem HTML entfernt oder ausgeblendet. Stattdessen verwenden wir gleich clip-path, um sie zunächst auf eine schmale Linie zusammenzuschneiden. Beim Hover öffnen wir diese Fläche wieder auf ihre vollständige Größe.
Den Hover-Effekt mit CSS erstellen
Jetzt kommt dein vollständiger zugehöriger CSS-Code:
wird diese Fläche zunächst auf die horizontale Mitte zusammengeschnitten.
Sobald sich der Mauszeiger über dem Eintrag befindet, ändern wir den clip-path auf die vollständige Fläche:
polygon(0 0, 100% 0, 100% 100%, 0% 100%)
Durch die definierte transition geschieht dieser Wechsel nicht schlagartig, sondern als Animation. .big formatiert dabei die große Bezeichnung auf der linken Seite, während .smal den erklärenden Text auf der rechten Seite gestaltet.
Die Media Query passt diese beiden Texte anschließend für große Displays an.
2.mp4
2.78 MB
Damit haben wir unsere erste rein mit CSS erzeugte Interaktion fertig. Diesen Hover-Effekt werden wir später noch einmal wiederverwenden. Als Nächstes bauen wir den Work-Bereich auf und kombinieren unsere Typografie mit einem großflächigen Hintergrundbild.
11. WORK & EXPERIENCE
Großflächiges Hintergrundbild mit unserer Typografie kombinieren
Nach den textbasierten Bereichen bringen wir wieder mehr visuelle Tiefe in den Onepager. Der Work-Bereich erhält ein bildschirmfüllendes Hintergrundbild, über dem wir unseren Experience-Text platzieren.
Dabei können wir die bereits für den Hero vorbereiteten Klassen .bg-img, .bg-parallax, .parallax-img und .parallax-overlay wiederverwenden. Statt eines Videos dient diesmal unser Bild work.webp als Hintergrund.
Füge diesen Code in der index.html direkt nach dem vorherigen Bereich ein:
// index.html
<divid="Work"class="row justify-content-center align-items-center min-vh-100"><divclass="bg-img"><divclass="bg-parallax img"><imgclass="parallax-img"src="assets/images/work.webp"/><divclass="parallax-overlay"></div></div></div><divclass="display text-parallax"><pclass="about_content_label text-color">Experience</p><divclass="text no-padding no-border text-align-left text-row"><span>
Über
<strong>ein Jahrzehnt</strong>
an Erfahrung</span></div><divclass="text no-padding no-border text-align-left text-row">
in interaktives Design und
</div><divclass="text no-padding no-border text-align-left text-row">
Zusammenarbeit mit einigen der talentiertesten Personen in der
Branche
</div></div></div>
Mit id="Work" erhält dieser Abschnitt gleichzeitig das Ziel für den bereits im Header angelegten Link href="#Work".
Der Aufbau des Hintergrundes entspricht weitgehend unserem Hero. .bg-img bildet die Hintergrundebene, während .parallax-img unser Bild enthält.
Das darüberliegende .parallax-overlay dunkelt das Bild ab, damit die große Typografie gut lesbar bleibt.
Für den Text verwenden wir erneut unsere bereits erstellten Klassen .text, .text-row, .no-padding und .no-border. Dadurch müssen wir die grundlegende Typografie nicht noch einmal neu definieren.
Die zusätzliche Klasse .text-parallax bereitet auch den Text bereits für den späteren Parallax-Effekt vor.
Der Work-Bereich funktioniert damit bereits mit unseren vorhandenen Styles. Dabei fällt allerdings etwas auf: Einige unserer Texte erscheinen momentan sehr transparent. Das ist grundsätzlich beabsichtigt, für unseren aktuellen Stand möchten wir sie jedoch vollständig sichtbar machen.
Dafür führen wir im nächsten Schritt einige Farben als globale CSS-Variablen zusammen.
12. GLOBALE EINSTELLUNGEN
Farben zentral über CSS-Variablen verwalten
In unserem Stylesheet verwenden wir inzwischen dieselben Farben an mehreren Stellen. Bisher haben wir die jeweiligen Farbwerte direkt in die einzelnen CSS-Regeln geschrieben.
Damit wir diese Farben später einfacher ändern können, legen wir sie jetzt als globale CSS-Variablen fest.
Ganz oben in unserer assets/styles.css befindet sich bereits der :root-Bereich:
Damit haben wir vier unterschiedliche Varianten unserer Textfarbe zentral hinterlegt:
--color-body verwenden wir für die allgemeine Textfarbe. --color-text enthält die vollständig sichtbare Textfarbe. --color-text-transparent besitzt mit 0.2 nur eine geringe Deckkraft und --color-text-navi ist mit 0.5 für die zurückhaltendere Darstellung unserer Navigation vorgesehen.
Vorhandene Farbwerte durch die Variablen ersetzen
Das Anlegen der Variablen allein verändert unsere Seite noch nicht. Damit sie tatsächlich verwendet werden, ersetzen wir jetzt die entsprechenden Farbwerte in unserem bisherigen CSS.
Wo bisher beispielsweise steht:
color: #b7ab98;
können wir verwenden:
color: var(--color-body);
Eine vollständig sichtbare Textfarbe wie:
color: rgb(183, 171, 152, 1);
ersetzen wir durch:
color: var(--color-text);
Für unsere transparente Textfarbe:
color: rgb(183, 171, 152, 0.2) !important;
verwenden wir:
color: var(--color-text-transparent) !important;
Und die bisher direkt eingetragene Navigationsfarbe:
color: rgb(183, 171, 152, 0.5);
kann durch:
color: var(--color-text-navi);
ersetzt werden.
Das Aussehen unserer Seite verändert sich dadurch zunächst nicht. Wir haben lediglich die bereits vorhandenen Farbwerte durch zentrale Variablen ersetzt.
Die Textfarbe zentral verändern
Jetzt können wir den Vorteil der Variablen direkt ausprobieren.
Unsere großen Texte verwenden inzwischen:
color: var(--color-text-transparent) !important;
Die dazugehörige Variable ist in :root momentan so definiert:
Dadurch erscheinen diese Texte nur mit geringer Deckkraft.
Für unseren aktuellen Stand möchten wir sie vollständig sichtbar machen. Deshalb ändern wir in :root nur diese eine Zeile zu:
--color-text-transparent: rgb(183, 171, 152, 1);
Alle Elemente, die var(--color-text-transparent) verwenden, erhalten damit automatisch die neue Deckkraft.
Wir müssen die einzelnen CSS-Regeln nicht mehr separat verändern. Genau darin liegt der Vorteil unserer globalen Variablen.
Experience
13. HISTORY
Berufliche Stationen mit dem Hover-Effekt darstellen
Unseren zuvor entwickelten Hover-Effekt können wir nicht nur für kurze Leistungsbeschreibungen verwenden. Im nächsten Abschnitt nutzen wir dieselbe Technik für eine kleine berufliche Historie.
Jede Zeile zeigt zunächst ein Jahr, eine Position und das zugehörige Unternehmen. Beim Hover erscheint wieder die orangefarbene Ebene und zeigt eine alternative Bezeichnung.
Füge den folgenden Bereich in der index.html direkt nach dem Work-Bereich ein:
Den eigentlichen Hover-Effekt müssen wir nicht erneut programmieren. Die dafür benötigten Klassen .span, .text und .text-row haben wir bereits angelegt.
Für die History benötigen wir lediglich einige zusätzliche Formatierungen.
Füge deshalb Folgendes unter deinen bisherigen Code in assets/styles.css ein:
Mit .text-black erhält der Text innerhalb der orangefarbenen Hover-Fläche eine dunkle Farbe und hebt sich dadurch deutlich vom Hintergrund ab.
.simple-masking hebt die zuvor über .uppercase festgelegte Großschreibung für diesen Teil des Inhalts wieder auf. So können Position und Unternehmen in normaler Schreibweise dargestellt werden.
Mit .font-400 verkleinern wir zusätzlich die Unternehmensbezeichnung unterhalb der jeweiligen Position.
Die bereits vorhandene Klasse .justify-content-start richtet Jahr und Beschreibung gemeinsam am Anfang der Zeile aus. Auch die .h3-Formatierungen haben wir bereits im vorherigen Hover-Bereich vorbereitet und können sie hier wiederverwenden.
Beim Überfahren einer Zeile greift schließlich derselbe clip-path-Effekt wie zuvor. Dadurch öffnet sich die orangefarbene Ebene und gibt den alternativen Inhalt frei.
4.webp
67.6 KB
Damit haben wir einen bestehenden Effekt für einen völlig anderen Inhalt wiederverwendet, ohne die eigentliche Animation erneut programmieren zu müssen.
Als Nächstes erstellen wir einen weiteren typografischen Abschnitt, in dem wir einige ausgewählte Kunden beziehungsweise Projekte vorstellen.
14. CLIENTS
Einen weiteren typografischen Abschnitt aufbauen
Nach unserer beruflichen Historie erstellen wir einen weiteren großformatigen Textbereich. Diesmal verwenden wir ihn als Einleitung für die anschließend folgenden Kunden und Projekte.
Beim Aufbau können wir vollständig auf unsere bereits vorhandenen Klassen zurückgreifen. Dadurch benötigen wir für diesen Abschnitt kein zusätzliches CSS.
Füge den folgenden Code in unserer index.html nach dem History-Bereich ein:
// index.html
<divclass="row justify-content-center align-items-center min-vh-100"><divclass="display"><pclass="about_content_label text-color">Clients</p><divclass="text no-padding no-border text-align-left text-row">
Ich habe mit einigen der innovativsten Branchenführer
zusammengearbeitet, um ihre erstklassigen Produkte aufzubauen.
</div><divclass="text no-padding no-border text-align-left text-row"><span><strong>innovative</strong> Industrieführer</span></div><divclass="text no-padding no-border text-align-left text-row">
zu helfen, ihre erstklassigen Produkte aufzubauen.
</div></div></div>
Der Aufbau entspricht unserem vorherigen About-Bereich. Mit min-vh-100 nimmt auch dieser Abschnitt mindestens die vollständige Höhe des Browserfensters ein.
Für die einzelnen Zeilen verwenden wir wieder .text, .text-row, .no-padding, .no-border und .text-align-left. Sämtliche dafür notwendigen Formatierungen befinden sich deshalb bereits in unserer assets/styles.css.
Das Wort innovative liegt innerhalb eines strong-Elements und erhält dadurch automatisch unsere bereits definierte orangefarbene Hervorhebung.
Gerade bei einem Onepager ist diese Wiederverwendung hilfreich: Statt für jeden Abschnitt neue Styles anzulegen, bauen wir unterschiedliche Inhalte aus denselben grundlegenden Komponenten auf.
5.webp
105 KB
Der Clients-Bereich dient zunächst als typografische Einleitung. Im nächsten Schritt ergänzen wir die eigentliche Kundenliste und greifen dabei erneut auf unseren animierten Hover-Effekt zurück.
15. INTERAKTIVE KUNDENLISTE
Kunden und Projekte mit unserem Hover-Effekt darstellen
Unterhalb der Clients-Einleitung erstellen wir jetzt die eigentliche Kundenliste. Dafür verwenden wir denselben Aufbau, den wir bereits bei „What i do“ kennengelernt haben.
Zunächst ist jeweils nur der Name des Kunden sichtbar. Beim Hover öffnet sich die orangefarbene Ebene und zeigt zusätzlich eine kurze Beschreibung des jeweiligen Projekts.
Füge den folgenden Code in der index.html direkt nach dem vorherigen Clients-Bereich ein:
// index.html
<divclass="row justify-content-center align-items-center min-vh-100"style="position: relative"><divclass="display-row width-100"><divclass="text uppercase hidden-link"><divclass="text-row">Ford</div><divclass="span"><divclass="text-row"><divclass="big">Ford</div><divclass="smal">
Arbeit an der nächsten Generation der HMI-Erfahrung ohne Fahrerfahrung.
</div></div></div></div><divclass="text uppercase hidden-link"><divclass="text-row">Ufc</div><divclass="span"><divclass="text-row"><divclass="big">Ufc</div><divclass="smal">
Entwicklung der Zukunft des UFC-Sportökosystems, obwohl ich kein Sportfan bin.
</div></div></div></div><divclass="text uppercase hidden-link"><divclass="text-row">Lincoln</div><divclass="span"><divclass="text-row"><divclass="big">Lincoln</div><divclass="smal">
Definition des visuellen Konzepts und der Designsprache für den Lincoln Zephyr 2022, obwohl ich ihn nie persönlich gesehen habe.
</div></div></div></div><divclass="text uppercase hidden-link"><divclass="text-row">Royal caribbean</div><divclass="span"><divclass="text-row"><divclass="big">Royal caribi</div><divclass="smal">
Ich war nur eine Person in einem riesigen Team, das ein ganzes Royal Caribbean-Ökosystem geschaffen hat.
</div></div></div></div><divclass="text uppercase hidden-link"><divclass="text-row">SleepiQ</div><divclass="span"><divclass="text-row"><divclass="big">SleepiQ</div><divclass="smal">
Entwickelte ein Produkt für über 1 Million Benutzer und nutzte dabei meine beste persönliche Erfahrung: das Schlafen.
</div></div></div></div><divclass="text uppercase hidden-link"><divclass="text-row">NFL</div><divclass="span"><divclass="text-row"><divclass="big">NFL</div><divclass="smal">
Erforschung der Zukunft des Fantasy-Footballs, während ich mich in einem Land befand, in dem Fußball eine völlig andere Sportart bedeutet.
</div></div></div></div></div></div>
Für diesen Abschnitt müssen wir keine neuen CSS-Regeln hinzufügen. Die Klassen .text, .span, .text-row, .big, .smal, .uppercase und .hidden-link haben wir bereits in den vorherigen Abschnitten angelegt.
Auch die Animation funktioniert deshalb sofort nach demselben Prinzip: Die orangefarbene .span-Ebene ist zunächst mit clip-path auf die Mitte der jeweiligen Zeile reduziert. Beim Hover wird sie auf die vollständige Höhe und Breite geöffnet.
Dadurch können wir denselben visuellen Effekt für unterschiedliche Inhalte einsetzen, ohne den dazugehörigen CSS-Code zu duplizieren.
6.webp
51.9 KB
Damit ist auch unser Clients-Bereich abgeschlossen. Als Nächstes erstellen wir den Contact-Bereich am Ende des Onepagers. Dort kombinieren wir erneut ein großflächiges Hintergrundbild mit unserer Typografie.
16. CONTACT
Den Abschlussbereich mit einem Hintergrundbild gestalten
Zum Abschluss unseres Hauptinhalts erstellen wir den Contact-Bereich. Ähnlich wie beim Work-Bereich verwenden wir wieder ein großflächiges Hintergrundbild, ein dunkles Overlay und unsere bereits vorhandene Typografie.
Als Inhalt verwenden wir an dieser Stelle ein kurzes Motto. Durch den bildschirmfüllenden Hintergrund hebt sich dieser Bereich deutlich von den vorherigen Abschnitten ab.
Füge den folgenden Code in der index.html direkt nach dem Clients-Bereich ein:
Mit id="Contact" erhält der Bereich gleichzeitig das Ziel für den bereits zu Beginn angelegten Navigationslink href="#Contact".
Für das Hintergrundbild greifen wir erneut auf .bg-img, .bg-parallax, .parallax-img und .parallax-overlay zurück. Der Aufbau entspricht damit unserem Work-Bereich und benötigt keine zusätzlichen CSS-Regeln.
Das Bild banner-bottom.webp wird bildschirmfüllend im Hintergrund dargestellt und durch das Overlay abgedunkelt. Darüber platzieren wir unser Motto mit den bereits vorhandenen Textklassen.
Auch hier zeigt sich wieder der Vorteil unserer bisherigen Struktur: Hintergrund, Overlay und Typografie können für einen neuen Abschnitt kombiniert werden, ohne dieselben Styles erneut schreiben zu müssen.
Mein Motto
Damit ist der eigentliche Hauptinhalt unseres Onepagers aufgebaut. Im nächsten Schritt ergänzen wir eine seitlich fixierte Leiste mit mehreren Icons, die auf großen Displays eingeblendet wird.
17. SEITLICHE ICON-LEISTE
Eine fixierte Icon-Leiste für große Displays hinzufügen
Zusätzlich zu unserer Navigation ergänzen wir eine kleine seitliche Icon-Leiste. Sie wird am linken unteren Rand des Browserfensters fixiert und bleibt dadurch auch beim Scrollen an derselben Position.
Die einzelnen Grafiken werden direkt als SVG in unser HTML eingebunden. Dadurch benötigen wir für die Icons keine zusätzlichen Bilddateien und können ihr Erscheinungsbild später unmittelbar über CSS beeinflussen.
Füge den folgenden <aside>-Bereich in unserer index.html ein:
Der <aside> enthält vier Listeneinträge mit jeweils einer direkt eingebetteten SVG-Grafik. Durch diese Struktur können wir die gesamte Leiste gemeinsam positionieren und die einzelnen Icons untereinander anordnen.
Die Icon-Leiste positionieren und gestalten
Jetzt ergänzen wir die zugehörigen Styles in unserer assets/styles.css:
Standardmäßig ist der gesamte aside mit display: none ausgeblendet. Dadurch erscheint die zusätzliche Leiste nicht auf kleineren Displays und nimmt dort auch keinen Platz ein.
Erst ab einer Bildschirmbreite von 1248px setzen wir den Bereich über die Media Query auf display: flex.
Mit position: fixed, left: 0 und bottom: 0 bleibt die Leiste am linken unteren Rand des Browserfensters stehen. Die Icons selbst werden innerhalb der Liste mit Flexbox untereinander angeordnet.
Für die einzelnen Listeneinträge legen wir außerdem die Variablen --x, --y und --size an. Diese bereiten die Icons bereits für weitere Interaktionen vor, die wir in einem späteren Teil des Tutorials ergänzen können.
Beim Hover über einen Link verändern wir mit svg path außerdem die Füllfarbe der SVG-Grafik. Die definierte Transition sorgt dafür, dass dieser Farbwechsel weich animiert wird.
3.mp4
21 MB
Damit ist auch unsere seitlich fixierte Icon-Leiste vorbereitet. Auf kleineren Geräten bleibt sie verborgen, während sie auf großen Displays automatisch eingeblendet wird.
Als Nächstes bauen wir den Footer unseres Onepagers auf. Dort kombinieren wir Kontaktinformationen und verschiedene Links erneut mit unserem bereits entwickelten Hover-Effekt.
18. FOOTER
Links und Kontaktmöglichkeiten im Footer ergänzen
Zum Abschluss unseres Onepagers erstellen wir einen Footer mit verschiedenen Social-Media-Links sowie unseren direkten Kontaktmöglichkeiten.
Auch hier verwenden wir den bereits entwickelten Hover-Effekt erneut. Dadurch verändert sich beim Überfahren eines Links nicht nur seine Darstellung, sondern es kann zusätzlich ein alternativer Text eingeblendet werden.
Der Footer besteht aus drei Spalten. Die ersten beiden enthalten verschiedene externe Links, während die dritte Spalte E-Mail-Adresse und Telefonnummer aufnimmt.
Für die Links greifen wir erneut auf .text, .hidden-link, .span, .text-row und .big zurück. Dadurch können wir unseren bereits vorhandenen Hover-Effekt auch im Footer verwenden.
Die Klasse .hidden-circle sowie das leere Element .div-icon bereiten außerdem bereits Elemente vor, die wir in einem späteren Teil des Tutorials noch benötigen.
Den Footer gestalten
Jetzt ergänzen wir den vollständigen Footer-Code in unserer assets/styles.css:
Auf kleineren Displays stehen die drei Bereiche zunächst untereinander. Ab einer Bildschirmbreite von 1248px wechseln wir mit der Media Query auf eine horizontale Anordnung.
Die unterschiedlichen Selektoren innerhalb von footer passen unsere bereits vorhandenen Text- und Hover-Klassen gezielt an die kompaktere Darstellung des Footers an.
Mit .small und .small-height formatieren wir die kleineren Kontaktinformationen. Die eigentlichen Links erhalten über .contact-link unsere globale Textfarbe, während die Links innerhalb der orangefarbenen Hover-Fläche dunkel dargestellt werden.
Über .contact-link::after wird außerdem eine kleine zusätzliche Grafik neben den entsprechenden Links eingebunden.
4.mp4
44 MB
Damit ist auch unser Footer fertig aufgebaut und der erste Teil unseres Onepagers abgeschlossen.
Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren,
Funktionen für soziale Medien anbieten zu können und die Zugriffe auf
unsere Website zu analysieren.
Sie akzeptieren unsere Cookies, wenn Sie fortfahren diese Webseite zu
nutzen.
Datenschutzerklärung.
