Az UI animációk hozzáadása a webhelyére

Sep 11, 2025

kézikönyv

A legtöbb ember naponta látja a felhasználói felületeket, függetlenül attól, hogy van-e egy mobilalkalmazásban vagy egy weboldalon, így fontos, hogy megfelelő módon hozza meg őket (a weboldal építője ezt egyszerűvé teszi az Ön számára), és ha meg tudod erősíteni őket néhány CSS animáció , annál jobb.

Fedezze fel a CSS animáció új határát

Az internetre építve, különösen az animációra, meg kell fontolnod a böngésző támogatását és teljesítményét (tisztességes) web hosting Segít itt). Ebben a bemutatóban két legjobb megoldást fogunk járni az UI animációk és átmenetek létrehozásához.

A CSS és a CSS kombinációját használjuk Greensock (GSAP). Mindannyian tisztában vagyunk a CSS-nek, de néhányan közülük nem tudják tisztában a GreenSock platformot. A Greensock egy JavaScript keret, amely lehetővé teszi, hogy könnyen hozzon létre lenyűgöző animációkat a HTML elemekkel csak néhány kód segítségével.

A képek és a logók sokkal többet jelentenek az elmúlt néhány évben. Milyen gyakran használjuk az emojis helyett a szöveget? Úgy tűnik, hogy a mobil navigáció az ikonokat használja, nem pedig a szöveg, és az idő múlásával a felhasználók megismerik, hogy hol fognak hozzánk. Elkezdjük létrehozni egy animált navigációs sávot, csak a logók használatával. Amikor mindegyik fölött lebeg, ez animálja a végső állapotot, ami hasonlít a képernyőképhez. Van egy csomó média hozzáadni? Visszaadja felhő tároló .

UI animations: icons — Van a hat navigációs ikon, és egyikük megmutatja, hogy mi a lebegő állapot, mint amikor az animáció befejeződött

Építsen a navigációt

Először is létrehozunk egy új index.html fájlt, és a navigációs területünket hat link segítségével állítjuk be. Minden link az ioniconokból vett ikonból áll. Minden egyes osztályhoz hozzá kell rendelnünk.

 & lt; div osztály = "Navigációbara" & gt;
& lt; egy href = "#" osztály = "Navlogo ion-ios-star-vázlat" & gt; & lt; a & gt;
& lt; egy href = "#" osztály = "Navlogo ion-ios-lista-vázlat" & gt; & lt; a & gt;
& lt; egy href = "#" osztály = "Navlogo ion-ios-chatboxes-vázlat" & gt; & lt; / a & gt;
& lt; egy href = "#" osztály = "Navlogo ion-ios-home-vázlat" & gt; & lt; a & gt;
& lt; egy href = "#" osztály = "Navlogo ion-ios-pie-vázlat" & gt; & lt; a & gt;
& lt; egy href = "#" osztály = "Navlogo ion-ios-sebességváltó" & gt; & lt; a & gt;
& lt; / div & gt;

A teljes HTML vagy CSS-dokumentumot részletesen nem fedjük le, de tudsz Szerezd meg a teljes kódlistát a Githubból .

Ezután létre kell hoznunk egy CSS-fájlt, amely szerint a stílus.css, majd be kell illeszteni a következő kódot az ioniconok importálásához:

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

Most beállítjuk az osztályt navlogo A mérnöki navigációs képekhez. Itt állítjuk be a pozíciót, a magasságot, a betűméretet stb.

 .navlogo {
  Pozíció: relatív;
  betűméret: 40px;
  Szélesség: 75px;
  Margó: 40px;
  Magasság: 75px;
  Vonalmagasság: 75px;
  Kijelző: inline-blokk;
  Szín: #FFF;
}

.navlogo: után {
  Pozíció: abszolút;
  Top: 0;
  alsó: 0;
  Bal: 0;
  Jobb: 0;
  Határ: 2PX szilárd # E6E6E6;
  tartalom: '';
  Z-index: -1;
  Border-sugara: 50%;
}

Ezután be kell állítanunk az animációt .navlogo elem. Itt megteremtjük a forgást és az átmeneti hatásokat, valamint megváltoztatjuk az elem színét a lebegéseken.

 .navlogo: korábban,
.navlogo: után {
  -Webkit-átmenet: mind a 0,45-es évek kielégítése;
  Átmenet: mind a 0,45-es évek kielégítése;
}
.navlogo: Hover,
.Navlogo: Aktív,
.navlogo.hová {
  Szín: # C0392B;
}
.Navlogo: Hover: Utána,
.navlogo: aktív: után,
.navlogo.hová: után {
  Border-Color: átlátszó # C0392B;
  -webkit-transzformáció: forgatás (360DEG);
  Átalakítás: forgatás (360DEG);
}

