Dodaj animacje UI na witrynę

Sep 15, 2025

Jak

Większość ludzi widzi wielokrotnie interfejsy użytkownika, niezależnie od tego, czy jest w środku aplikacji mobilnej, czy na stronie internetowej, więc ważne jest, aby uzyskać to dobrze podczas ich tworzenia (a Kreator strony internetowej zrobi to proste dla Ciebie), a jeśli możesz je ożywić Animacja CSS. , tym lepiej.

Przeglądaj nową frontier animacji CSS

Podczas budowy dla sieci, szczególnie jeśli chodzi o animację, musisz wziąć pod uwagę rzeczy, takie jak wsparcie i wydajność przeglądarki (przyzwoita hosting pomoże tutaj). W tym samouczku zamierzamy przejść przez dwa najlepsze rozwiązania do tworzenia animacji i przejść do interfejsu użytkownika.

Będziemy używać kombinacji CSS i Greensock. (GSAP). Wszyscy jesteśmy świadomi CSS, ale niektórzy z was mogą nie być świadomi platformy GreenSock. Greensock to ramy javascript, które umożliwia łatwe tworzenie oszałamiających animacji z elementami HTML za pomocą kilku linii kodu.

Obrazy i logo są szczególnie wyrównane o wiele więcej w ciągu ostatnich kilku lat. Jak często używamy emojis zamiast tekstu? Mobilne nawigacje wydają się korzystać z ikon, a nie tekst i użytkowników czasu, aby dowiedzieć się, gdzie nas zabierze. Zaczniemy, tworząc animowany pasek nawigacyjny tylko za pomocą logo. Kiedy się unosiłeś nad każdym, będzie animować do stanu ostatniego, który będzie wyglądał podobnie do tego zrzutu ekranu. Dostałem wiele mediów do dodania? Z powrotem magazyn w chmurze .

UI animations: icons — Mamy sześć ikon nawigacji i jeden z nich pokazuje, co będzie wyglądał stan Hover po zakończeniu animacji

Zbuduj nawigację.

Przede wszystkim utworzymy nowy plik index.html i skonfigurował nasz obszar nawigacyjny wraz z sześcioma linkami. Każde łącze zostanie złożone z ikony pobranej z jonikonów. Musimy przypisać klasę do każdego.

Nie będziemy szczegółowo zakryć pełnego dokumentu HTML ani CSS, ale możesz Uzyskaj pełną listę kodów z GitHub .

Następnie będziemy musieli utworzyć plik CSS, który jest nazywany Style.CSS, a następnie włóż następujący wiersz kodu do importu jonikonów:

 @import URL (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.csssss);

Teraz skonfigurujemy klasę Navlogo. Dla naszych obrazów nawigacyjnych wewnątrz arkusza stylów. Tutaj skonfigurujemy pozycję, wysokość, rozmiar czcionki itp.

 .navlogo {
  Pozycja: krewna;
  Rozmiar czcionki: 40px;
  Szerokość: 75px;
  Marża: 40px;
  Wysokość: 75px;
  Wysokość linii: 75px;
  Wyświetlacz: blok inline;
  Kolor: #FFF;
}

.navlogo: Po {
  pozycja: absolutna;
  Top: 0;
  Dół: 0;
  Po lewej: 0;
  Prawo: 0;
  Granica: 2px Solid # E6E6e6;
  zawartość: '';
  z-indeks: -1;
  Radius Radio: 50%;
}

Następnie musimy skonfigurować animację dla naszego .navlogo. element. Tutaj stworzymy efekty obrotowe i przejściowe, a także zmianę koloru elementu na HOVER.

 .navlogo: wcześniej,
.navlogo: Po {
  -Webkit-przejście: wszystkie 0,45s łatwość out;
  przejście: wszystkie 0,45s łatwość out;
}
.navlogo: Hover,
.navlogo: aktywny,
.navlogo.hover {
  kolor: # C0392B;
}
.navlogo: Hover: Po,
.navlogo: aktywny: po,
.navlogo.hover: Po {
  Border-Color: przezroczysty # C0392B;
  -Webkit-transformacja: Obróć (360deg);
  Transform: Obróć (360deg);
}

Wreszcie, będziemy musieli dodać zdarzenie, które usuwa klasę HOVER, gdy mysz nie unosi się już nad naszymi logo. Ma to upewnić się, że nasze logo wychodzi z jego animacji. Utwórz nowy plik JavaScript o nazwie Main.js, a następnie wprowadź następujący kod:

 $ (". HOVER"). MouseLeave (
  Funkcja () {
    $ (to) .removeclass ("hover");
  }
);

