Tambahkan animasi UI ke situs Anda

Sep 16, 2025

Bagaimana caranya

Kebanyakan orang melihat antarmuka pengguna setiap hari, apakah itu di dalam aplikasi seluler atau di situs web, jadi penting untuk melakukannya dengan benar saat membuatnya (a Pembangun Situs Web akan membuat ini sederhana untuk Anda), dan jika Anda dapat memeriahkannya dengan beberapa Animasi css. , Semuanya lebih baik.

Jelajahi perbatasan baru animasi CSS

Saat membangun untuk web, terutama ketika datang ke animasi, Anda harus mempertimbangkan hal-hal seperti dukungan dan kinerja browser (layak hosting web. akan membantu di sini). Dalam tutorial ini, kita akan memandu Anda melalui dua solusi terbaik untuk membuat animasi dan transisi UI.

Kami akan menggunakan kombinasi CSS dan Greensock. (GSAP). Kita semua sadar akan CSS tetapi beberapa dari Anda mungkin tidak mengetahui platform Greensock. Greensock adalah kerangka kerja Javascript yang memungkinkan Anda untuk dengan mudah membuat animasi menakjubkan dengan elemen HTML hanya menggunakan beberapa baris kode.

Gambar dan logo sangat menonjol lebih dari beberapa tahun terakhir. Seberapa sering kita menggunakan emoji daripada teks? Navigasi seluler tampaknya menggunakan ikon daripada teks dan seiring waktu pengguna mengetahui di mana masing-masing akan membawa kami. Kami akan mulai dengan membuat bilah navigasi animasi hanya menggunakan logo. Ketika Anda mengarahkan kursor ke masing-masing, itu akan menghidupkan ke kondisi akhir, yang akan terlihat mirip dengan tangkapan layar ini. Punya banyak media untuk ditambahkan? Mendukungnya penyimpanan awan .

UI animations: icons — Kami memiliki enam ikon navigasi dan salah satunya memamerkan apa yang akan terlihat oleh negara hover setelah animasi selesai

Bangun navigasi

Pertama-tama, kami akan membuat file index.html baru dan mengatur area navigasi kami bersama dengan enam tautan. Setiap tautan akan terdiri dari ikon yang diambil dari ionicons. Kita perlu menetapkan kelas untuk masing-masing.

 & lt; Div Class = "NavigationBar" & gt;
& lt; a href = "#" class = "navlogo ion-ios-star-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-list-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-chatboxes-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-home-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-pie-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-gear-outline" & gt; & lt; / a & gt;
& lt; / div & gt;

Kami tidak akan menutupi dokumen HTML atau CSS penuh secara detail tetapi Anda bisa Dapatkan daftar kode lengkap dari GitHub .

Selanjutnya, kita perlu membuat file CSS yang disebut style.css dan kemudian memasukkan baris kode berikut untuk mengimpor ionicons:

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

Kami sekarang akan mengatur kelas navlogo. untuk gambar navigasi kami di dalam stylesheet. Di sini kita akan mengatur posisi, tinggi, ukuran font, dll.

 .navlogo {
  Posisi: Relatif;
  Ukuran font: 40px;
  Lebar: 75px;
  Margin: 40px;
  Tinggi: 75px;
  Tinggi garis: 75px;
  Tampilan: blok inline;
  Warna: #fff;
}

.navlogo: setelah {
  Posisi: absolut;
  TOP: 0;
  Bawah: 0;
  Kiri: 0;
  Kanan: 0;
  Perbatasan: 2px solid # E6E6E6;
  kandungan: '';
  Z-index: -1;
  BORDER-RADIUS: 50%;
}

Selanjutnya, kita perlu mengatur animasi untuk kita .navlogo. elemen. Di sini kita akan membuat efek rotasi dan transisi, serta mengubah elemen warna pada hover.

 .navlogo: Sebelumnya,
.navlogo: setelah {
  -WebKit-transisi: Semua kesederhanaan 0.45;
  Transisi: Semua kesederhanaan 0.45;
}
.navlogo: hover,
.navlogo: aktif,
.navlogo.hover {
  Warna: # C0392B;
}
.navlogo: Hover: Setelah,
.navlogo: aktif: setelah,
.Navlogo.Hover: setelah {
  Border-Warna: Transparan # C0392B;
  -WebKit-Transform: Putar (360deg);
  Transformasi: Putar (360deg);
}

Akhirnya, kita perlu menambahkan suatu peristiwa yang menghilangkan kelas hover ketika mouse tidak lagi melayang di atas logo kita. Ini untuk memastikan bahwa logo kami keluar dari animasinya. Buat file javascript baru yang disebut main.js dan kemudian masukkan kode berikut:

 $ (". Hover"). Mouseleave (
  fungsi () {
    $ (ini) .RemoveClass ("hover");
  }
);

