Główna » zestaw narzędzi » Tuesday.css jest teraz najgorętszą biblioteką animacji

    Tuesday.css jest teraz najgorętszą biblioteką animacji

    Już teraz powinieneś być zaznajomiony Animate.css tak jak główna biblioteka animacji wśród projektantów stron internetowych.

    Ale na bloku jest nowy dzieciak wtorek, i jego branie animacji internetowej siłą.

    Ta nowa biblioteka nie różni się zbytnio formatem ani implementacją. Ale wtorek przychodzi z garstką nowe animacje CSS To ty nie mogę znaleźć nigdzie indziej.

    Te nowe efekty są o wiele bardziej subtelny charakter więc oni naprawdę ładnie wtopić się w stronę. Tutaj jest mała lista efektów możesz wybrać z:

    • Zanik i rozszerz
    • Znikają i kurczą się
    • Stempel i odbijanie
    • Kątowa huśtawka
    • Wstaw z lewej / prawej strony
    • Squash / stretch
    • Zawias

    Jeśli przejdziesz przez tę listę na stronie demonstracyjnej, zauważysz, że wszystkie efekty mają jedno wspólne: fizyka.

    Wszyscy czują się bardzo realistyczne do podstaw fizyki, i wydają się przestrzegać praw grawitacji. Żadna z tych animacji nie jest zbyt wysoka ani zewnętrzna. Oni są subtelny, ale zauważalny a co ważniejsze, są wiarygodny.

    Myślę, że Tuesday jest jedną z najlepszych nowoczesnych bibliotek animacji CSS, ponieważ prezentuje realistyczny widok animacji internetowej.

    Nie powinniśmy projektować szalonych efektów interfejsu, które wyróżniają się jak bolący kciuk. Subtelność jest zawsze nazwą gry, ponieważ to tworzy poczucie interaktywności z dowolnego wpisu użytkownika, czy to kliknięcie, czy przewijanie.

    Problemem zawsze było pisanie tych animacji od zera i sprawianie, by wyglądały dobrze. Ale teraz we wtorek twoje zmartwienia mogą odlecieć prosto do drzwi.

    Właśnie pobierz kopię z GitHub i Dodaj .css plik na swoją stronę. Możesz tak naprawdę użyj wersji CDN prosto z GitHub jeśli nie chcesz niczego pobierać lokalnie.

    Po dodaniu do Twojej strony internetowej dołącz .animować klasa wraz z dowolnymi klasami zastrzeżonymi wymienione w repozytorium GitHub. Twój kod może wyglądać mniej więcej tak:

     

    Jest wtorek.

    Spójrz na pełna dokumentacja zobaczyć lista wszystkich klas animacji In / Out.

    Jeśli pracujesz z JavaScript, możesz także dodaj te klasy dynamicznie na zdarzenia click / hover. W ten sposób możesz dodać animowaną klasę tylko wtedy, gdy użytkownik kliknie przycisk, który wydaje się animować po kliknięciu.

    We wtorek jest tyle rzeczy, które możesz zrobić, a to naprawdę nowy program Animate.cs dla pragmatycznych animacji interfejsu użytkownika.

    Rzuć okiem na strona demonstracyjna aby zobaczyć to na żywo w akcji, możesz dowiedzieć się więcej, czytając ich “w trakcie tworzenia” słupek który opowiada o tym, jak zespół Shakr stworzył wtorek.