Budowa strony StartupGiraffe

Uruchomiliśmy naszą nową StartupGiraffe Strona internetowa kilka miesięcy temu, a my chcieliśmy napisać post o tym, jak zrobiliśmy część frontendu dla wszystkich zainteresowanych.

Naszym celem było stworzenie zabawnej i responsywnej strony, która pokazała naszą markę. Kiedyś nasi przyjaciele Beczka NY zgodzili się zrobić projekt graficzny strony, wiedzieliśmy, że będziemy w stanie wyciągnąć kilka fajnych sztuczek. Powiedzieliśmy im, że chcemy naprawdę wysoką żyrafę, ale tak naprawdę nie widzieliśmy wszystkich możliwości, dopóki nie otrzymaliśmy projektów: w tle były wielokąty różnych kolorów, kątów i kształtów; na pierwszym planie były różne elementy, które mogłyby dobrze działać na stronie internetowej paralaksy ... a była tam ogromna żyrafa.

Wyzwaniem dla nas było upewnienie się, że nie zaszliśmy zbyt daleko za pomocą Javascriptu, aby opodatkować wydajność witryny i odwrócić uwagę użytkownika. Ostatecznie zdecydowaliśmy się odrzucić ideę paralaksy na rzecz efektu "rosnącej żyrafy".

Możesz zobaczyć przykład efektu tutaj , a jeśli chcesz podążać za kodem, możesz pobierz tutaj pliki źródłowe .

Struktura witryny

Na poziomie podstawowym witryna zawiera 3 sekcje rodzeństwa ułożone jedna na drugiej. Kopia i główna zawartość witryny znajduje się na górnej warstwie, żyrafa znajduje się na drugiej warstwie, a tło wielokątne na tylnej warstwie:

W przypadku tego demo pominiemy opakowanie tła, ponieważ nie ma w nim zbyt wiele.

Rosnący efekt żyrafa

Zasadniczo naszym celem było naprawienie logo "Startup Giraffe" w miejscu, podczas gdy żyrafa unosi się, a następnie w pewnym momencie uwalnia logo do normalnego przepływu strony. Ponieważ żyrafa powinna zacząć rosnąć, gdy tylko użytkownik zacznie przewijać, jej nos powinien znajdować się tuż pod zakładką, niezależnie od wysokości ekranu.

Istnieje naprawdę wiele sposobów na zrobienie tego (i jesteśmy zdecydowanie otwarci na sugestie), ale ten, który wybraliśmy, wykorzystuje jQuery.waypoints jako sposób wykrywania i odpowiadania na zdarzenia przewijania.

Aby upewnić się, że żyrafa przesuwa się za logo, umieszczamy logo w stałej owijce w sekcji "treści". Żyrafa jest rodzeństwem sekcji treści. Obie sekcje są ustawione absolutnie.

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

Następnym krokiem było ustawienie żyrafy i logo. Użyliśmy JavaScript, aby ustawić żyrafę tuż pod spodem. Następnie ustaw wysokość pierwszej sekcji jako wysokość okna plus liczbę pikseli, które chcielibyśmy wyświetlić dla żyrafy, zanim pozwolimy, aby logo przewinęło się w górę.

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

Z żyrafą ukrytą tuż pod zakładką widać było, że przewija się pod ustalonym logo. Następnie musieliśmy pozwolić, aby logo zniknęło, więc nie zostało to naprawione na stronie.

Wtyczka waypointów pozwala nam wywoływać funkcję, gdy użytkownik przewija obok określonego elementu DOM. Pozwala nam również wykryć, w którym kierunku użytkownik się przewija. Użyliśmy tych zdarzeń "up" i "down", aby dodać lub usunąć klasę, która przełącza właściwość position logo między stałą a absolutną.

Zastosowaliśmy również właściwość przesunięcia funkcji punktu drogi, aby zmienić pozycję punktu drogi o wartość liczby całkowitej. Ponieważ klasa absolutna (logo przewijania) dopasuje logo do dolnej części elementu nadrzędnego, chcieliśmy, aby przesunięcie było wysokością logo oraz odległością logo od wierzchołka witryny, pomniejszoną o całkowitą wysokość div pierwszej zawartości (ustawiamy na ładowanie strony).

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

Poza kilkoma innymi dzwonkami i gwizdkami, to prawie wszystko. Logo jest teraz nieruchome, dopóki żyrafa nie uzyska około 380 pikseli w górę strony.

Masz pytania? Masz lepszy sposób na zrobienie tego? Daj nam znać w komentarzach.