Fertigstellen der Responsive Timeline-Portfolioseite

Was Sie erstellen werden

Lassen Sie uns vom vorherigen Tutorial fortfahren und unserem Build etwas mehr Glanz verleihen.

Symbol wird geladen

Wir werden in CSS3 Animationen eintauchen und eine einfache Animation für unser Ladesymbol erstellen. Wir haben bereits das benötigte Markup auf der Seite, also gehen wir direkt in das CSS.

div.loading color: darken ($ gray, 20%); Position: absolut; Breite: 100px; unten: 15px; links: 50%; Rand links: -50px; img vertikal ausrichten: Mitte; & .rotate -webkit-animation-name: drehen; -ms-animation-name: drehen; Animationsname: drehen; -webkit-Animationsdauer: 1s; Animationsdauer: 1s; -webkit-animation-iterations-count: unendlich -ms-Animation-Iterationszahl: unendlich; Animations-Iterationszahl: unendlich; -webkit-animation-timing-Funktion: linear; -ms-animation-timing-Funktion: linear; Animations-Timing-Funktion: linear; 

Platzieren Sie diesen Code direkt nach dem Portfolio-Element Block in unserer Sass-Datei. Zunächst richten wir hier nur einige Stile für das Laden von div ein. Wir positionieren es absolut und stellen sicher, dass es mit a zentriert wird Rand linksvon -50px, Das ist die Hälfte der Breite des Elements. Dies soll die Tatsache ersetzen, dass CSS-Elemente in der oberen linken Ecke positioniert werden.

Der nächste Abschnitt ist viel interessanter. Wie Sie vielleicht im HTML-Code gesehen haben, haben wir eine Klasse von zugewiesen drehen zum Laden  Tag, den wir als Hook verwenden, um eine CSS-Animation auszuführen. Die Stile sind hier für unsere Animation eingerichtet. 

Grundsätzlich sagen wir CSS, wie unsere Animationsfunktion heißt (wir werden das in Kürze erstellen), wie lange die Animation laufen soll, wie oft sie laufen soll und welche Timing- oder Beschleunigungsfunktion verwendet werden soll. Für unser Projekt wollen wir eine schöne, glatte 360-Grad-Drehung, die niemals aufhört. Der obige Code wird genau das erreichen. 

Hinweis: Wir müssen Browser-vorangestellte Deklarationen hinzufügen, damit niemand versäumt - und wir könnten dies verbessern, indem wir ein Sass-Mixin verwenden, um das schwere Heben für uns zu erledigen.

Lass uns einen Blick in den Browser werfen.

OK, es sieht wirklich gut aus, aber es fehlt eine Sache. Es ist nicht animierend! Beheben wir das jetzt mit dem folgenden Code:

@ -webkit-Keyframes drehen 100% -webkit-transform: drehen (360 Grad); verwandeln: drehen (360deg); -webkit-transform-origin: center center; Ursprungsumwandlung: Mitte Mitte;  @keyframes drehen 100% -webkit-transform: rotate (360deg); -ms-transform: drehen (360deg); verwandeln: drehen (360deg); -webkit-transform-origin: center center; -ms-transform-origin: center center; Ursprungsumwandlung: Mitte Mitte; 

Also hier ist der drehen Funktion. Das funktioniert so, indem Sie wichtige Punkte in der Animation setzen, um das Element zu ändern. Sie können etwas festlegen, das bei 0%, 25%, 50% usw. geschehen soll. Unsere Animation ist sehr einfach, wir brauchen also nur eine Deklaration bei 100%, die besagt, dass das Element um 360 Grad gedreht werden muss. Dies bedeutet, dass unser Element eine komplette Drehung durchführt und wieder dort beginnt, wo es begonnen hat. Unsere frühere Einrichtung stellt sicher, dass es unbegrenzt weiter läuft. Das Ursprung verwandeln Diese Eigenschaft teilt CSS mit, wo der Mittelpunkt der Animation liegt. Wir könnten es so einstellen, dass die obere linke Ecke als Mitte (das könnte interessant aussehen!) Drehen, aber wir möchten hier nur die genaue Mitte unseres Elements verwenden. Speichern Sie diese Datei und werfen Sie einen Blick in den Browser!

Es sollte ähnlich wie oben aussehen, aber viel glatter und schneller.

Damit ist unsere Timeline-Portfolio-Seite abgeschlossen, aber wir können für dieses Tutorial etwas hinzufügen.

Inhalt wird geladen

In der realen Welt würde diese Art von Layout / Thema wahrscheinlich eine Art Endlos-Scroll-Funktion enthalten, bei der beim Scrollen der Seite mehr Elemente angezeigt werden, so dass Sie nicht durch klicken müssen, um durch die Seiten zu blättern.

Wir können simulieren Dieses Verhalten hier mit ein paar Zeilen von jQuery. Aufmachen app.js Fügen Sie oben Folgendes ein, wo wir den Klick-Handler für den Menütitel geschrieben haben.

var visibleHeight = $ (Dokument) .height () - $ (Fenster) .height (); var artikel;

Zunächst müssen wir zwei Variablen deklarieren, die wir später verwenden können. Die zweite ist eine reine Deklaration und wird später einem Wert zugewiesen. Der erste, visibleHöhe, packt die Fenster Höhe und subtrahiert das vom Gesamtwert dokumentieren Höhe. Dadurch bleibt die Höhe des Bereichs erhalten, der aktuell im Browser des Benutzers sichtbar ist.

