Wir haben unser neues auf den Markt gebracht StartupGiraffe vor ein paar Monaten auf unserer Website veröffentlicht, und wir wollten für alle Interessierten einen Beitrag darüber schreiben, wie wir einen Teil des Frontends erstellt haben.
Unser Ziel war es, eine unterhaltsame und reaktionsfähige Website zu erstellen, die unsere Marke präsentiert. Sobald unsere Freunde bei Fass NY Als wir uns bereit erklärten, das Grafikdesign für die Website zu übernehmen, wussten wir, dass uns auch einige nette Tricks gelingen würden. Wir hatten ihnen gesagt, dass wir eine wirklich große Giraffe wollten, aber wir sahen nicht wirklich alle Möglichkeiten, bis wir die Designs zurückbekamen: Im Hintergrund waren Polygone in verschiedenen Farben, Winkeln und Formen zu sehen; Im Vordergrund gab es alle möglichen Elemente, die in einer Parallax-Website gut funktionieren könnten … und da war diese riesige Giraffe.
Die Herausforderung für uns bestand darin, sicherzustellen, dass wir mit Javascript nicht zu weit gehen, um die Leistung der Website zu belasten und das Benutzererlebnis abzulenken. Letztendlich haben wir uns entschieden, die Idee einer Parallaxe zugunsten eines „wachsenden Giraffen“-Effekts zu verwerfen.
Sie können ein Beispiel für den Effekt sehen Hierund wenn Sie dem Code folgen möchten, können Sie dies tun Laden Sie die Quelldateien hier herunter.
Site-Struktur
Grundsätzlich enthält die Site drei übereinander gestapelte Geschwisterabschnitte. Der Text und der Hauptinhalt der Website befinden sich auf der obersten Ebene, die Giraffe befindet sich auf der zweiten Ebene und der polygonale Hintergrund auf der hinteren Ebene:
Für diese Demo lassen wir den Hintergrund-Wrapper weg, da er nicht viel enthält. Unser Ziel bestand im Wesentlichen darin, das „Startup Giraffe“-Logo an seinem Platz zu fixieren, während die Giraffe aufsteigt, und das Logo dann an einem bestimmten Punkt in den normalen Fluss der Seite freizugeben. Da die Giraffe beginnen sollte, sich zu erheben, sobald der Benutzer mit dem Scrollen beginnt, sollte sich ihre Nase unabhängig von der Bildschirmhöhe knapp unter der Falte befinden. Es gibt wirklich viele Möglichkeiten, dies zu tun (und wir sind auf jeden Fall offen für Vorschläge), aber die von uns gewählte Methode nutzt jQuery.waypoints als Mittel zum Erkennen und Reagieren auf Scroll-Ereignisse. Um sicherzustellen, dass die Giraffe hinter das Logo gleitet, stecken wir das Logo in eine feste Hülle innerhalb des Abschnitts „Inhalt“. Die Giraffe ist ein Geschwister des Inhaltsbereichs. Beide Abschnitte sind absolut positioniert.
Körper { Der nächste Schritt bestand darin, die Giraffe und das Logo einzurichten. Wir haben JavaScript verwendet, um die Giraffe knapp unterhalb 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 anzeigen möchten, bevor Sie das Logo nach oben scrollen lassen. $(Funktion() { Da die Giraffe direkt unter der Falte versteckt war, konnten wir sie unter dem festen Logo nach oben scrollen sehen. Als nächstes mussten wir das Logo einfach wegscrollen lassen, damit es nicht auf der Seite fixiert blieb. Mit dem Wegpunkt-Plugin können wir eine Funktion aufrufen, wenn der Benutzer an einem bestimmten DOM-Element vorbeiscrollt. Dadurch können wir auch 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 Klasse (Bildlauflogo) das Logo am unteren Rand der übergeordneten Klasse ausrichtet, wollten wir, dass der Versatz der Höhe des Logos plus dem Abstand des Logos vom oberen Rand der Website minus der Gesamthöhe des Div des ersten Inhalts entspricht (das wir beim Laden der Seite festlegen). var logo = $(‘#big-logo-wrapper’); Abgesehen von ein paar anderen Schnickschnack ist das so ziemlich alles. Das Logo bleibt nun so lange fixiert, bis die Giraffe etwa 380 Pixel auf der Seite nach oben gelangt ist. Gibt es Fragen? Gibt es einen besseren Weg, es zu tun? Lass es uns in den Kommentaren wissen.
Wachsender Giraffeneffekt
HTML
CSS
Hintergrundfarbe: #000;
}
#content-wrapper, #giraffe-wrapper {
Position: absolut;
oben: 0px;
links: 0px;
Breite: 100 %;
}
#first-content {
Position: relativ;
}
#big-logo-wrapper {
Position:fest;
oben: 250px;
Breite: 100 %;
maximale Breite: 1920px;
}
#big-logo {
Breite:465px; Höhe:231px;
Bildschirmsperre; Rand:0 automatisch;
}
#giraffe {
Position: relativ;
links: 100px;
Höhe: 3200px;
}JavaScript
var windowHeight = $(window).height(),
Giraffe = $(“#giraffe”),
firstHeight = windowHeight + 380,
firstContent = $(“#first-content”);
giraffe.css(“top”, windowHeight + “px”);
firstContent.css(“height”, firstHeight + “px”)
});
firstContent.waypoint(
Funktion( Richtung) {
if ( Direction === ‘down’ ) {
logo.addClass(“first-scroll”);
} anders {
logo.removeClass(‘first-scroll’);
}
},
{
Offset: logo.height() + (parseInt(logo.css(“top”))) – firstHeight
}
);