Végül hozzá kell adnunk egy olyan eseményt, amely eltávolítja a lebegőosztályt, amikor az egér már nem lebegett a logókon. Ez az, hogy megbizonyosodjon arról, hogy logónk jön ki az animációból. Hozzon létre egy új JavaScript fájlt, amelyet main.js neveznek, majd adja meg a következő kódot:

 $ (". Hover"). Mouseleave (
  funkció () {
    $ (ez) .removeclass ("Hover");
  }
);

Navigációnk készen áll a menni, kivéve néhány hiperhivatkozást. Ezt a CSS3 használatával sikerült elérnünk.

Hozzon létre és animáljon gombokat a terhelésen

UI animations: animated buttons — A gombok egyenként jelennek meg, egy másodperces késleltetéssel. Greensock lehetővé teszi, hogy ezt bármilyen HTML elemzel tegye meg

Most négy gombbal adunk hozzá az oldalunkra, és a Greensock könyvtárat lassan hozza létre az egyes gombokhoz, egymás után egy másodperces késleltetéssel. Ez egy szép átmeneti hatást eredményez.

Először újra meg kell újítani az index.html fájlt, és létrehozni kell a gomb részt az alábbi kód segítségével:

 & lt; div id = "Gombarea" & gt;
& lt; gombbal = "Anibutton" & gt; Háttérszín megváltoztatása & lt; / gomb és gt;
& lt; gombbal = "anibutton" & gt; 1. opció 1 & lt; / gomb és gt;
& lt; gomb osztály = "Anibutton" & gt; 2. opció & lt; / gomb és gt;
& lt; gombbal = "Anibutton" & gt; opció 3 & lt; / gomb és gt;
& lt; / div & gt;

Ezután be kell állítanunk egy utalást a Greensock könyvtárba a & lt; fej & gt; szakasz.

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

Végül be kell állítanunk animációnkat. Ez csak egy kódot vesz igénybe. Staggerfrom olyan funkció, amely elindítja az elemünk kezdési idejét. A zárójelben megadjuk az elem nevét. Ebben az esetben lenne .ANIBUtton . Azt is be kell állítanunk egy időtartamot, és ebben az esetben egy másodpercre van állítva Anibutton elem.

 Tweenmax.Staggerfrom (". Anibutton", 1, {Opacity: 0}, 1);

Háttér és elem színátmenet

UI animations: colour transition — Ez az, hogy az UI megnézi a háttér és a gomb átmenet egyik színétől a másikra

A következő dolog, amit meg fogunk nézni, átáll a weboldal háttere és gombjai egy színből a másikra. Nem gyakran találkoznak a funkció weboldalakon, bár biztosan érdekes dolgokat, mint a hozzáférhetőség vagy webes alkalmazás beállításait, ha a felhasználó esetleg szeretné beállítani saját színösszeállítás.

Győződjön meg róla, hogy van egy háttérszíne és egy határ- és szöveges színe, amely az oldalra beállítja az oldalt a stílus.css fájlban.

 .Anibutton {
Határ: 2PX Solid # 000;
Szín: # 000;
}

Ezután létrehozunk egy JavaScript funkciót a különböző Greensock színátmenetünk beállításához.

 Funkcióváltó ()
{
   Tweenmax.to ("test", 3, {backgroundimage: "lineáris-gradiens (balra, # 646580, # 212121)"});
   Tweenmax.to (". Anibutton", 3, {szín: "# fff"});
   Tweenmax.to (". Anibutton", 3, {Border: "2px szilárd #FFF"});
}

Több sötét módban keresünk, így a háttér sötét lesz, de a gombok fényt jelennek meg. Az első kódsor a háttérszínt három másodperc alatt sötétebb változatra változtatja. A második és a harmadik sor megváltoztatja a szöveg színét és határát fehérre három másodperc alatt.

Végül meg kell hívnunk Changebackground () az index.html fájlban található gombok egyike.

 & lt; gombbal = "anibutton" onclick = "Changebackground ()" & gt; Háttér megváltoztatása & lt; / gomb és gt;

A projekt most készen áll a futtatásra. Természetesen sok mindent tudsz hozzáadni azáltal, hogy új elemeket adunk hozzá, és megváltoztathatja a színstílust is.

Ezt a cikket eredetileg a 309. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon 309 kérdést vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

Animál és kapcsolja a címeket CSS-vel
5 tipp a szupergyors CSS-hez
Bevezetés a CSS egyedi tulajdonságaihoz

Az UI animációk hozzáadása a webhelyére

Építsen a navigációt

Hozzon létre és animáljon gombokat a terhelésen

Háttér és elem színátmenet

kézikönyv - Most Popular Articles

A madár rajzolása

Állítsa le a botokat a Google Recaptcha-val

Hangvezérelt UI létrehozása

Smart munka a ZBRUSH UI-vel

Használja a toll eszközt és textúrákat a Photoshop mélységének hozzáadásához

3D szöveges bemutató grafikus tervezők számára

Hogyan kell meggyőzni a meggyőző gondolatokat

Hogyan mozoghat a Daz Studio és a Cinema 4D

Kategóriák