Buat animasi UI Slick

Semakin sering, desainer dan pengembang mengakui pentingnya desain gerak dalam konteks pengalaman pengguna . Animasi di web tidak lagi menjadi cara untuk menyenangkan dan wow pengguna tetapi alat fungsional yang membuat pengalaman mudah, menyenangkan, dan mudah diingat. Dan ada sejumlah alat dan pendekatan yang berbeda yang tersedia, dari Animasi css. untuk teknik menggunakan bootstrap atau html.

Animasi dalam konteks antarmuka pengguna masih merupakan bidang yang sangat baru. Tidak banyak sumber daya di luar sana yang mengajarkan praktik terbaik atau menunjukkan pola umum animasi UI yang bisa kita ikuti. Sebagian besar waktu, ini tentang eksperimen, Pengujian Pengguna Dan mungkin sedikit trial and error.

• 15 Tutorial Desain Web Responsif

Jadi dalam tutorial ini, kami akan membuat sesuatu yang tidak bingung, mengikuti pola umum dan bergaya. Ini akan menjadi bagian profil tim yang sering Anda lihat di situs web perusahaan. Idenya adalah untuk menunjukkan sedikit informasi tentang anggota tim / staf ketika masing-masing dilayang. Sepanjang tutorial kita akan menggunakan Codepen, tetapi tentu saja Anda dapat menggunakan lingkungan editor dan pengembangan favorit Anda sendiri. Ingat, menciptakan situs yang lebih kompleks mungkin mengubah Anda hosting web. Kebutuhan jadi pastikan Anda punya layanan yang berfungsi untuk Anda.

Apakah Anda ingin alat langsung untuk membuat situs? Gunakan brilian Pembangun Situs Web .

01. Atur

Mulailah dengan membuka codepen dan membuat pena baru. Kita akan menggunakan bootstrap 4 dan SASS (.scss), jadi pastikan bahwa dalam pengaturan Anda menyertakan bootstrap CSS dan JS sebagai tautan sumber daya Anda dan juga mengatur CSS ke SCS. Tautan sumber daya lain yang perlu Anda tambahkan adalah font yang luar biasa, yang akan kami gunakan untuk ikon sosial kami.

02. Buat wadah, baris, dan kolom

Wadah adalah apa yang digunakan bootstrap sebagai elemen tata letak dasarnya dan mereka diperlukan ketika Anda menggunakan sistem grid default. Dalam wadah, Anda perlu menambahkan berturut-turut. Baris adalah pembungkus untuk kolom dan Anda dapat menentukan jumlah kolom yang Anda inginkan dari kemungkinan 12 dan apa breakpoint. Dalam kasus kami, kami ingin elemen yang memiliki breakpoint berukuran sedang dan mengisi tiga kolom.

 & lt; div class = "wadah" & gt;
 & lt; kelas div = "baris" & gt;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Tambahkan tautan gambar dan warna di sini
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Tetapkan gambar profil dan warna

Elemen UI profil pertama yang akan kita mulai akan untuk anggota tim wanita dan dia akan menjadi bagian dari tim biru. Warnanya akan ditentukan menggunakan kelas yang disebut biru dan warna aktual pada akhirnya akan didefinisikan menggunakan variabel SASS, yang akan kita lakukan dalam langkah selanjutnya. Maka kita perlu menambahkan foto dan memberikannya kelas yang disebut foto.

 & lt; div class = "tim biru" & gt;
    & lt; div class = "Foto" & gt;
       & lt; img src = "https://image.bb.co/kcbgms/profile_test02.jpg" Alt = "Libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Tambahkan nama profil dan judul

Bit terakhir HTML yang akan ditambahkan adalah untuk nama, judul dan ikon sosial, yang akan ditambahkan di bawah tag div terakhir yang baru saja kami tambahkan pada langkah terakhir. Untuk ikon sosial, kami akan menggunakan font yang luar biasa dan ini akan ditempatkan dalam daftar yang tidak teratur.

 & lt; div class = "profil-txt" & gt;
      & lt; h1 class = "title" & gt; libby & lt; / h1 & gt;
      & lt; span class = "posisi" & gt; desainer web & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul class = "ikon sosial" & gt;
       & lt; li & gt; & lt; a href = "" class = "fa-facebook" & gt; & lt; / a & gt; & li & gt;
       & lt; li & gt; & lt; a href = "" kelas = "fa fa-twitter" & gt; & lt; / a & gt; & li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-linkedin" & gt; & lt; / a & gt; & li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa-dribbble" & gt; & lt; / a & gt; & li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Tetapkan variabel SASS

Jika Anda mengikuti menggunakan Codepen, maka Anda sudah menginstal SASS dan siap untuk pergi. Anda hanya perlu mengklik ikon / tombol pengaturan pena dan pilih SCS sebagai preprocessor CSS Anda. Maka kita dapat melanjutkan dan menambahkan beberapa variabel yang akan menyimpan semua warna kita. Kami telah menggunakan RGBA sebagai nilai warna untuk memungkinkan kami kontrol yang lebih bermakna terhadap semua opacity warna.

 $ Bluegradient: RGBA (103, 188, 223, .8);
