20 fantastycznych stron pseudo-flashowych
Strona pseudo-Flash to taka, która wygląda, działa i działa jak strona Flash, ale w rzeczywistości jest zbudowana na dobrym staromodnym kodzie HTML i CSS.
Zwykle jest też odrobina JavaScriptu, aby ożywić i dopracować interfejs.
Rezultat jest często poza tym, czego oczekiwaliśmy od HTML i CSS, dlatego możemy założyć, że strona jest oparta na technologii Flash. Kliknij prawym przyciskiem, a będziesz mile zaskoczony.
Interesują mnie strony pseudo-Flashowe i często mówię o tym temacie. Flash najwyraźniej stracił część swojej przewagi (choć w gruncie rzeczy go nie ma), a fokus przesunął się na podstawowe technologie internetowe (HTML, CSS, JavaScript).
Są dwa powody tego. Pierwszy jest techniczny. Łatwiejsze i ulepszone SEO, narzędzia CMS, takie jak WordPress i szeroka obsługa urządzeń, zachęciły ludzi do maksymalnego wykorzystania standardowych narzędzi.
Po drugie, dużo więcej osób wie, jak się rozwijać w tych podstawowych językach, a duża społeczność jest gotowa zrezygnować z zalet Flasha dla tych znanych narzędzi.
Mając tyle powodów, aby przesunąć kopertę i odejść od Flasha, jesteśmy w trakcie ogromnej zmiany w rozwoju sieci. Strony HTML zaczęły się jako statyczne podmioty. Wraz z pojawieniem się AJAX byliśmy świadkami, jak dynamiczny dokument może zmienić nasze oczekiwania. Rzucaj animacje, przejścia i interakcje, a masz radykalnie inny nośnik.
Szczęśliwe straty
Ta zmiana pociąga za sobą kilka ofiar, które wielu ludzi (łącznie ze mną) przyjmuje z radością. Pierwszą z nich jest muzyka w tle. Domyślnie odtwarzanie na standardowej stronie staje się trudniejsze dla programisty. Nie muszę już szukać przycisku pauzy ani wyciszania, aby zamknąć stronę.
Po drugie, strony internetowe mają mniejsze szanse na przejęcie kontroli nad przeglądarką. Niektóre strony internetowe oparte na Flash wciąż działają, zmieniając rozmiar ekranu i ładując pełnoekranowe interfejsy. Jednak strony internetowe z pseudo-flashami pozostają na swoim miejscu.
Słowa ostrożności
Podobnie jak w przypadku każdego trendu, musimy podejść do tego z ostrożnością. Przede wszystkim potrzebujemy samokontroli. Tylko dlatego, że możemy robić radykalne rzeczy dzięki przewijaniu strony, animacje i przejścia nie oznaczają, że powinniśmy.
Najlepiej jest uważnie rozważyć odbiorców, produkt i, co najważniejsze, doświadczenie użytkownika. Mając to na uwadze, możesz strategicznie zastosować te podejścia, aby ulepszyć swoją witrynę.
Przykłady tego stylu
1. Emilie Crssrd
Podczas gdy wiele rzeczy na Emilie Crssrd Strona internetowa sprawi, że będzie wyglądać jak Flash, skupię się na jednym. Tutaj wskaźnik ładowania wygląda jak coś, co zwykle znajdujemy na stronie Flash (chociaż widzimy to również z funkcjami AJAX). Mechanizm zapobiega pojawianiu się obrazów i niezaangażowanych treści przed ich pełnym załadowaniem, zapewniając użytkownikom prawidłowe wyświetlanie treści. Program ładujący w połączeniu z przejściami na stronie zapewnia płynny interfejs.
2. Stefan Kanchev
Wiele rzeczy na Stefan Kanchev Na stronie internetowej również echo podejścia oparte na Flash, a subtelne zanikanie i zanikać z ikon, jak myszy nad nimi, aby piękna interakcja. Wizualna sygnalizacja pomaga użytkownikom skupić się na jednym elemencie naraz i dodaje odrobiny skwierczenia, aby ożywić tę minimalistyczną stronę. Wspaniały przykład wykorzystania czegoś prostego do wielkiego efektu.
3. Republika marki
Doceniać Marka Republiki To strona internetowa, trzeba z nią współdziałać. Kontener wokół logo ma genialną niewielką interakcję z nim. Ten element oparty na CSS wykorzystuje pozycję myszy do dynamicznej zmiany standardowych granic, tworząc efekt trójwymiarowy i zapewniając, że logo wyróżnia się na intensywnym tle. Tego rodzaju rzeczy poprawiają interfejs i ogólną atmosferę witryny bez wchodzenia w drogę. Dokładnie tego chcesz: dodatki nie powinny kolidować z użytecznością.
4. Cooper
Bednarz podąża za popularnym podejściem do pojedynczych stron internetowych. Po wybraniu elementów w nawigacji odpowiednia zawartość zostanie przeniesiona do okna roboczego. Dzięki płynnym przejściom strona bardzo przypomina Flasha, ale odbywa się za pomocą standardowych języków internetowych. Równie fajnie jak strona internetowa działa, jednak wszystko dzieje się na urządzeniach mobilnych. Wykorzystując te technologie, powinniśmy ocenić ich wpływ na niestandardowe urządzenia i naszych odbiorców.
5. Flipboard
Flipboard Całkiem prosta strona ma dość standardowy rotator treści. To, co sprawia, że ta strona jest bardzo podobna do Flasha, to sposób jej skalowania. Strona dynamicznie dostosowuje się do Twojej przeglądarki (z pewnymi ograniczeniami), standardowy efekt w świecie Flash.
6. Crafty 2010
Crafty 2010 zapewnia przewijanie na stronie bardzo podobnie do strony Coopera. W takim przypadku widok jest ograniczony do zawartości wybranej przez użytkownika. Ani "właściwe" rozwiązanie; po prostu pokazują nieograniczone możliwości podejścia. Doceniam, jak łatwa jest ta strona: animacje są fajne, ale nigdy nie przeszkadzają w treści. Ładna równowaga między stylem a użytecznością.
7. 20 rzeczy, których nauczyłem się o przeglądarkach i sieci
Interaktywne toczenie stron jest popularnym efektem w witrynach Flash, tak że wszystkie produkty zostały stworzone tylko po to, aby wykorzystać tę funkcjonalność. Ze swojej strony 20 rzeczy, których nauczyłem się o przeglądarkach i sieci pokazuje, co jest możliwe, demonstrując efekty, które kiedyś były możliwe tylko za pomocą Flasha. Ta strona to jeden poważny element pracy i świetny przykład witryny opartej na standardach.
8. NL Engenharia
NL Engenharia to typowa strona internetowa dla firmy architektonicznej. To niekoniecznie jest złe; to po prostu pasuje do niszowych studni. Wygląda na to, że został dosłownie przeniesiony z Flash do HTML: wysuwana nawigacja, obrazy pełnoekranowe, dynamiczne rozmiary, wszystkie cechy Flasha. To działa. Wynik jest piękny i dobrze reprezentuje firmę.
9. Ryan C. Jones
Ryan C. Jones ma piękne portfolio fotograficzne. Punkt zainteresowania (zdjęcia) jest przytłaczająco ważny. To świetny przykład na to, by nie przeszkadzać tej technologii. Bez względu na narzędzia użyte do jego zbudowania, wynik jest prostym i skutecznym sposobem na zaprezentowanie pracy tej osoby.
10. Studio Gang Architekci
Na pierwszy rzut oka interfejs kreatywny i animacja włączone Studio Gang Architekci wyglądają okropnie jak Flash. Ale chociaż interfejs jest wyjątkowy i niezapomniany, nie mogę przestać się zastanawiać, czy to właściwe. Pokazuje jednak, co można zrobić przy pomocy staromodnego HTML-a.
11. ODLEGŁOŚĆ Kreacja
DIST Creative wykorzystał HTML w sposób, który jest niesamowity. Dzięki animacjom, wskaźnikom ładowania i płynnemu interfejsowi, ta strona łączy w sobie kreatywność najlepszych układów Flash z bardzo użytecznymi rozwiązaniami HTML. Pomimo niecodziennego podejścia, jest łatwy w obsłudze i komunikuje wyjątkowość agencji kreatywnej.
12. Wiadomości do Japonii
Wiadomości dla Japonii niekoniecznie ma wyglądać "Flash". Animacja i specjalne dodatki sprawiają, że interfejs jest gładki i prosty w użyciu. A elementy interaktywne są wybitne, ale nie przeszkadzają w ogóle. Jest to doskonały przykład tego, jak ten rodzaj estetyki może ulepszyć standardową stronę internetową.
13. Atlason
Jako programista nie możesz na to patrzeć Atlason Na stronie internetowej bez poczucia respektu. Nie mogę sobie wyobrazić pracy, która się do tego przyczyniła. Szczególnie podoba mi się, że projekt wypełnia ekran i świetnie wykorzystuje dostępne nieruchomości. Uwielbiam też, jak to się dzieje w tak niewielu konwencjach, a mimo to wciąż jest tak prosty w użyciu.
14. Bit Bit bajtów
Bit Byte Bit dynamicznie agreguje treści z wielu źródeł, w tym z bloga właściciela, kanału na Twitterze i konta Forrst. Takie strumienie lifestreamingu są dość powszechne, ale ta strona pokazuje, że wcale nie musi czuć się statycznie.
15. FORMULARZ
FORMULARZ przyjmuje podobne podejście do Bit Byte Bit, ale bardziej zorientowane na obraz, co ma sens z uwagi na charakter jego pracy. Uwielbiam to, że od razu widzisz nie tylko pracę agencji, ale możesz zacząć filtrować treści, które są dla Ciebie istotne. Portfolio znajduje się na stronie głównej, a mimo to jest w pełni funkcjonalne, nawet jeśli strona internetowa pozostaje łatwa w użyciu.
16. EEHarbor
Podczas gdy wiele z prezentowanych tutaj stron internetowych wykorzystuje przejścia na stronie do zmiany zawartości bez odświeżania strony, sposób EHarbor czy to jest naprawdę niezwykłe. Szybkość strony internetowej jest głównym powodem jej sukcesu. Nigdy nie czujesz, że fantazyjne animacje stają na drodze do treści. Przyczyniają się one jedynie do wysokiej jakości wizerunku firmy.
17. Wells Riley
Jednym z największych ograniczeń HTML jest jego odporność na wszystko inne niż proste linie pionowe i poziome. Są na to różne sposoby, ale przedstawiają pewne problemy z różnymi przeglądarkami. Wells Riley łączy w sobie całkowicie odrębny interfejs z lekkim kątem. Rezultat jest trudny do osiągnięcia, ale warto.
18. Sympozjum Manchesteru
Sympozjum Manchesteru ma super czysty i prosty interfejs. Jednokartkowa witryna przewija się pionowo ze stałym nagłówkiem. Chociaż efekt nie jest szczególnie niezwykły, coś w tym stylu wydaje się być podobne do Flasha. Proste podejście i brak szalonych animacji i przejść są ciekawym kontrastem dla wielu ekstremalnych stron internetowych prezentowanych tutaj.
19. Sophie Hardach
Sophie Hardach Strona internetowa zawiera ciekawe animacje. Różne elementy poruszają się lub powiększają, gdy najedziesz na nie kursorem. Fale wzdłuż dna dodają życiu nieco statycznej strony. Kolejny nietypowy projekt, który dobrze współpracuje z płynnymi animacjami JavaScript.
20. Renato Zero
Renato Zero Jednokartkowa strona internetowa zmienia ładowanie treści w piękne wydarzenie. Zamiast wstępnie załadowanych treści i gotowych do przejścia, każda sekcja jest ładowana z dobrą animacją podczas przewijania w dół. Animacje są szybkie; nigdy nie masz ochoty na nie czekać. Efekt z pewnością wygląda jak Flash.
Czy przegapiliśmy jakieś niesamowite witryny HTML, które wyglądają jak Flash?