Wie sie es gemacht haben Crowdpilot

Was Sie erstellen werden

Die Landing Page von Crowdpilot zeigt, wie einfach und beeindruckend SVG in Kombination mit JavaScript- und CSS-Animationen ist. In diesem Lernprogramm erfahren Sie, wie Sie den Crowdpilot-Nachrichten-Rotator und den Vorhang neu erstellen können. Außerdem werden wir ein wenig über "flaches" Design und die Gestaltung digitaler nativer Elemente sprechen.

Hol erstmal Luft.

Crowdpilot ist eine App, mit der Sie die Ohren (und Meinungen) Ihrer Freunde überallhin mitnehmen können. Wir werden einige der Funktionen der Crowdpilot-Website nachvollziehen, aber der Einfachheit halber ignoriert dieses Tutorial die Diskussionen über soziale und private Daten, die die App ansonsten erfordern würde.

Ein schneller Rant

Vielleicht haben Sie von dem flachen Trend gehört. Es ist ein schnelles Umgehen - wenn Sie ein Webdesigner sind, werden Sie diese Änderung wahrscheinlich in irgendeiner Form annehmen.

Aber um unsere Design-Diskussion zu erhöhen, wird "flach" der Verschiebung nicht gerecht. Um einen tieferen Einblick in die treibenden Faktoren des "flachen Trends" zu erhalten, werfen Sie einen Blick auf dieses fantastische Stück "What Screens Want" von Frank Chimero aus dem November 2013. In dem Stück bringt Chimero das Argument, dass sich unser Gehirn anpasst für die digitale Landschaft, und das, was früher für das Verständnis eines beispielsweise "gelöschten" Ordners auf einem Computer erforderlich war, war eine Darstellung des Abfalls, die wir unserer greifbaren Darstellung des Verwerfens gleichsetzen; ein 3d-schauender mülleimer. Da sich unser Gehirn jedoch an mehr native Repräsentationen der digitalen Deletion anpasst, werden wir diese Metaphern nicht mehr benötigen - was Chimero "Padding" nennt (in Bezug auf die zusätzliche Beschichtung einer Aspirinpille, die über den Wirkstoff hinausgeht, der es einfach macht, sie zu erfassen).. 

Aus dem Stück:

Während also die Größe einer Aspirin-Pille durch Ihre kleinen, stumpfen Finger eingeschränkt wird, kann Ihr Gehirn die Muster einer Schnittstelle normalisieren und Platz für nuanciertere Abstraktionen schaffen.

Schauen wir uns ein gutes Beispiel eines nativ digitalen Gestaltungselements von Crowdpilot an.

Zurück zum Tutorial

Die relativ einfache Seite hat eine große Wiedergabetaste, und der Bildschirm wird durch zwei farbige Dreiecke horizontal geteilt. Wenn Sie auf die Wiedergabeschaltfläche klicken, wird ein Vollbildvideo hinter den Dreiecken angezeigt.

Wir werden diesen Effekt wiederherstellen.

SVG: Dreiecke leicht machen seit 2001

Die geheime Sauce von Crowdpilot besteht aus zwei sehr einfachen SVGs. Wir haben den Quellcode einer dieser SVGs direkt aus ihrem Code entnommen:

Wir können uns dieses Stück einzeln ansehen.

enable-background = "neue 0 0 100 100"

Diese Eigenschaft wird größtenteils nicht unterstützt und bezieht sich auf die Hintergrundkomposition, die für diesen Anwendungsfall nicht relevant ist. Daher werden wir sie in unserem Beispiel weglassen.

Höhe Breite

Wir werden auch die Breiten- und Höhenattribute der SVG ignorieren, da wir CSS-Eigenschaften verwenden können, um den im Beispiel gezeigten Effekt zu erzielen.

preserveAspectRatio = "none", viewBox = "0 0 100 100"

