Układ internetowy nowej generacji – National Geographic Forest Giant

Christopher Gammon
Christopher Gammon

Korzystanie z narzędzi CSS i układów przeglądarki może umożliwić tworzenie niesamowitych wizualizacji treści internetowych. Korzystanie z funkcji internetowych, takich jak filtry CSS, WebGL, filmy HTML5, SVG, canvas i rozwijające się technologie przyszłości, takie jak regiony CSS, kształty CSS i filtry niestandardowe CSS, obiecuje ogromnie rozszerzone możliwości kreacji. Firma Adobe od dawna współpracuje z twórcami treści, którzy pasjonują się układem i projektem. Dlatego aktywnie wykorzystuje tę wiedzę w internecie, przyczyniając się do rozwoju wielu standardów internetowych.

Z pomocą National Geographic wykorzystaliśmy treści z ich artykułu „Forest Giant”, aby stworzyć prototyp pokazujący, jak te funkcje mogą umożliwiać tworzenie bogatych układów stron internetowych i stosować techniki responsywne. Z tego artykułu dowiesz się, jak zbudowaliśmy niektóre szczególnie interesujące funkcje witryny. Aby uzyskać krótkie omówienie, warto obejrzeć ten film poniżej, w którym Christian Cantrell omawia różne funkcje witryny.

Subtelności układu

To, co tworzy dobry układ i funkcje, które go wspierają, może być subtelne, dlatego stworzyliśmy „nakładkę dla edytujących”, która wyróżnia najciekawsze funkcje. Aby włączyć znaczniki edytora, kliknij pasek u dołu artykułu.

Obraz z oznacznieniami edytora

Niezależny od układu

Obecnie układ strony jest często określany przez treść, a kontenery powiększają się w pionie, aby pomieścić tekst. Podczas tworzenia złożonych układów zmiany w tekście lub innych treściach mogą mieć nieoczekiwany wpływ na cały układ, co może wymagać jego przeprojektowania. Dzięki regionom możemy oddzielić treści od układu, definiując element jako treść, a następnie określając części układu, przez które mają przechodzić te treści.

W przypadku „Forest Giant” historia jest zawarta w pojedynczym elemencie. Następnie na całej stronie mamy rusztowanie układu, które składa się ze zdjęć i obszarów tekstowych. Za pomocą CSS definiujemy elementy, przez które mają przechodzić treści. Gdy kopiowanie dotrze do końca elementu, kontynuuje w kolejności elementów w DOM. Dzięki temu możemy tworzyć naprawdę kreatywne kolumny, przesuwając je i dostosowując ich wysokość do projektu bez obaw, że tekst nie zmieści się w elementach. Pozwala nam to też umieszczać w układzie elementy, takie jak obrazy o pełnej szerokości, podczas gdy historia będzie się dalej rozwijać.

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

W tym pliku CSS tworzymy nazwany przepływ o nazwie „story”. Treść tego nazwanego procesu to element o identyfikatorze „storyContent”. Następnie przepływa przez wszystkie elementy o nazwie klasy "story". Regiony CSS to świetne narzędzie do tworzenia projektów elastycznych. Umożliwiają one korzystanie z funkcji takich jak wiele kolumn i przesunięcie kolumn, aby uzyskać bogaty układ na dużych ekranach, a na mniejszych ekranach dostosowywać układ do pojedynczej kolumny. W przypadku regionów możesz też ustawić rozmiar regionu za pomocą jednostek elastycznych, takich jak vw lub vh. Dzięki temu możesz mieć pewność, że kolumny nie przekroczą wysokości widoku w Twoim układzie, bez obaw o to, że treści zostaną obcięte, ponieważ będą one naturalnie przepływać do następnego elementu w łańcuchu regionów.

Czapki z daszkiem

Wykluczenia CSS umożliwiają nam łamanie tekstu wokół nieregularnych kształtów lub wewnątrz nich. Może to być przydatne w przypadku elementów graficznych, takich jak litery z wypustką. Duże litery to powszechna praktyka projektowania, w której pierwsza litera opowiadania lub rozdziału jest powiększana, co pozwala reszcie tekstu dopasować się do konturów znaku. Ten efekt jest bardzo podobny do tego, jak treści wstawiane w tekście otaczają elementy typu „float”, ale dzięki wykluczeniom nie jesteśmy już ograniczeni do prostokątnych pól. Za pomocą shape-outside na zmiennej możemy zdefiniować geometrię, która pozwoli na ścisłe owinięcie się treści wokół kształtu postaci.

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