Navigasi kami sekarang siap untuk pergi, selain menambahkan beberapa hyperlink. Kami telah berhasil mencapai ini hanya dengan menggunakan CSS3.

Buat dan menghidupkan tombol pada beban

UI animations: animated buttons — Tombol-tombol akan muncul satu per satu dengan keterlambatan satu detik di antaranya. Greensock memungkinkan Anda melakukan ini dengan elemen HTML apa pun

Kami sekarang akan menambahkan empat tombol ke halaman kami dan menggunakan perpustakaan greensock untuk secara perlahan membawa setiap tombol, satu demi satu dengan penundaan satu detik. Ini akan menciptakan efek transisi yang bagus.

Pertama, kita perlu membuka kembali file index.html dan membuat bagian tombol kita menggunakan kode di bawah ini:

 & lt; div id = "buttonarea" & gt;
& lt; tombol kancing = "anibut" & gt; ubah warna latar belakang & lt; / tombol & gt;
& lt; tombol kelas = "anibut" & gt; opsi 1 & lt; / tombol & gt;
& lt; tombol kelas = "anibut" & gt; opsi 2 & lt; / tombol & gt;
& lt; tombol kelas = "anibut" & gt; opsi 3 & lt; / tombol & gt;
& lt; / div & gt;

Kami kemudian perlu mengatur referensi ke perpustakaan Greensock di dalam & lt; head & gt; bagian.

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

Akhirnya, kita perlu mengatur animasi kita. Ini hanya akan mengambil satu baris kode. StaggerFrom. adalah fungsi yang akan terhuyung-huyung waktu mulai dari elemen kami. Dalam kurung kami, kami menentukan nama elemen. Dalam hal ini akan terjadi .anibutton . Kita juga perlu menetapkan durasi dan dalam hal ini diatur ke satu detik antara masing-masing Anibut elemen.

 Tweenmax.StAgrom ('. Anibut', 1, {Opacity: 0}, 1);

Latar belakang dan transisi warna elemen

UI animations: colour transition — Ini adalah bagaimana UI akan menjaga latar belakang dan transisi tombol dari satu warna ke warna lainnya

Hal berikutnya yang akan kita lihat adalah transisi latar belakang situs web dan tombol dari satu warna ke warna lainnya. Kami tidak sering menemukan fitur ini di situs web, meskipun pasti akan menarik untuk hal-hal seperti aksesibilitas atau untuk preferensi aplikasi web ketika pengguna mungkin ingin mengatur skema warna mereka sendiri.

Pastikan Anda memiliki warna latar belakang dan pengaturan warna batas dan teks untuk halaman Anda di file style.css.

 .Anutibutton {
Perbatasan: 2px solid # 000;
Warna: # 000;
}

Selanjutnya, kami akan membuat fungsi JavaScript untuk mengatur berbagai transisi warna greensock kami.

 Fungsi ChangeBackground ()
{
   Tweenmax.to ("tubuh", 3, {BackgroundImage: "Linear-Gradient (ke kiri, # 646580, # 212121)"});
   Tweenmax.to (". Anibut", 3, {warna: "# fff"});
   Tweenmax.to (". Anibut", 3, {perbatasan: "2px solid #fff"});
}

Kami akan lebih dari tampilan mode gelap di sini, jadi latar belakang akan gelap tetapi tombol akan tampak ringan. Baris pertama kode akan mengubah warna latar belakang ke variasi yang lebih gelap selama tiga detik. Garis kedua dan ketiga akan mengubah warna dan batas teks menjadi putih selama tiga detik.

Akhirnya, kita perlu menelepon ubahbackground () Fungsi dari salah satu tombol kami yang ditemukan dalam file index.html.

 & lt; tombol class = "anibut" onclick = "ubahbackground ()" & gt; ubah latar belakang & lt; / gt;

Proyek ini sekarang siap untuk dijalankan. Tentu saja, Anda dapat pergi lebih jauh dengan menambahkan elemen baru dan mengubah gaya warna untuk itu juga.

Artikel ini awalnya diterbitkan dalam masalah 309 dari bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Beli masalah 309 di sini atau berlangganan di sini .

Artikel terkait:

Animasi dan beralih judul dengan CSS
5 Tips untuk CSS Super-Cepat
Pengantar Properti Kustom CSS

Tambahkan animasi UI ke situs Anda

Bangun navigasi

Buat dan menghidupkan tombol pada beban

Latar belakang dan transisi warna elemen

Bagaimana caranya - Artikel Terpopuler

Cara Storyboard di Photoshop

Cara mengimplementasikan mode cahaya atau gelap di CSS

Persiapan dengan pencetakan monotipe

Cara membuat strip komik manga otentik

5 hal yang tidak Anda ketahui dapat Anda lakukan dengan HTML

Cara menggambar angka basah

Cara membuat huruf 3D di Illustrator

Temukan underpainting dan cara memanfaatkannya terbaik

Kategori