Dadurch kann unser SVG auf jedes Verhältnis skaliert werden. Unsere viewBox-Werte legen eine Zeichenfläche für unsere SVG-Einstellungen fest und werden meistens in Bezug auf das untergeordnete Polygonelement verwendet. Die SVG-Leinwand (nicht zu verwechseln mit der Segeltuch Element) ist in diesem Fall 100x100 beliebige Einheiten. (Eine gute Vermutung: Wer die Crowdpilot-Splash-Seite erstellt hat, wollte eine 100x100-ViewBox verwenden, um auf "100 Prozent" zu verweisen.)

Polygonpunkte = "100,0 0,100 0,0"

Dadurch wird an den Positionen, die als x / y-Koordinaten aufgeführt sind, ein Polygon erstellt, das Folgendes erzeugt: x = 100, y = 0 (oben rechts) x = 0 y = 100 (unten links) x = 0, y = 0 (oben links)

Diese Polygonkombination mit unserer quadratischen viewBox im svg Parent-Tag ist das, was unser Dreieck erzeugt.

Unser Vorhang aufbauen

Eine vereinfachte Version unseres SVGs sieht etwa so aus:

So seltsam es auch erscheinen mag, wir können dies direkt in unsere Körpermarke einfügen.

In unserem Beispiel platzieren wir ein Logo in der Mitte und zeigen ein Hintergrundbild an, wenn Sie auf das Logo klicken. Schließen Sie dann den Vorhang, indem Sie erneut auf das Logo klicken. Dazu fügen wir einfach ein Anker-Tag hinzu und positionieren es absolut in der Mitte des Bildschirms.

.envato-logo Breite: 120px; Höhe: 120px; Position: absolut; Spitze: 50%; links: 50%; Hintergrundbild: URL (envato-logo.png); Hintergrundgröße: Cover; Rand links: -60px; Rand oben: -60px; 

Für unsere Animationsanimation können wir ein wenig JavaScript verwenden, um auf einen Klick auf das Ankerelement zu hören und eine Klasse auf dem umzuschalten Karosserie.

$ (". envato-logo"). on ("click", Funktion (e) e.preventDefault (); $ ("body"). toggleClass ("curtain-open"););

Wir möchten dann sicherstellen, dass für unsere Polygone eine CSS-Transformation und ein Übergang angewendet werden. Da wir wissen, dass wir später auch Farbe animieren möchten, verwenden wir die alles Wert für die zu animierende Eigenschaft.

.offenes Polygon mit Vorhang: first-child transform: translate3d (0, -100%, 0);  .curtain-open polygon: last-child transform: translate3d (0, 100%, 0);  Polygon Position: relativ; Übergang: alle 0,4 s; 

Beachten Sie, dass diese Regeln auch mit einem Browser-Präfix versehen sein müssen. 

Hinweis: Probieren Sie etwas wie Prefix Free aus, um Ihre Präfixprobleme zu lösen.

Es ist wichtig zu verstehen, dass all unsere Animationskraft mit CSS erreicht wird. Dies macht unser JavaScript sehr leicht und unsere Präsentation flexibel.

Radfahren Farben

Um verschiedene Farben für das obere linke Dreieck zu durchlaufen, legen wir ein Intervall für das Durchlaufen einer Reihe von Informationen fest. Im Beispiel von Crowdpilot sehen wir eine rotierende Hintergrundfarbe des oberen Dreiecks sowie rotierenden Text oben links. Hier ist eine kurze Erklärung, wie Sie dies erreichen können.

Zuerst richten wir ein Array von Objekten mit Hintergrundfarbe und Text ein.

 // message data var cycle_array = [color: "# c479b7", Text: "Hier ist etwas Text und Whatnot." , color: "# c4a179", Text: "SVG ist unglaublich mächtig." , Farbe: "# 222", Text: "Diagonalen sind in." ]

Als Nächstes legen wir ein Intervall fest, in dem alle zwei Sekunden die Farben und Meldungen durchlaufen werden.