storeElements (); $ (window) .on ('resize'), Funktion (e) updateHeight ();); $ (window) .on ('scroll', Funktion (e) loadContent (););

Als nächstes fügen Sie den obigen Ausschnitt hinzu. Sie werden einige Funktionsaufrufe für Funktionen sehen, die noch nicht existieren. Dies ist in Ordnung, da wir sie als nächstes erstellen werden.

function storeElements () items = $ ('. portfolio-item: lt (3)'). klon (); // Entferne die erste Klasse aus den Auswahlelementen.removeClass ('first'); 

Das storeElements Funktion dient als eine Möglichkeit, unsere zu bevölkern ArtikelVariable mit einigen DOM-Elementen. In unserem Fall wollen wir die ersten drei packen Portfolio-Elemente. Die Verwendung von jQuery's lt () erlaubt uns, die Elemente selektiv auszuwählen, die wir wollen. Sobald wir die Auswahl haben, sollten wir Klon()Sie verwenden also nicht die eigentlichen Elemente, sondern eine Kopie. Der letzte Schritt ist das Entfernen der zuerst Klasse, falls vorhanden, da keines unserer neuen Elemente das erste in der Liste ist.

function updateHeight () visibleHeight = $ (Dokument) .height () - $ (Fenster) .height (); 

Platzieren Sie diese Funktion oben storeElements. Dies ist wahrscheinlich die einfachste Funktion, da sie nur das tut, was wir gemacht haben Dokument fertig. Der Grund, warum ich eine Funktion dazu verwendet habe, ist die Wiederverwendbarkeit.

Jetzt kommen wir zu der Funktion, die die Arbeit erledigt…

function loadContent () if ($ (window) .scrollTop ()> = visibleHeight) $ (window) .unbind ('scroll'); var loadingWrap = $ ('. loading-wrap'); loadingWrap.fadeIn (function () setTimeout (function () loadingWrap.before (Elemente); loadingWrap.hide (function () updateHeight (); storeElements (); $ (window) .on ('scroll', function ( ) loadContent ();););, 500);); 

OK, Schritt für Schritt, was wir hier machen:

• Prüfen Sie, ob die Bildlaufposition mehr ist als (vorbeigescrollt) oder gleich (derzeit um) ist. visibleHöhe.
• Wenn ja, entfernen Sie das scrollen Eventhandler aus dem Fenster so können wir den inhalt verarbeiten.
• Zwischenspeicher Lade-Wrap zur späteren Verwendung.
• Verblassen Lade-Wrap in und sobald die Überblendung abgeschlossen ist ...
• … Ein kleines einstellen Auszeit simulieren "Laden" des Inhalts.
• Befestigen Sie unser geklontes Artikel Vor dem Lade-Wrap. Dadurch wird das Ladesymbol gut mit dem aktuellen Symbol verbunden Portfolio-Elemente.
• verbergen Lade-Wrap und einmal versteckt updateHeight, storeElementsund verbinden Sie das Scroll-Ereignis erneut mit dem Fenster mit Anweisungen zum erneuten Ausführen dieser Funktion.

Puh! Das scheint viel zu sein, also renne es noch einmal durch, wenn du musst. Eine Sache, die Sie vielleicht bemerken, wenn Sie mit gespaltenen Augen sind, ist, dass wir im Wald verblassen Lade-Wrap das ist eigentlich schon in unserem HTML sichtbar. Beheben Sie dies, indem Sie diesem Element einen Inline-Stil hinzufügen.

Wenn wir also jetzt unsere Dateien speichern und unsere Arbeit im Browser anzeigen, sollten Sie etwas mehr Inhalt "laden" sehen, sobald Sie zum Seitenende blättern. Oh warte, es gibt noch eine andere Sache, die wir hinzufügen müssen ...

$ ('. Menüs h3'). ein ('click', Funktion (e) $ (this) .next ('ul'). toggleClass ('open'); updateHeight (); e.preventDefault (); return falsch;);

In der h3 Click-Handler, den wir gleich zu Beginn erstellt haben, müssen wir hinzufügenupdateHeight (), Auf diese Weise werden beim Öffnen eines Menüs die Variablen entsprechend der Höhenänderung des Dokuments aktualisiert. Andernfalls würde die Funktion "Laden" beim Öffnen eines Menüs auf dem Mobiltelefon als fehlerhaft angezeigt visibleHöhe Variable wäre falsch.

Fazit

Wir sind am Ende angelangt! Wir könnten wahrscheinlich das gerade geschriebene JavaScript aufräumen und in einer realen Situation würde es wahrscheinlich in einen AJAX-Aufruf oder etwas anderes umgewandelt werden.

Ich hoffe, Sie haben im Anschluss an dieses Tutorial einige verschiedene Techniken erlernt. Es hat Spaß gemacht zu bauen und ich freue mich, mit Ihnen den Prozess zu teilen, um dieses sehr schöne Design zum Leben zu erwecken. Ich bin sicher, dass es viele Möglichkeiten gibt, dies zu verbessern. Wenn Sie also Vorschläge haben, lassen Sie es mich in den Kommentaren wissen!