Spowoduje to utworzenie elipsy, która pozwoli na owinięcie treści wokół koła. Ponieważ do kształtu używamy jednostek względnych, zmiana rozmiaru elementu będzie odzwierciedlać rozmiar kształtu.

Obraz nasadki

Kształty

Oprócz opuszczonych liter funkcja wykluczeń umożliwia również przenoszenie tekstu w kształtach za pomocą opcji shape-inside. Używamy tej funkcji w całej witrynie, zwłaszcza w przypadku dużych napisów pod obrazami, wykorzystując puste miejsca na zdjęciach do tworzenia ramki dla tekstu. Umożliwia też łamanie tekstu wzdłuż kontur innych obrazów i grafik, co pozwala na emulowanie układów, które wcześniej były bardzo trudne do uzyskania w internecie.

Kształty mogą też działać z układami elastycznymi, jeśli do ich definiowania używasz jednostek względnych. Dzięki temu możemy tworzyć kształty, które rozciągają się na podstawie kontenera lub widocznego obszaru, a nawet używać zapytań multimedialnych, aby całkowicie zmienić kształt lub go usunąć, ponieważ wszystko jest zdefiniowane w CSS. Poniżej znajduje się przykład kształtu wielokąta używanego w witrynie z wartościami definiującymi punkty:

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Obraz CSS Shapes

Tekst zrównoważony

Tekst zrównoważony to funkcja, która podczas przenoszenia tekstu na kolejne linie bierze pod uwagę cały blok tekstu w danym elemencie, a nie poszczególne słowa. Dzięki temu unikamy sytuacji, w której w jednym wierszu mamy 1 lub 2 słowa. Aby uzyskać równomierne wiersze w danym elemencie, tekst jest dzielony na wiersze. Ten poziom kontroli pozwala nam łatwo tworzyć estetyczne bloki tekstu, zwłaszcza w przypadku krótkich fragmentów, takich jak cytaty lub napisy.

Właśnie w tym miejscu w artykule używamy tekstu zrównoważonego. Ponieważ ta funkcja jest standardem proponowanym przez Adobe, używamy polyfilla stworzonego przez Randy’ego Edmundsa, aby uzyskać takie same wyniki. Ta funkcja najlepiej sprawdza się w przypadkach, gdy użytkownik reaguje na reklamę. Gdy zmienisz rozmiar przeglądarki, zauważysz, że blok nadal równoważy tekst, aby uzyskać linie o przybliżonej szerokości. Używanie polyfilla do wyrównywania tekstu jest proste, ponieważ jest to wtyczka jQuery. Wystarczy, że zastosujemy funkcję „balanceText()” do selektora, gdy zmieni się układ, a otrzymamy ładnie wyrównany tekst, który wygląda tak:

$('.balance').balanceText();
Obraz z tekstem w równowadze

Filtruj przejścia

Przejścia to ważny sposób na kierowanie uwagi użytkownika i informowanie o stanie rzeczy w witrynie. W przypadku przezroczystości, a niedawno także transformacji 3D, zauważyliśmy, że te funkcje są używane do tworzenia płynnych przejść i animacji podczas przewijania przez użytkowników lub ich interakcji z poszczególnymi częściami witryny. Mamy teraz filtry, które można stosować do tego samego celu.

W filmie „Forest Giant” używamy filtrów, aby przechodzić od obrazu w szarościach do koloru w miarę pojawiania się kolejnych obrazów. Filtry te można łączyć z przezroczystością lub innymi filtrami, aby tworzyć złożone efekty obrazu i przejścia. Dzięki filtrom niestandardowym możemy uzyskać jeszcze bardziej spektakularne efekty.

Filtry niestandardowe są pisane w języku GLSL, czyli tym samym języku cieniowania co WebGL. Umożliwiają one stosowanie tych shaderów do elementów DOM za pomocą CSS, co umożliwia stosowanie złożonych efektów mieszania i zniekształceń 3D. Gdy na dole strony klikniesz „Zobacz drzewo genealogiczne prezydenta”, strona się zwinie, odsłaniając kolejną sekcję. To tylko jeden z przykładów tego, jak filtry niestandardowe mogą umożliwiać płynne przejścia między treściami. Animację można uzyskać za pomocą przejść CSS. Jeśli jednak chcesz użyć bardziej zaawansowanych animacji lub interakcji niż te dostępne w ramach przejść, możesz przekazać wartości do shadera, ustawiając styl za pomocą JavaScriptu, jak pokazano poniżej. Dzięki temu możesz uzyskać bardziej szczegółową kontrolę nad łagodzeniem lub nawet zezwolić użytkownikom na manipulowanie shaderem.

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