$ Lallgreen: RGBA (188, 219, 183, .5);
$ hijau: RGBA (119, 180, 109, 0,5);
$ Green-Border: RGBA (171, 221, 164, 0,5);
$ Biru: RGBA (80, 205, 227, 1);
$ Biru Batas: RGBA (147, 223, 236, 1); 

06. Unggah gambar latar belakang

Untuk membuat segalanya terlihat lebih menarik, kita akan menempatkan gambar latar belakang yang bagus di tubuh. Di sini kita dapat menggunakan kumpulan variabel pertama kami dan memberikan gambar latar belakang overlay gradien yang menyenangkan yang beralih dari hijau muda ke biru. Kemudian untuk membuat gambar latar belakang kami sepenuhnya responsif, kami akan mengatur ketinggian tampilan hingga 100VH.

 Tubuh {
 Latar Belakang: Linear-Gradient (to Right, $ Lightgreen, $ bluegradient), URL ('https://image.bb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') tidak berulang;
 ukuran latar belakang: penutup;
 Posisi: Relatif;
 Tinggi: 100VH;
 } 

07. Pilih latar belakang profil dan gambar

Setiap profil tim akan diberi gaya yang sama dan tim kelas akan digunakan untuk ini. Latar belakang akan menjadi putih, semua konten berpusat dan kita perlu memastikan posisi diatur ke relatif. Maka kami dapat memasukkan CSS untuk gambar profil. Untuk hasil terbaik, pastikan gambar asli yang Anda gunakan memiliki dimensi tidak lebih dari 200px Square. Namun, kami akan mengubah ketinggian dan lebar dalam aturan CSS foto.

 .Team {
 Padding: 30px 0 40px;
 margin-top: 60px;
 latar belakang: #fff;
 Teks-Align: Center;
 Overflow: Tersembunyi;
 Posisi: Relatif;
 kursor: pointer;
 box-shadow: 0 0 25px 1px rgba (0,0,0,0.3);
 .photo {
 Tampilan: blok inline;
 Lebar: 130px;
 Tinggi: 130px;
 margin-bottom: 50px;
 Posisi: Relatif;
 Z-index: 1;
 }
 } 

08. Tambahkan animasi

Animasi pertama yang akan kami tambahkan akan berada di bagian atas elemen profil kami. Idenya adalah ketika kita melayang di seluruh elemen, bentuk bundar biru akan menghidupkan. Kita dapat mengontrol berapa banyak biru yang bisa kita lihat dengan menentukan posisi ini untuk memiliki persentase terbawah. Jadi mainkan dengan persentase ini dan Anda akan mendapatkan ide yang lebih baik tentang cara kerjanya. Anda tidak pernah tahu: Anda bahkan mungkin menemukan efek yang lebih baik!

 .BLUE .FOTO: Sebelum {
 kandungan: "";
 Lebar: 100%;
 Tinggi: 0px;
 BORDER-RADIUS: 50%;
 Latar Belakang: $ Biru;
 Posisi: absolut;
 Bawah: 130%;
 Kanan: 0;
 Kiri: 0;
 Transformasi: Skala (3);
 Transisi: Semua 0,3 linear 0s;
}
.team: hover .photo: sebelum {
 Tinggi: 100%;
} 

09. Animasi foto tim

Foto tim adalah titik fokus kami dalam UI ini dan mungkin merupakan elemen yang paling jelas yang Anda harapkan untuk menghidupkan dalam beberapa bentuk atau bentuk. CSS yang akan kami tambahkan pada langkah ini pertama-tama akan mengubah foto menjadi lingkaran yang lebih kecil, lalu ketika melayang di sana akan menjadi batas biru muda yang ditambahkan ke sana dan foto akan menyala bersama dengan perbatasan. Dengan transisi ditambahkan, kami mendapatkan animasi cairan yang bagus.

 .BLUE .pic: setelah {
 kandungan: "";
 Lebar: 100%;
 Tinggi: 100%;
 BORDER-RADIUS: 50%;
 Latar Belakang: $ Biru;
 Posisi: absolut;
 TOP: 0;
 Kiri: 0;
 Z-index: 1;
}
.team .photo img {
 Lebar: 100%;
 Tinggi: otomatis;
 BORDER-RADIUS: 50%;
 Transformasi: Skala (1);
 Transisi: Semua 0.9 memudahkan 0s;
}
.blue: hover .photo img {
 box-shadow: 0 0 0 14px $ blue-border;
 Transformasi: Skala (0,6);
 }

10. Tweak Nama Profil dan Posisi

Nama profil dan posisi perlu sedikit merapikan. Ini tidak akan dianimasikan tetapi itu seharusnya tidak menghentikan Anda untuk menambahkan animasi Anda sendiri ke ini jika Anda mau. Mungkin skala mereka sedikit di hover, karena Anda akan memiliki cukup ruang karena pengubahan ukuran foto.

 .profile-txt {
 margin-bottom: 30px;
 .title {
 Ukuran font: 2REM;
 Font-weight: 700;
 Warna: # 333;
 Surat-spasi: 1.5px;
 Teks-transformasi: memanfaatkan;
 margin-bottom: 6px;
 }
 .posisi{
 Tampilan: blok;
 Ukuran font: 1REM;
 Warna: # 555;
 }
} 

