Twórz, ulepszaj i baw się animacjami CSS z Animista

Jedną z najistotniejszych części tworzenia stron internetowych jest znalezienie odpowiedniego wyglądu i działania dla tego, co tworzysz. Podczas pracy nad projektem projektanci stron internetowych eksperymentują z wieloma tematami, modyfikacjami, animacjami i innymi aspektami, aby znaleźć dokładnie to, co oni lub ich klienci lubią. A CSS odgrywa ważną rolę w takim projektowaniu stron internetowych. Zazwyczaj projektowanie stron internetowych za pomocą CSS polega na wprowadzeniu kodu, obserwowaniu, jak on się sprawuje na stronie internetowej, nieco korygowaniu kodu, a następnie ponownym oglądaniu wyników i tak dalej. Jest to proces iteracyjny z dużym nakładem czasu i wysiłku. A dla kogoś, kto jest nowy w CSS, wszystko to może stać się koszmarem, odkąd będzie musiał badać, aby znaleźć dokładne linie kodu, które mogą skutkować pożądanym efektem.

Chociaż jest to część pracy, to naturalne dla projektantów, że czują się wyczerpani i szczerze mówiąc, po pewnym czasie zirytowani. Ale tak właśnie wygląda ten proces. Naprawdę nic nie można z tym zrobić, prawda?

Cóż, niezupełnie! Dzięki Animista wiele można zrobić, aby ułatwić projektowanie stron internetowych w oparciu o CSS; właściwie do tego stopnia, że będzie opierać się na klikaniu. Chcesz wiedzieć jak?

Animista – cudowne narzędzie do tworzenia i testowania CSS na bieżąco!

Animista to miejsce, w którym możesz bawić się kolekcją gotowych animacji CSS, dostosowywać je i zapisać tylko te, których faktycznie chcesz użyć. To jest jak supermarket dla animacji CSS. Odwiedzasz, modyfikujesz i bawisz się, rozważasz opcje i wybierasz treść, którą lubisz. Narzędzie online zawiera znaczną liczbę animacji, które zostały zorganizowane w sensowny i przystępny sposób, aby można je było łatwo ponownie wykorzystać w różnych projektach. To, co zaczęło się jako mały osobisty projekt dla projektanta stron internetowych, ukształtowało się na tym internetowym placu zabaw, który zawiera kolekcję gotowych animacji, które można testować za pomocą różnych opcji, takich jak ułatwienie, opóźnienie, czas trwania i inne. Gdy użytkownik jest zadowolony z dokonanych wyborów, wystarczy, że zapisze kod animacji i zrobione. Praca, która zajęłaby wiele godzin, aby badać, tworzyć i testować, ściśnięta w dzieło minut – Animista jest dla Ciebie!

Najlepsze cechy tego narzędzia w skrócie:

• Generuje kod animacji CSS jednym kliknięciem
• Zawiera wstępnie zaprojektowane mechanizmy, takie jak slajdy, transformacje, obroty, animacje zrzutu cienia i wiele innych
• Obsługuje eksport generowanego kodu
• Pliki do pobrania oparte na API FileSystem HTML5 obsługiwane w przeglądarce Chrome

Teraz zacznijmy się bawić!

Tak to działa

Strona główna narzędzia jest trochę zagmatwana, ale można to również postrzegać jako oznakę wyjątkowości. Kiedy odwiedzasz tę stronę, wszystko, co zobaczysz w nazwie narzędzia i przycisk “Spróbuj mnie” (‘Try Me’) obok. To jest to! Bez pasków przewijania, bez menu, bez stopek, bez niczego. Przez chwilę zaczynasz zastanawiać się, czy strona została załadowana poprawnie lub czy niektóre elementy wciąż oczekują. Gdy zorientujesz się, że musisz kliknąć “Spróbuj mnie” (‘Try Me’), aby kontynuować, wylądujesz w panelu sterowania narzędzia. I wszystko natychmiast stanie się jasne.

Oto działanie narzędzia wyjaśnione krok po kroku:

• Zamiast czarnego pola na środku ekranu wybierz obiekt, na który mają wpływ animacje. W tym celu kliknij menu rozwijane o nazwie “wybierz obiekt” (”select object”) w sekcji Opcje po lewej stronie (wypróbuj obiekt 3D karty (odwrócenie poziome))
• Przeglądaj opcje animacji wyświetlane w kółkach na górze i korzystaj z różnych opcji, takich jak ułatwienie, opóźnienie, czas trwania itd. Powinieneś być w stanie zobaczyć, jak wpływają one na animację na poczekaniu
• Możesz zmienić atrybuty animacji w sekcji Opcje po lewej stronie. Natychmiast wyświetlą się wyniki
• Gdy zobaczysz coś, co Ci się podoba, kliknij ikonę “serca” (‘heart’) w prawym górnym rogu panelu animacji. Gdy to zrobisz, kilka opcji będzie dostępnych w prawym górnym rogu ekranu.
• Powtarzaj, aż będziesz zadowolony z wyboru. Możesz zobaczyć swoje ulubione animacje w dowolnym momencie, naciskając przycisk “Lejek” (”Funnel”) lub klikając przycisk “Kosz” (”Trash”), aby rozpocząć od początku.
• Kiedy będziesz gotowy, przejdź do ekranu pobierania, klikając przycisk “Pobierz” (‘Download’) lub link pobierania w głównej nawigacji. Jeśli używasz przeglądarki Chrome, kliknij przycisk pobierania i sprawdź folder pobierania. Jeśli wszystko poszło dobrze, plik ‘animista.css’ powinien tam być.
• Alternatywnie, możesz wygenerować kod dla animacji, klikając ikonę “nawiasy klamrowe” (”curly braces”) w górnym prawym rogu panelu animacji. Gdy zobaczysz kod, po prostu go skopiuj i wklej do ulubionego edytora kodu.

Co lubimy i co należy poprawić

Nie trzeba dodawać, że narzędzie, które oferuje taką elastyczność, różnorodność opcji i łatwość użycia, a także jest bezpłatne, jest oczywistym zwycięzcą. Jednak Animista ma wiele do poprawienia. Obejmuje to bezpośrednie wsparcie pobierania dla przeglądarek innych niż Chrome, więcej opcji obiektów i krótkie wyjaśnienie tego, co dokładnie robią różne opcje po lewej stronie (w większości jest to teraz poszukiwanie dla początkujących).

• Twórz, ulepszaj i baw się animacjami CSS na animista.net/ @cssanimista via @MonitoringStron

  Tweetnij to

Podsumowanie

Lubimy Animistę, podobnie jak wielu projektantów na całym świecie. Jeszcze kilka ulepszeń i z czasem to narzędzie może być jednym z najprostszych, a zarazem najbardziej użytecznych narzędzi w tej dziedzinie.