4 Nowoczesne sztuczki w tle do wypróbowania
Wydaje się, że jako żywioł do projektu, tła żyją w cieniach; jednak to nie do końca prawda. W czasach, gdy CSS dopiero zaczynał podejmować pierwsze kroki w kierunku podboju świata, tło przejęło już rolę głównego elementu dekoracyjnego strony internetowej.
W dzisiejszych czasach sytuacja nie zmieniła się drastycznie. W większości przypadków służy jako główna wizualna siła napędowa, która wnosi ważny wkład do ogólnego tematu.
Tradycyjnie zdjęcia i filmy są pierwszymi wyborami tła. Faktem jest, że są to po prostu przeludnione sekcje bohaterów: każda inna strona internetowa wita publiczność online w oparciu o obraz lub tło filmowe. A to sprawia, że sieć (i twój interfejs w szczególności) są do siebie podobne, powodując oczekiwane wrażenia użytkownika.
Jednym ze sposobów jest znalezienie nowych rozwiązań dzięki wykorzystaniu nowych technik i zabawie z CSS3, HTML5 i JavaScript. W rzeczywistości istnieje wyraźna tendencja do sięgania po te opcje. Istnieją co najmniej cztery różne nowoczesne tła dynamiczne, które biorą udział w zawodach, aby wygrać swoje miejsce w słońcu w tych dniach.
Spójrzmy na nie:
Animacja cząstek
Animacja cząstek jest obecnie jednym z najpopularniejszych wyborów. Wiele stron internetowych z powodzeniem zastosowało to eleganckie rozwiązanie inspirowane kosmosem. Działa dobrze w połączeniu z płóciennym jednolitym kolorem, ilustracją, rysunkami wektorowymi, a nawet zdjęciami.
Co więcej, animacja jest różna. Może to być wiązka chaotycznie poruszających się kropek rozproszonych po całej stronie w celu naśladowania gwiaździstego nieba lub deszczu gwiazd lub rozwiązania w postaci konstelacji, w którym można łączyć koła cienkimi liniami. I to nie wszystko; czasem jest sparowany z efektami wywołanymi przez zdarzenia najechania kursorem myszy: w tym przypadku jesteś w stanie odpędzić cząsteczki, utworzyć z nich wiry, dołączyć je do kursora jako ścieżki itp.
Huub jest przykładem typowej animacji cząstek. Posiada schludną, ruchliwą gromadę kropek, która doskonale pasuje do ciemnej kolorystyki i mapy umieszczonej z tyłu. Użyj kursora myszy, aby się zabawić.
Wskazówka: Jeśli chcesz opanować dynamiczne tło nagłówka Huub, powinieneś rzucić okiem na projekt stworzony przez Dominika Kolbego demonstracja paralaksy myszy . Wygląda prawie tak samo. Ale jeśli potrzebujesz natychmiastowego rozwiązania, to wywołaj bibliotekę JavaScript Vincenta Garreau Particles.js jest tym, czego szukasz.
Fale cząstek
Podczas gdy w poprzednim przykładzie efekt można osiągnąć za pomocą sprytnych manipulacji z HTML5 i CSS3 i szczyptą magii JavaScript, ten jest genialnym eksperymentem z biblioteką Three.js. Dzięki łukowatym kształtom i gładkim falującym ruchom łatwo przypomina jeden z małych przypływów. Tworzy wrażenie oddychającego płótna. Za pomocą kursora myszy można obracać go w różnych kierunkach, badając go zarówno w poziomie, jak iw pionie.
StuurMen ma prostą, dopracowaną sekcję "powitalną". Jest minimalny, czysty i wykwintny. Zawartość dyskretnie wchodzi w pole widzenia, a pulsujące tło tworzy odpowiedni nastrój do projektu.
Wskazówka: tutaj możesz znaleźć oryginalny skrypt autorstwa ThreeJS i jego udanej adaptacji przez Deathfanga z demem o nazwie płótno three.js - cząsteczki - fale .
Najedź myszką na paralaksę
Warstwowa paralaksa to kolejny rosnący trend. Wraz z animacją cząstek może przekształcić matowe tło statyczne w kompozycję z subtelnym odczuciem 3D. Wspaniałą rzeczą jest to, że nie musisz rezygnować z ulubionego wyboru obrazu, po prostu użyj paralaksy, aby nieco ją ulepszyć.
Jest to całkiem korzystne, gdy trzeba ożywić tytuł, logotyp, surrealistyczną scenę lub ilustrację. Nadaje się również do różnych abstrakcyjnych animacji. Wywoływane przez standardowe zdarzenie najeżdżania kursorem myszy, nie tylko dodaje inny wymiar, ale także pozwala użytkownikom bawić się w środowisku.
Osobiste portfolio Alexandre Rochet ma wyjątkową stronę powitania. Nie tylko zachowanie przyciąga wzrok, ale także paralaksa kursora myszy powoduje zmianę liter.
Wskazówka: Istnieje wiele bibliotek i przydatnych fragmentów kodu służących do generowania paralaksy. Jedną z najpopularniejszych jest wtyczka stworzona przez Matthew Wagerfielda Parallax.js . Jeśli jednak chcesz zobaczyć to w praktyce, szczególnie w odniesieniu do typografii, możesz odkryć pióro Frontnerd, które przedstawia jego ujęcie na 3d paralaksy na myszy .
Eksperymenty WebGL
Eksperymenty WebGL są oczywiście wariantem dla wyrafinowanych, hartowanych programistów i klientów z dużym budżetem. Mogą być genialne, budzące podziw i trochę pompatyczne. To warte każdego grosza. Jednak w maści zawsze jest mucha. Z wielką siłą wiąże się wielka odpowiedzialność, a przy WebGL nie należy zapominać o ilości zużywanych zasobów i braku pełnej kompatybilności przeglądarki.
Solarin jest o niezapomnianym i oszałamiającym doświadczeniu użytkownika. Jest to eksperyment 3D WebGL, bogaty w liczne ekscytujące i innowacyjne funkcje. Tło nagłówka to ogromna futurystyczna kula, która reaguje na kursor myszy i tworzy niesamowite wrażenie.
Wskazówka: Podczas gdy naśladowanie tego, co robili geniusze w MediaMonks, jest diabelnie skomplikowane, w sieci zawsze możesz znaleźć punkt wyjścia, który da ci pożywienie. Weź pod uwagę WebGL API , i ten codepen od Yoichi Kobayashi, który wymyślił projekt o nazwie "Kulista kula" .
Wniosek
Podczas gdy wykorzystanie obrazów i filmów jest sprawdzonym w czasie i mniej bolesnym sposobem upiększania tła, istnieją jeszcze inne obiecujące i eksperymentalne opcje, które mogą uzyskać pożądany rezultat. Trzymanie się z dala od banałów stanowi wyzwanie, a nawet wymaga pieniędzy, ale środki te są uzasadnione i całkiem rozsądne.
Niezależnie od tego, czy jest to prosta, ale elegancka animacja cząsteczek lub niezwykły eksperyment WebGL, wprowadza nowe życie w rdzeń interfejsu, dając Twojej stronie przewagę.