11. Tambahkan ikon sosial

Ikon sosial pertama-tama akan diposisikan dari bagian bawah halaman oleh -100px. Kemudian ketika kita melayang di atasnya, posisi bawah akan diatur ke nol dan dengan transisi ditambahkan, ini akan memberi kita animasi halus yang bagus saat bergerak kembali ke tampilan. Ikon akan diberikan keadaan hover mereka sendiri, mengatur latar belakang mereka menjadi putih dan ikon menjadi biru.

 .BLUE .COCIAL-ICONS {
 Lebar: 100%;
 Daftar-Gaya: Tidak Ada;
 Padding: 0;
 MARGIN: 0;
 Latar Belakang: $ Biru;
 Posisi: absolut;
 Bawah: -100px;
 Kiri: 0;
 Transisi: Semua kemudahan 0,6;
 li {
 Tampilan: blok inline;
 
 Sebuah {
 Tampilan: blok;
 Padding: 8px;
 Ukuran font: 1REM;
 Warna: #fff;
 dekorasi teks: tidak ada;
 Transisi: Semua 0,5 lebih mudah;
 & amp;: hover {
 Warna: $ biru;
 latar belakang: #fff;
 }
 }
 }
}
.team: hover .social-icons {
 Bawah: 0px;
} 

12. Buat anggota tim hijau

Untuk sedikit mencampur, kita dapat mulai menambahkan lebih banyak anggota ke tim kita. Warna yang akan kita gunakan untuk yang berikutnya akan menjadi hijau. Tetapi pertama-tama kembali ke bagian / file HTML dan yang perlu kita lakukan adalah menyalin kelas col-md-3 - bukan baris - turun ke tag div terakhir di bawah ikon sosial dan menempelkannya.

 & lt; div class = "tim hijau" & gt;
 & lt; div class = "Foto" & gt;
 & lt; img src = "https://image.bb.co/mprlns/mick_ui.jpg" Alt = "Libby" & gt;
 & lt; / div & gt; 

Setelah Anda mengubah kelas biru menjadi hijau, kita akhirnya dapat menambahkan semua CSS yang akan memberi kita animasi yang sama.

 .Green: hover .photo img {
 box-shadow: 0 0 0 14px $ garis hijau;
 Transformasi: Skala (0,6);
 }
.green .photo: sebelum {
 kandungan: "";
 Lebar: 100%;
 Tinggi: 0px;
 BORDER-RADIUS: 50%;
 Latar belakang: $ hijau;
 Posisi: absolut;
 Bawah: 135%;
 Kanan: 0;
 Kiri: 0;
 Transformasi: Skala (3);
 Transisi: Semua 0,3 linear 0s;
}
.Green. Ikon-ikon {
 Lebar: 100%;
 Daftar-Gaya: Tidak Ada;
 Padding: 0;
 MARGIN: 0;
 Latar belakang: $ hijau;
 Posisi: absolut;
 Bawah: -100px;
 Kiri: 0;
 Transisi: Semua kemudahan 0,6;
 li {
 Tampilan: blok inline;
 Sebuah {
 Tampilan: blok;
 Padding: 8px;
 Ukuran font: 1REM;
 Warna: #fff;
 dekorasi teks: tidak ada;
 Transisi: Semua 0,5 lebih mudah;
 & amp;: hover {
 Warna: $ hijau;
 latar belakang: #fff;
 }
 }
 }
} 

Dan keindahan pendekatan ini adalah Anda dapat mengulangi seperti yang diperlukan untuk banyak kelas warna yang berbeda, memungkinkan Anda untuk secara halus tema animasi UI Anda.

Jika Anda sedang membangun situs dengan tim, pastikan Anda dapat diandalkan, aman penyimpanan awan untuk menjaga hal-hal yang kohesif.

Artikel ini awalnya diterbitkan dalam masalah 307 dari bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Beli Masalah 307. atau Berlangganan ke NET. .

Ingin belajar lebih banyak tentang seluk beluk animasi UI?

Jika Anda tertarik untuk mempelajari lebih lanjut tentang bagaimana Anda dapat membuat situs Anda pop dan berkilau menggunakan animasi ui yang ramping, pastikan Anda telah mengambil tiket Anda Hasilkan London. .

Desainer dan pengembang front-end saat ini bekerja sebagai pengembang kreatif untuk asemblr.com, Steven Roberts akan memberikan pembicaraannya - animasi CSS: Di luar transisi - di mana ia akan menunjukkan kepada Anda alat terbaik untuk pekerjaan itu dan menciptakan kembali beberapa animasi terbaik Web harus ditawarkan, sambil menemukan kemungkinan dan keterbatasan animasi hanya dengan CSS.

Hasilkan London berlangsung dari 19-21 September 2018. Dapatkan tiket Anda sekarang .

Artikel terkait:

• Cara menggunakan animasi di aplikasi seluler
• Panduan Pro untuk Desain UI
• Panduan pemula untuk merancang animasi antarmuka