Nasza nawigacja jest teraz gotowa do wyjazdu, oprócz dodawania niektórych hiperłączy. Udało nam się to osiągnąć za pomocą CSS3.

Utwórz i animuj przyciski na ładowaniu

UI animations: animated buttons — Przyciski pojawią się jeden po drugim o jedną drugą opóźnienie pomiędzy. Greensock umożliwia to z każdym elementem HTML

Teraz dodamy cztery przyciski na naszą stronę i użyjemy biblioteki GreenSock, aby powoli wprowadzić każdy przycisk, jeden po drugim z drugim opóźnieniem. Spowoduje to stworzenie fajnego efektu przejścia.

Po pierwsze, będziemy musieli ponownie otworzyć plik index.html i utwórz sekcję przycisku za pomocą poniższego kodu:

Następnie musimy skonfigurować odniesienie do biblioteki GreenSock wewnątrz Head & GT; Sekcja.

 Skrypt SRC = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js" & gt; & lt; / script & gt;

Wreszcie musimy skonfigurować naszą animację. Spowoduje to tylko jeden wiersz kodu. Zataczający się jest funkcją, która zauważy czas rozpoczęcia naszego elementu. W naszych nawiasach określamy nazwę elementu. W takim przypadku byłoby .anibutton. . Musimy również ustawić czas trwania iw takim przypadku jest ustawiony na jedną sekundę między każdym Aniburtton. element.

 Tweenmax.stagager z (". Anibutton ', 1, {nieprzezroczystość: 0}, 1);

Tło i elementu Przejście kolorowe

UI animations: colour transition — W ten sposób przeglądanie interfejsu użytkownika i przejścia z jednego koloru do drugiego

Następną rzeczą, na którą zamierzamy spojrzeć na przejście na stronie internetowej i przyciski z jednego koloru do drugiego. Nie spotykamy tej funkcji na stronach internetowych, chociaż na pewno byłoby interesujące dla rzeczy jak dostępność lub do preferencji aplikacji internetowych, gdy użytkownik może być chciał ustawić własny schemat kolorów.

Upewnij się, że masz kolor tła i kolorowy kolorowy kolor ustawiony na stronie w pliku Style.css.

 .anibutton {
Granica: 2px Solid # 000;
kolor: # 000;
}

Następnie utworzymy funkcję JavaScript, aby skonfigurować nasze różne przejścia kolorów GreenSock.

 Funkcja Handlaberground ()
{
   Tweenmax.to ("Body", 3, {Backgroundimage: "Liniowy gradient (do lewej, # 646580, # 212121)"});
   Tweenmax.to (". Anibutton", 3, {kolor: "# fff"});
   Tweenmax.to (". Anibutton", 3, {Granica: "2px Solid #FFF"});
}

Idziemy tu na więcej wyglądu, więc tło będzie ciemne, ale przyciski pojawią się światło. Pierwsza linia kodu zmieni kolor tła do ciemniejszej zmienności przez okres trzech sekund. Druga i trzecia linia zmieni kolor i obramowanie tekstu na białe przez okres trzech sekund.

Wreszcie, będziemy musieli zadzwonić Zmień tło() Funkcja z jednego z naszych przycisków znajdujących się w pliku index.html.

 & LT; przycisku Class = "Anibutton" OnClick = "Handbackground ()" & GT; zmień tło

Projekt jest teraz gotowy do uruchomienia. Oczywiście możesz dużo iść dalej dalej, dodając nowe elementy i zmieniając także styl koloru dla tych.

Ten artykuł został pierwotnie opublikowany w wydaniu 309 z netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 309 tutaj lub Subskrybuj tutaj .

Powiązane artykuły:

Animuj i przełącz tytuły z CSS
5 wskazówek dotyczących super szybkich CSS
Wprowadzenie do właściwości niestandardowych CSS

Dodaj animacje UI na witrynę

Zbuduj nawigację.

Utwórz i animuj przyciski na ładowaniu

Tło i elementu Przejście kolorowe

Jak - Najpopularniejsze artykuły

Uzyskaj więcej z grafitu z tymi wskazówkami

Wprowadzenie do właściwości niestandardowych CSS

Utwórz reagujący układ z siatką CSS

Master The Bridge Tool

Maluj jak impresjonista

Strategia doświadczenia użytkownika Master

Jak renderować fotorealistyczne niebo

Jak doskonalić włosy w portretach

Kategorie