Nasz filtr rastrowuje zawartość jako teksturę na karcie graficznej, aby zastosować efekt. Dlatego musimy pamiętać o usunięciu go po zakończeniu, ponieważ w przeciwnym razie nasze treści mogą być niewyraźne.

$("#map").css("webkitFilter", "none");

Filtry niestandardowe CSS umożliwiają tworzenie ciekawych efektów, takich jak przewijanie stron, które wygląda jak przewracanie stron w rzeczywistej książce. Umożliwiają one programistom tworzenie złożonych efektów w języku GLSL i stosowanie ich w treściach internetowych. Więcej informacji o szczegółach filtrów niestandardowych, wszystkich tych parametrach i o tym, jak ich używać, znajdziesz w tym świetnym samouczku.

Obraz przewracania strony

Wstępny renderowanie tekstur w WebGL

Najcenniejszym elementem tego artykułu było pierwsze pełne zdjęcie „Drzewa Prezydenta”, które według szacunków jest drugim co do wielkości drzewem na świecie. Ten obraz został utworzony przez zszycie setek zdjęć drzewa w jeden obraz. Chcieliśmy zasymulować ten proces, dzieląc obraz na wiele małych zdjęć, które wlatują na swoje miejsce, tworząc pełny obraz. Udało się to dzięki użyciu WebGL, a w szczególności biblioteki Three.js, która jest o wyższym poziomie opakowaniem interfejsu API WebGL.

Obraz gigantycznego drzewa

Przetwarzanie dużej liczby tekstur może szybko spowodować problemy ze skutecznością za każdym razem, gdy nowa tekstura próbuje się wyświetlić na ekranie, nie wspominając już o dodatkowych żądaniach sieciowych. Aby to zminimalizować, nasze tekstury są tak duże, jak to możliwe, i są przesunięte w przypadku każdego kafelka. Ta technika jest często nazywana mapowaniem sprite’ów i jest powszechna w rozwoju gier. W efekcie dla całego drzewa powstały 3 duże tekstury. Aby pozbyć się spadku wydajności za każdym razem, gdy jedna z tekstur po raz pierwszy staje się widoczna na ekranie, renderujemy kwadraty o wymiarach 1 piksela z każdą z tekstur przed rozpoczęciem animacji, przesuwając spadek wydajności na początek. Dzięki temu możemy przelecieć przez całą wysokość drzewa i płynnie je animować, nawet na tablecie.

Aby przesunąć tekstury, zmieniamy współrzędne UV, które mapują teksturę na geometrię. W three.js wygląda to tak:

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

Tutaj używamy zmiennej do przesunięcia tekstury w osi X i Y. Ten sam efekt można uzyskać za pomocą niestandardowego materiału shadera GLSL, który przesuwa rysowane współrzędne na geometrii.

Funkcje eksperymentalne

Niektóre funkcje używane w tym filmie są jeszcze w wersji eksperymentalnej, dlatego musisz wyświetlić ten artykuł w Chrome Canary i włączyć wszystkie flagi wymienione dla Chrome Canary na tej stronie.

Po zainstalowaniu i skonfigurowaniu przeglądarki Chrome Canary obejrzyj demo. Pamiętaj, że cały projekt jest dostępny w wersji open source i znajdziesz go na GitHubie.

Podsumowanie

Badaliśmy też, jak te funkcje można wykorzystać w kontekście aplikacji mobilnych, na przykład w książce elektronicznej. Możesz zobaczyć ten prototyp w trakcie tworzenia i zobaczyć, jak wykorzystujemy różne paradygmaty interakcji i dotyku, aby zaprezentować te funkcje na tablecie.

Układ przeglądarki internetowej stale się zmienia, a my dostrzegamy potrzebę zachowania wartości produkcyjnej i jakości układu, do których użytkownicy przyzwyczaili się w przypadku starszych treści. Dzięki funkcjom takim jak regiony CSS, wykluczenia, zrównoważony tekst, filtry niestandardowe i WebGL twórcy treści nie będą już musieli wybierać między zasięgiem a jakością projektu. „Forest Giant” to wyraźny sygnał, że internet przyszłości umożliwi obie te rzeczy.