Erstellen der StartupGiraffe-Website

Wir haben unsere neue gestartet StartupGiraffe Website vor ein paar Monaten, und wir wollten einen Beitrag darüber schreiben, wie wir ein Stück vom Frontend für jeden Interessierten gemacht haben.

Unser Ziel war es, eine unterhaltsame und reaktionsschnelle Website zu schaffen, die unsere Marke unter Beweis stellte. Einmal unsere Freunde bei Fass NY einverstanden, das Grafikdesign für die Website zu tun, wir wussten, dass wir auch in der Lage sein würden, einige nette Tricks zu ziehen. Wir hatten ihnen gesagt, wir wollten eine wirklich große Giraffe, aber wir haben nicht wirklich alle Möglichkeiten gesehen, bis wir die Designs zurückbekamen: Es gab Polygone in verschiedenen Farben, Winkeln und Formen im Hintergrund; Im Vordergrund gab es alle möglichen Elemente, die gut in einer Parallax-Website funktionieren könnten ... und da war diese riesige Giraffe.

Die Herausforderung für uns bestand darin, sicherzustellen, dass wir nicht zu weit über das Javascript hinaus gehen, um die Leistung der Website zu besteuern und die Nutzererfahrung abzulenken. Letztendlich entschieden wir uns, die Idee einer Parallaxe zugunsten eines "wachsenden Giraffeneffektes" zu verwerfen.

Sie können ein Beispiel für den Effekt sehen Hier und wenn Sie dem Code folgen möchten, können Sie Laden Sie die Quelldateien hier herunter .

Standortstruktur

Auf einer grundlegenden Ebene enthält die Site drei Geschwisterabschnitte, die übereinander gestapelt sind. Die Kopie und der Hauptinhalt der Website befinden sich auf der obersten Ebene, die Giraffe auf der zweiten Ebene und der polygonale Hintergrund auf der Rückseite.

Für diese Demo werden wir den Hintergrund-Wrapper weglassen, weil es nicht viel gibt.

Wachsender Giraffeneffekt

Grundsätzlich war es unser Ziel, das "Start-Giraffen" -Logo an Ort und Stelle zu fixieren, während die Giraffe aufsteigt, und dann das Logo an einer bestimmten Stelle in den normalen Fluss der Seite zu bringen. Da die Giraffe beginnen sollte zu steigen, sobald der Benutzer scrollt, sollte ihre Nase genau unter der Falte sein, egal wie hoch die Bildschirmhöhe ist.

Es gibt wirklich eine Vielzahl von Möglichkeiten, dies zu tun (und wir sind definitiv offen für Vorschläge), aber die von uns gewählte verwendet jQuery.waypoints als ein Mittel zum Erkennen und Antworten auf Bildlaufereignisse.

Um sicherzustellen, dass die Giraffe hinter dem Logo gleitet, haben wir das Logo in einem festen Wrapper im Bereich "Inhalt" platziert. Die Giraffe ist ein Geschwister der Inhaltsabteilung. Beide Abschnitte sind absolut positioniert.

HTML

CSS

body {background-color: #000;}#content-wrapper, #giraffe-wrapper {position: absolute;top: 0px;left: 0px;width: 100%;}#first-content {position: relative;}#big-logo-wrapper {position:fixed;top: 250px;width: 100%;max-width: 1920px;}#big-logo {width:465px; height:231px;display:block; margin:0 auto;}#giraffe {position: relative;left: 100px;height: 3200px;}

JavaScript

Der nächste Schritt war, die Giraffe und das Logo aufzustellen. Wir haben JavaScript verwendet, um die Giraffe direkt unter der Falte zu platzieren. Stellen Sie dann die Höhe des ersten Abschnitts auf die Fensterhöhe plus die Anzahl der Pixel ein, die wir für die Giraffe zeigen möchten, bevor Sie das Logo nach oben scrollen lassen.

$(function() {var windowHeight = $(window).height(),giraffe = $("#giraffe"),firstHeight = windowHeight + 380,firstContent = $("#first-content");giraffe.css("top", windowHeight + "px");firstContent.css("height", firstHeight + "px")});

Mit der Giraffe, die gerade unterhalb der Falte versteckt war, konnten wir sehen, wie sie unter dem festen Logo nach oben scrollte. Als nächstes mussten wir das Logo einfach wegrollen lassen, damit es nicht auf der Seite fixiert blieb.

Das Wegpunkt-Plugin ermöglicht es uns, eine Funktion aufzurufen, wenn der Benutzer an einem bestimmten DOM-Element vorbeirollt. Außerdem können wir erkennen, in welche Richtung der Benutzer scrollen soll. Wir haben diese "up" - und "down" -Ereignisse verwendet, um eine Klasse hinzuzufügen oder zu entfernen, die die Positionseigenschaft des Logos zwischen fest und absolut umschaltet.

Wir haben auch die Offset-Eigenschaft der Wegpunktfunktion verwendet, um die Position des Wegpunkts um einen ganzzahligen Pixelwert zu ändern. Da die absolute (Scroll-Logo) -Klasse das Logo an der Unterseite des übergeordneten Elements ausrichten wird, sollte der Offset die Höhe des Logos und der Abstand des Logos vom oberen Rand der Website minus der Gesamthöhe des ersten Inhaltsbereichs sein (Das legen wir beim Laden der Seite fest).

 var logo = $('#big-logo-wrapper');firstContent.waypoint(function( direction) {if ( direction === 'down' ) {logo.addClass("first-scroll");} else {logo.removeClass('first-scroll');}},{offset: logo.height() + (parseInt(logo.css("top"))) - firstHeight});

Abgesehen von ein paar anderen Schnickschnack, das ist so ziemlich alles. Das Logo bleibt nun fixiert, bis die Giraffe etwa 380 Pixel auf der Seite bekommen hat.

Gibt es Fragen? Haben Sie einen besseren Weg, es zu tun? Lassen Sie es uns in den Kommentaren wissen.