var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). first (); var Intervall = setInterval (Funktion () i = i% cycle_array.length; var nextObj = cycle_array [i]; $ ("svg polygon"). first (). css (fill: nextObj.color); $ ( ".message"). html (nextObj.text); i ++;, 2000);

Wir verwenden einen cleveren Trick in der zweiten Zeile der setInterval Funktion. Wir haben uns eingerichtet ich bis zum letzten Element durchlaufen und wir setzen es mit dem Modulus-Operator auf 0 zurück %, was den Rest einer Division zurückgibt. Mit anderen Worten, bei der dritten Iteration, ich wird gleich 3 sein; 3/3 hat keinen Rest, so ich wird auf 0 zurückgesetzt.

Der Rest dieses Codes ist relativ unkompliziert. Wir nehmen an, dass es ein Element mit der Klasse von gibt Botschaft. Möglicherweise haben Sie auch festgestellt, dass wir die CSS-Eigenschaft festlegen (und nicht die jQuery-Funktion animieren). Das liegt daran, dass wir bereits Übergänge in unserem CSS eingerichtet haben.

Bonus: Zufällige Farbänderungen

Sicher, Sie möchten wahrscheinlich Farben, auf denen Ihr Text gut aussieht. Wenn Sie jedoch eine zufällige Farbe wünschen, verwenden Sie einen coolen Trick aus dem Blog von Paul Irish, um ein zufälliges Hex zu generieren. Das zuvor verwendete JavaScript würde sich folgendermaßen ändern:

var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). first (); var Intervall = setInterval (Funktion () i = i% cycle_array.length; var nextObj = cycle_array [i]; $ ("svg polygon"). first (). css (fill: '#' + Math.floor ( Math.random () * 16777215) .toString (16)); $ (". Message"). Html (nextObj.text); i ++;, 2000);

Zweiter Bonus: jQuery-less

Wenn Sie nicht jeden Browser unterstützen müssen und mit jQuery-less etwas an Gewicht verlieren möchten, können Sie dies mit diesem Code tun.

// jQuery-less version (function () // Logo klicken, Polygon verschieben var envatoLogo = document.querySelector (". envato-logo"); envatoLogo.onclick = function () document.querySelector ("body"). classList.toggle ("curtain-open"); // nachrichtendaten var cycle_array = [color: "# c479b7", text: "Hier ist etwas text und whatnot.", color: "# c4a179", text: "SVG ist unglaublich leistungsfähig.", Farbe: "# 222", Text: "Diagonalen sind in." // Nachrichtenintervalle var i = 0, messageHolder = document.querySelector (". Message"), poly = document.querySelector ("Polygon"); var Intervall = setInterval (Funktion () i = i% cycle_array.length; var nextObj = cycle_array [i]; poly.style.fill = nextObj.color; document.querySelector (". message "). innerHTML = nextObj.text; i ++;, 3000); ());

Wir haben viele der auf jQuery basierenden Aufrufe durch einfaches JavaScript ersetzt, dank der sich entwickelnden nativen Auswahl- und DOM-Manipulations-APIs.

Fazit

Die Einfachheit nativ digitaler Schnittstellen in Kombination mit der Flexibilität und Leistungsfähigkeit von SVG- und CSS3-Animationen ermöglicht uns die Erstellung von Erfahrungen, wie sie auf Crowdpilot zu sehen sind, mit minimalem Aufwand. 

Es ist wichtig, sich ein wenig über die sich entwickelnden APIs und Technologien zu informieren. Um den gleichen Effekt zu erzielen, den wir in ungefähr 100 Zeilen Code erstellt haben, mussten wir uns auf viel schwierigere und ineffizientere Wege verlassen, relativ einfache Formen zu erstellen. Wenn sich das Web weiterentwickelt, tun dies auch die Tools, mit denen wir es erstellen. Dieses Beispiel zeigt, wie leistungsfähig diese Tools geworden sind.