Vytváření webových stránek StartupGiraffe

Spustili jsme náš nový StartupGiraffe webových stránek před několika měsíci a my jsme chtěli napsat příspěvek o tom, jak jsme pro někoho zainteresovali nějaký kus frontend.

Naším cílem bylo vytvořit zábavnou a citlivou stránku, která by ukázala naši značku. Jakmile jsou naši přátelé Barrel NY dohodli jsme se, že uděláme grafický návrh stránky, ale věděli jsme, že budeme schopni vytáhnout z nějakých čistých triků. Řekli jsme jim, že chceme opravdu vysokou žirafu, ale opravdu jsme neviděli všechny možnosti, dokud nebudeme mít vzory zpět: v pozadí byly polygony různých barev, úhlů a tvarů; v popředí byly všechny druhy prvků, které by mohly fungovat dobře na webové stránce paralaxy ... a tam byla ta obrovská žirafa.

Výzvou pro nás bylo, abychom se ujistili, že jsme s Javascriptem příliš nepřekročili, abychom zdanili výkonnost webu a odvrátili zkušenosti uživatelů. Nakonec jsme se rozhodli zrušit myšlenku paralaxy ve prospěch účinku "růstu žirafy".

Můžete vidět příklad efektu tady , a pokud chcete sledovat spolu s kódem, můžete zde stahujte zdrojové soubory .

Struktura místa

Na základní úrovni obsahuje stránky 3 sourozenečné sekce na sobě navzájem. Kopie a hlavní obsah webu je umístěn na horní vrstvě, žirafa je na druhé vrstvě a polygonální pozadí na zadní vrstvě:

Pro toto demo vynecháme obal pozadí, protože na to není moc.

Pěstování žirafy

V podstatě bylo naším cílem stanovit logo "Startup Giraffe" na místě, když žirafa stoupá, a pak uvolnit logo do normálního toku stránky v určitém bodě. Vzhledem k tomu, že žirafa by měla začínat stoupat, jakmile uživatel začne rolovat, měla by být nos těsně pod záhybem bez ohledu na výšku obrazovky.

Existuje opravdu spousta způsobů, jak to udělat (a rozhodně jsme otevřené pro návrhy), ale ten, který jsme si vybrali, používá jQuery.waypoint jako prostředek pro detekci a reakci na události posouvání.

Aby se ujistil, že žirafa klouže za logem, umístíme logo do pevného obalu uvnitř "obsahu". Žirafa je sourozenec obsahu. Obě části jsou naprosto umístěny.

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

Dalším krokem bylo nastavení žirafy a loga. JavaScript jsme použili k nastavení žirafy těsně pod záhybem. Poté nastavte výšku první části tak, aby byla výška okna plus počet pixelů, které bychom chtěli zobrazit u žirafy, a poté nechte logo posunout nahoru.

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

S žirafou, skrytou těsně pod záhybem, jsme viděli, že se posunuje nahoru pod pevným logem. Dále jsme museli nechat logo odklonit, aby nezůstalo na stránce fixní.

Doplněk waypoints nám umožňuje volat funkci, když uživatel posouvá určitý prvek DOM. Umožňuje nám také zjistit, kterým směrem se uživatel posouvá. Tyto události "nahoru" a "dolů" jsme použili pro přidání nebo odebrání třídy, která přepíná vlastnost polohy loga mezi pevnou a absolutní.

Také jsme použili funkci posunutí funkce trasového bodu pro změnu polohy bodu trasování celkovou hodnotou pixelů. Protože třída absolutního (rolovacího loga) zarovná logo k dolní části rodiče, chtěli jsme, aby offset byl výškou loga plus vzdálenost loga od horní části stránky minus celková výška prvního obsahu div (které jsme nastavili při načítání stránky).

 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});

Kromě několika dalších zvonů a píšťal, to je docela hodně. Logo nyní zůstává fixováno, dokud se žirafa nedostane na stránku o 380 pixelů.

Máte otázky? Máš lepší způsob, jak to udělat? Dejte nám vědět v komentářích.