24 Sprytne projekty stron internetowych, które łączą JQuery z ilustracją
Dzięki sile JavaScript słowa "dynamic" i "illustration" nie mają już zastosowania wyłącznie do stron internetowych opartych na Flashu.
Teraz, gdy dynamiczny HTML jest rzeczywistością w najczęściej używanych przeglądarkach i istnieje wiele fantazyjnych bibliotek JavaScript, które ułatwiają korzystanie z niego, strony CSS mogą odzyskać część ulicznego creda trzymanego tak mocno przez Flash.
Z tych nowych bibliotek JavaScript jQuery stała się jedną z najczęściej używanych ze względu na łatwość użycia, szeroką gamę funkcji i początkową koncentrację na wizualnej niepowtarzalności.
Oto 24 sprytne przykłady projektów stron internetowych za pomocą jQuery i ilustracji .
1.Form pięćdziesiąt pięć
Cechy: Zmiana ilustracji nagłówka; wiele małych okien pokazu slajdów.
Opis: Ta strona nie tylko zawiera wiele naprawdę dobrych treści związanych z projektem, ale jQuery jest używana na wiele sposobów, aby poprawić wygląd i użyteczność witryny. Dodaj okresowo zmieniające się ilustrowane tło i kilka ładnych okrągłych elementów sterujących, a będziesz miał piękne małżeństwo z jQuery i ilustracją.
Strona główna z ilustracją nagłówka: 
Lewa kolumna z włączonymi tagami: 
Nagłówek okna do logowania: 
2. Frozn
Funkcje: Przesuwanie w pionie i poziomie.
Opis: oprócz dużych, kolorowych kółek z liczbami, cechą, którą najbardziej zauważyłem, były ilustrowane zdjęcia profilowe. Więc kliknąłem je. Właśnie wtedy stało się magiczne: pionowe i poziome cieniowanie okien, które otworzyło pełny zestaw wpisów w blogu z osadzonymi filmami Vimeo. Trwałe nachylenie stopki jest ciekawym efektem podczas przewijania w dół.
Duże koła i ilustracje autora na stronie głównej: 
Pionowo rozwijająca się zawartość: 
Ilustracje autora rozwijają się, ukazując wpisy do blogu i wideo: 
3. Makieta telefonu iPhone
Funkcje: przeciągnij i upuść, kierowanie
Opis: Jeśli kiedykolwiek myślałeś o stworzeniu aplikacji na iPhone'a (i który twórca strony internetowej nie ma?), Może to być witryna do sprawdzenia. Umożliwia przeciąganie i upuszczanie elementów szkicu lub rysowanych komputerowo elementów interfejsu na szkicowany lub rysowany komputerowo kontur telefonu iPhone. Chociaż projekt jest dość prosty, jest to innowacyjne wykorzystanie ilustracji, które można było wcześniej usunąć tylko za pomocą Flasha.
Narysowany komputerowo edytor iPhone'a: 
Naszkicowany edytor iPhone'a: 
4. Florida Flourish
Cechy: Przesunięcia nad powierzchnią z przezroczystością, pokaz slajdów
Opis: Błyskotliwe kolory i szczegóły zilustrowanego drzewa na tej stronie powitalnej natychmiast przyciągają uwagę. Kliknij dowolną kategorię rozgałęzioną z drzewa, a otrzymasz nie tylko opisową zawartość opartą na jQuery, ale także zupełnie inne drzewo. Przewiń w dół, a zobaczysz ładny wyśrodkowany pokaz slajdów i stopkę, która przenosi naturalny motyw pod ziemię.
Pełny widok strony głównej, z dużym drzewem, pokazem slajdów i stopką: 
Drzewo "użyteczności": 
Drzewo "Elastyczność": 
5. Tea Round App
Funkcje: Pokaz slajdów, pomniejsza animacja, przesuwane obiekty
Opis: Może to ja lub znak, że Apple ma świetnych projektantów, ale lubię strony internetowe, które mają przycięte zdjęcia iPhone'a. Ta witryna jest animowana, z pokazem slajdów wyświetlanym na ekranie, wywołanym mopem nad dobrze wykonanymi przyciskami. Zaokrąglony typ Helvetica doskonale komponuje się z designem telefonu i przycisków. Ilustracje z motywem herbaty na stronie i zrzuty ekranowe aplikacji łączą wszystko razem.
Animacje w grafice iPhone'a na stronie: 
Wyskakujące okno wyświetla ekran aplikacji: 
Kolejny ekran aplikacji Tea Round pokazany na grafice iPhone'a: 
6. Najlepiej wcześniej
Funkcje: Pozycjonowanie ekranu, animacja nawigacji
Opis: Jeśli strony internetowe mogłyby przyjmować sterydy jQuery, byłyby to Barry Bonds w sieci. Dzięki dynamicznym wizualizacjom ta strona internetowa może być łatwo pomylona z witryną Flash. Jednak po uważnej inspekcji okaże się, że strona nie jest ani Flash, ani złożona z punktu widzenia programowania. Ale świadomość, że nie istnieje ślad Flasha, pozostanie wytrawiona w twojej psychice.
Menu główne: 
Więcej rzeczy w nawiasach klamrowych: 
Podmenu i portfolio: 
Animacja
Znalezienie projektu strony internetowej, dla której wybrano DHTML do stworzenia animacji, zawsze jest niespodzianką. Najlepsze dla mnie jest to, że widzę to na moim iPhonie. Jestem pewien, że to nie główny powód, dla którego projektanci zdecydowali się zignorować Flasha i jego przyjazne dla animacji narzędzia. Nie wiem, jak bardzo polegali na jQuery, aby zakodować swoje animacje, ale musieli mieć sadystyczne tendencje, aby je ściągnąć.
7. Oko Tori
Cechy: ptaki origami latające poziomo.
Opis: Kto myśli, aby używać origami na stronie internetowej? A kto uważa, że niebieskie ptaki origami reprezentują tweety zamiast standardowej niebieskiej ilustracji? A kto myśli o animowaniu tweetów? Odpowiedzią na te pytania są twórcy Oka Tori. Stwórz stronę internetową z jedną z tych funkcji, a będziesz miał coś zupełnie oryginalnego. Dla tych twórców posiadanie wszystkich tych funkcji było niewystarczające. Podjęli kontr-intuicyjną decyzję, aby wykonać całą animację bez Flasha!
Ptaki z Twittera Origami latające w krajobrazie: 
8. Torby
Funkcje: Animacja pokazu slajdów i stopki z ikonami jednokolorowymi.
Opis: użycie jQuery jest tutaj najbardziej oczywiste, gdy pokaz slajdów jest uruchamiany przez kliknięcie w obszarze nawigacji. Ekspansywna biała przestrzeń, czarny typ i pasujące ilustracje ikon tworzą ładną stronę internetową. Ale oto animacja w stopce nie przestała działać od czasu twojego przybycia. Kliknij prawym przyciskiem myszy solidne czarne animacje, a odkryjesz sekret długiego filmu na stronie: Sprites i DHTML.
Strona główna z dużą ilością białej przestrzeni: 
Duże ikony rozrzucone po treści pokazu slajdów: 
Animacja Footera działa nieprzerwanie, niezależnie od tego, gdzie jesteś na stronie: 
9. Kidd 81
Cechy: Animacja nagłówka w poziomie.
Opis: Jasne rysunki o tematyce zimowej przyciągają uwagę natychmiast, a konstrukcja ma ciągłość aż do stopki. Podobnie jak niektóre z tych innych witryn, które używają jQuery do animowania obiektów, płynnie poruszające się obrazy wydają się na pierwszy rzut oka nie do odróżnienia od Flasha. Wisienką na torcie jest jednak przeciągalność "Wow! Nie mogę uwierzyć, że możesz przeciągnąć te "ikony".
Animacje nagłówków strony głównej: 
Stopka o tym samym ilustrowanym motywie: 
Sekcja sklepu ma taki sam charakter i kolory: 
Przewijanie pionowe
Niektóre narzędzia JavaScriptu mogą powodować płynne przewijanie między sekcjami strony. jQuery, oczywiście, jest bardziej niż w stanie wykonać ten efekt, a przynajmniej kilka stron w tej sekcji bierze tę trasę. Dynamiczne przewijanie jest przyjemnym efektem, ale w połączeniu z kreatywnymi i szczegółowymi ilustracjami, funkcja jest tylko częścią większego obrazu.
10. Tomas Pojeta
Cechy: niebo, ocean, podwodny.
Opis: Podobnie jak kilka innych stron internetowych w tej sekcji, Pojeta przyjmuje motyw, który przechodzi z dużej wysokości na powierzchnię. Szczyt strony internetowej znajduje się w kosmosie, z bardzo szczegółową rakietą i małpą. Przewiń w dół, a zobaczysz kosmitów i balony w niższej atmosferze. Dalej w dole znajduje się wysepka przypominająca Wielką Wyspę Wielkanocną pośrodku wody, która prowadzi do podwodnego widoku z łodzi podwodnej. Każda ilustracja pasuje, a przejścia są tak płynne, jak to tylko możliwe.
Rakieta i małpa w kosmosie: 
Wyspa Wielkanocna i Tukan: 
Submarine underwater: 
11. Morphix
Cechy: przestrzeń, niebo, ziemia, pod ziemią.
Opis: Morphix również zaczyna się od górnej akcji atmosferycznej, ale potem przechodzi do lądu zamiast morza, a kończy z podziemnym przekrojem. Styl jest oczywiście inny, ale ilustracja dla każdej warstwy obejmuje szerokość strony, podobnie jak ostatnia, tworząc wrażenie horyzontu. I znowu, przejście z nieba do podziemnego przepływa płynnie, szczególnie z dynamicznym przewijaniem.
Górna atmosfera, z portfolio: 
Poziom terenu, z krowami i drapaczami chmur: 
Pod ziemią, z korzeniami drzew i świstakiem: 
12. GANDRWeb
Funkcje: Różne infografiki.
Opis: W odróżnieniu od poprzednich dwóch stron, ta wykorzystuje infografiki zamiast postaci, krajobrazów i tła. Każda sekcja strony wyjaśnia towarzyszącą grafikę. W dolnej części strony znajduje się, co nie dziwi, duży internetowy formularz. Strona czysto związana ze sprzedażą, która korzysta z tak dobrej ilustracji, jest rzadkością. Przejścia wywołane przez jQuery dodają połysku wiadomości.
Infografika wyjaśniająca korzyści i ceny: 
Infografika wyjaśniająca proces projektowania: 
Formularz internetowy: 
13. Orman Clark
Cechy: Chmury, obiekty naziemne i latające
Opis: Podobnie jak dwie pierwsze strony w tej sekcji, strona internetowa Orman Clark zaczyna się od nieba, ale wysoka strona wbija się w niebo chmury aż do stopki, gdzie uderzyliśmy o ziemię. Zauważalna różnica między tą stroną a większością innych w tym artykule to stała pozycja głównej nawigacji i ilustracji. Jest to zaakcentowane przez gwiazdę na szczycie tła, która podkreśla pływające jajo. Strona zawiera również dobrze zintegrowany pokaz slajdów jQuery do portfolio.
Balon, krowa i jajko: 
Pokaz slajdów z portfolio biplanu i jQuery: 
Formularz internetowy, stopka i ustalona nawigacja: 
14. Dreamerlines
Funkcje: Różne kolaże.
Opis: strona Dreamerlines przyjmuje dyskretne podejście. Podobnie jak GANDRweb, każda sekcja ma odrębną grafikę, która jest powiązana z sąsiednimi sekcjami tylko za pomocą białej przestrzeni. Każda sekcja jest jednak wyjątkowa, szczegółowa, kolorowa i przyciągająca uwagę. Ciężkie ilustracje, duży odważny tekst i kolorystyka tła nadają ton.
Duży tekst na początek: 
Kolaż "w twarz": 
Formularz internetowy otoczony dużą ilością elementów wizualnych: 
15. Social Snack
Cechy: drut, ptaki i ziemia.
Opis: motyw nieba nigdy się nie starzeje, a projektanci mogą wybierać spośród dowolnej liczby palet, aby pokolorować swój horyzont. Horyzont Social Snack jest nieco mglisty, z wyraźnym zielonym i brązowym odcieniem. Ptaki siedzą na drutach, które są rozrzucone w pionie na całej stronie, aby oddzielić sekcje. Witryna kończy się na dachu. Mimo że blog nie ma płynnego przewijania jQuery, zabawny ilustrowany nagłówek z uroczymi postaciami zasługuje na wzmiankę.
Paleta kolorów i motyw ptaków u góry: 
Ramki do zdjęć zespołu zwisają z ptasiego drutu: 
Słodkie postacie w dziale blogu: 
Pokaz slajdów
Jednym z najczęstszych i najbardziej rozpoznawalnych zastosowań jQuery jest czcigodny pokaz slajdów. Za każdym razem, gdy widzisz zawartość przesuwającą się po ekranie po kliknięciu myszą i nie można znaleźć Flasha, prawdopodobnie jest to jQuery. Znajdziesz slajdy na stronach firmowych, stronach docelowych, portfolio agencji, stronach e-commerce, wszędzie. Są wszechobecne. Poniżej kilka przykładów pokazów slajdów, które ożywają dzięki ostrym ilustracjom.
16. GoSiteWave
Funkcje: pionowy pokaz slajdów z poziomą nawigacją i atrakcyjnymi ikonami.
Opis: Przewijany w pionie pokaz slajdów, w połączeniu z ikonami i obrazami, to prawdziwa historia. Oczekuje się, że poślizgi będą przewijać się w poziomie, więc tutaj jest odwrotnie. Jasne błękity i pomarańcze, gładkie zaokrąglone guziki i ciemne tło ze zręcznie umieszczonymi smugami światła dodają temu efektowi. Oczywiście, jeśli ikony nie były tak dobrze zrobione, strona internetowa mogła nie dokonać cięcia.
Strona główna slajdów grafiki: 
Kolejny pokaz slajdów: 
17. Sketchen
Funkcje: poziomy pokaz slajdów z filmów Flash, z wstępnie załadowaną treścią, dużym tekstem i ilustracjami.
Opis: Jeśli lubisz żółty, pokochasz tę stronę. Ten pokaz slajdów zawiera duże przycięte ilustracje, które utrzymują żółte tło w nienaruszonym stanie. Dodatkowy pokaz slajdów w wyskakującym okienku "lightbox" zawiera portfolio. Czy wspomniałem, że ilustracje były duże? Zajmują dużo miejsca, ale są bardzo dobrze zrobione. Kolor tła i obrazy są akcentowane przez zielone i białe elementy nawigacyjne, a ostry kontrast zapewnia, że użyteczność nie jest problemem.
Megafon: 
Biała stopka: 
Jabłko: 
Portfolio w "lightbox": 
18. Forma Pięćdziesiąt pięć
Cechy: płynne przewijanie w pionie, dynamicznie generowane treści bloga, pokaz slajdów, główne podświetlanie nawigacji,
Opis: Nie pozwól, aby monochromatyczna paleta kolorów i proste rysunki liniowe Cię zmyliły. Ta strona agencji ma wszystko. Płynne przesuwanie w pionie, stała stopka pokrywająca zawartość, pokaz slajdów portfolio, dynamicznie osadzona zawartość blogu itp. W przypadku wszystkich tych funkcji, co naprawdę wyróżnia witrynę, to całkowita liczba losowych ilustracji i fakt, że " wszystko całkiem zabawne. W związku z tym wizyta w witrynie nie jest kompletna bez pobrania przykładowego filmu "About".
Wiele ilustracji na ekranie startowym
Kroje paskowe pasują do stylu ilustracji
Pokaz slajdów portfolio
W miarę przewijania zaznaczaj tytuły nawigacji Footer
Przewijanie w poziomie
W przeciwieństwie do pokazu slajdów, który zwykle jest ograniczony do sekcji strony internetowej, poziome przewijanie (jak tutaj zdefiniowano) dzieje się na poziomie przeglądarki lub przynajmniej tak się czuje. Dynamiczne przewijanie w poziomie nie ma tylu wspaniałych przykładów, jak przewijanie w pionie; ale jak widać, projektanci, którzy myślą w poziomie, mają wielką wyobraźnię.
19. Serial Cut
Funkcje: Duże ilustracje do portfolio; przewijanie w poziomie i pionie.
Opis: Ten pokaz slajdów został zaprojektowany tak, aby zajął obszar wyświetlania przeglądarki. Nie możesz przewijać w lewo lub w prawo, ale czy to ma znaczenie? Ilustracje i wzornictwo są tak wyjątkowe, że twórca mógł mieć przekręconą, przewróconą do góry nogami lub dowolną inną nieintuicyjną metodę nawigacji, a ludzie nadal mogliby poświęcić cały wysiłek, zastanawiając się, co będzie dalej. To, co naprawdę pomaga, to rozmiar ikony nawigacji, a zdjęcia i zdjęcia w portfolio zajmują cały ekran.
Pociągi: 
Okładka CD: 
3-D facet z butami: 
20. Tyler Finck
Funkcje: Przejścia poziome, z animacjami utworzonymi z tła.
Opis: Oto świetny przykład użycia obrazu tła do stworzenia efektu animacji dla dynamicznego poziomego przewijania. Paleta kolorów to przede wszystkim czerń i biel. Kroje pisma są pogrubione i mają grube, blokowe tła w niektórych miejscach, a typ oparty na obrazie ma szkicowy wygląd. Kompletny pakiet działa dobrze.
Minimalistyczna strona główna: 
Bio: 
Pieniędzy: 
Inne funkcje
Niektóre witryny korzystające z jQuery nie są łatwo kategoryzowalne. Mogą mieć niezwykłe cechy lub subtelnie wykorzystywać jQuery lub adaptować wspólną technikę w niecodzienny sposób. Wstępne ładowanie, automatyczne uzupełnianie tekstu, blaknięcie i nakładanie tekstu oraz nakładanie warstw na obrazki to tylko niektóre sztuczki znalezione w ostatecznym zestawie witryn w tej kolekcji.
21. Pomarańczowa etykieta
Funkcje: Wstępne ładowanie obrazu.
Opis: Wstępne ładowanie obrazu to zakres korzystania z jQuery przez Orange Label. Podczas przewijania w dół elementy portfolio są dodawane do strony (z obracającą się grafiką informującą, że są one wstępnie ładowane). Z punktu widzenia łatwości obsługi ta wygodna funkcja zapobiega automatycznemu ładowaniu zawartości wykorzystującej przepustowość. Ilustracja na górze to duże, kolorowe, bardzo szczegółowe i smaczne cukierki do oczu.
Ilustracja: 
Powiększona ilustracja: 
Przedmiot portfela i stopka: 
22. Wyszukiwarka ikon jedwabnych
Funkcje: uzupełnianie tekstu.
Opis: wpisz nazwę ikony, a ta witryna sortuje ikony na podstawie możliwych wyników wpisanych do tej pory. Jakość ikon jest całkiem dobra, a obsługa jest całkiem wygodna. Ponieważ projekt jest naprawdę o wynikach wyszukiwania, ma niewielki wpływ na wizualną rozrywkę, co jest dużym plusem.
Widok domyślny: 
Szukaj wyników dla "light": 
23. Vyniknite
Funkcje: Zanika.
Opis: Ta strona zaczyna się od wspaniałej ilustracji dmuchawca, dobrego układu i miłego doboru krojów pisma. Jedynym zauważalnym działaniem jQuery jest zanikanie i zamykanie się podczas nawigacji po kartach. Innym małym kawałkiem nieba jest sposób w jaki pędy mniszka pokrywają się z aktywnymi i nieaktywnymi zakładkami. A jeśli przyjrzysz się bliżej, zobaczysz kilka wymyślnych zawirowań wiatru towarzyszących pływającej faunie.
Mnóstwo dandelions: 
24. Agencja Halo
Funkcje: Automatyczny pokaz slajdów z ilustracją tła; tekst nad obrazami.
Opis: Tła, tła, tła. Poruszaj się po tej stronie, a znajdziesz wiele dekoracyjnych pełnych kolorowych ilustracji trójwymiarowych. Imponujące portfolio można uzyskać poprzez pokaz slajdów jQuery na stronie głównej. Możesz również znaleźć informacje o każdym elemencie w sekcji portfolio (lub "pracy") z nakładki tekstowej na miniaturze.
Strona główna z pokazem slajdów: 
Portfolio nakłada tekst na obrazy: 
Kolejne kolorowe tło: 
Napisany specjalnie dla WDD przez Maurice'a Wrighta. Jest web developerem, projektantem i twórcą Moluv.com . Od 2000 roku Moluv jest źródłem inspiracji dla kreatywnych umysłów szukających najlepiej wyglądających stron w Internecie.
W jaki sposób jQuery zmieniło sposób projektowania witryn? Proszę komentarz poniżej ...