Tutorial Interaksi Mikro untuk Pengembang Pemula: Cara Membuat Tombol “Suka” Interaktif Dengan CSS dan JavaScript

Tutorial Interaksi Mikro untuk Pengembang Pemula: Cara Membuat Tombol “Suka” Interaktif Dengan CSS dan JavaScript

Tutorial Interaksi Mikro untuk Pengembang Pemula: Cara Membuat Tombol “Suka” Interaktif Dengan CSS dan JavaScript
СОДЕРЖАНИЕ
02 июня 2020

Tutorial Interaksi Mikro untuk Pemula


Saya pikir aman untuk mengatakan bahwa interaksi mikro itu keren. Kami – orang web – secara universal semua menikmatinya. Dan tidak masalah apakah Anda memperhatikannya atau tidak, mereka memberikan peningkatan pengalaman pengguna yang signifikan. Dengan membuat situs web atau alat web Anda menjadi hidup secara halus dan dengan cara yang ramah, mereka hanya membuat pengguna menikmati seluruh interaksi sedikit lebih.

Dengan semangat itu, saya ingin memberi Anda tutorial interaksi mikro singkat dan menunjukkan kepada Anda cara membuat yang keren "Suka" tombol untuk situs Anda. Dengan kode minimal. Ini dia sedang beraksi:

Cukup mengasyikkan untuk tombol jempol, bukan? Mari kita mulai!

Tapi pertama-tama:

Mengapa repot-repot dengan interaksi mikro di tempat pertama?

Saya tidak akan mencoba meyakinkan Anda terlalu banyak di sini, tapi mari kita lihat beberapa hal.

Mikro-interaksi telah ada untuk sementara waktu – cukup sehingga mereka bisa melakukannya buku penuh menulis tentang mereka. Selain itu, ada banyak eksperimen dan penelitian yang melihat seberapa bermanfaat dan efektifnya mereka sebenarnya.

Salah satu rumah penelitian paling terkenal, Nielsen Norman Group, lebih banyak melihat interaksi mikro erat pada tahun 2018. Sesuai kesimpulan mereka, interaksi mikro telah terbukti, antara lain, meningkatkan pengalaman pengguna dengan mendorong keterlibatan, dan mengkomunikasikan merek..

Singkatnya, interaksi mikro dapat benar-benar bermanfaat jika digunakan dengan benar dan, juga, tidak terlalu banyak. Hari ini, kami akan menunjukkan kepada Anda satu contoh sederhana dari interaksi mikro dalam aksi:

Tutorial interaksi mikro: Markup dan CSS dasar dari tombol jempol kami

�� Catatan; di bagian bawah, kami memiliki beberapa opsi untuk Anda yang tidak melibatkan penulisan kode dengan tangan.

Pertama-tama, kita membutuhkan sihir HTML dan CSS lama yang bagus untuk membuatnya berfungsi. Strukturnya cukup mudah.

Kita akan menggunakan tag SVG untuk ikon sejenisnya sendiri – ini dari Font yang mengagumkan; Anda dapat menemukan sebagian besar ikon sini. Hanya untuk menyesuaikan atribut lebar dan tinggi dari tag SVG, kami akan menggunakan HTML di bawah ini:

Sekarang untuk CSS, kita akan menjadi dasar nyata. Apa yang kami inginkan terjadi di sini adalah memberikan tampilan yang bagus pada tombol suka kami dan meletakkan semuanya dengan baik di layar. Kami sudah tahu bahwa kami akan beralih kelas setelah klik (kelas aktif), jadi kami perlu menjelaskannya. Kami akan mengisi ikon dengan warna biru saat aktif dan abu-abu gelap saat tidak:

tubuh {
display: flex;
menyelaraskan item: pusat;
justify-content: center;
tinggi: 100vh;
}

.tombol suka {
display: flex;
menyelaraskan item: pusat;
justify-content: center;
}

.like-button.active {
-webkit-animasi: pop 0.9s keduanya;
animasi: pop 0.9s keduanya;
}

.like-button svg {
opacity: 1;
}

.like-button svg path {
isi: # 333;
transisi: isi .4s pelonggaran;
}

.like-button.active svg path {
isi: # 2196f3;
}

Hal lain yang kami inginkan di sini adalah animasi pop yang digunakan ketika tombol menjadi aktif, jadi kami akan menambahkannya ke file CSS kami:

@ -webkit-keyframes pop {
0% {
-webkit-transform: scale3d (1, 1, 1);
transform: scale3d (1, 1, 1);
}
30% {
-webkit-transform: scale3d (1.25, 0.75, 1);
transform: scale3d (1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d (0.75, 1.25, 1);
transform: scale3d (0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d (1.15, 0.85, 1);
transform: scale3d (1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d (0.95, 1.05, 1);
transform: scale3d (0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d (1.05, 0.95, 1);
transform: scale3d (1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d (1, 1, 1);
transform: scale3d (1, 1, 1);
}
}

@keyframes pop {
0% {
-webkit-transform: scale3d (1, 1, 1);
transform: scale3d (1, 1, 1);
}
30% {
-webkit-transform: scale3d (1.25, 0.75, 1);
transform: scale3d (1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d (0.75, 1.25, 1);
transform: scale3d (0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d (1.15, 0.85, 1);
transform: scale3d (1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d (0.95, 1.05, 1);
transform: scale3d (0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d (1.05, 0.95, 1);
transform: scale3d (1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d (1, 1, 1);
transform: scale3d (1, 1, 1);
}
}

Itu "interaksi" bagian dari tutorial interaksi mikro ini

Sekarang setelah kita mendapatkan penataan dasar, sudah saatnya untuk menangani interaksi yang sebenarnya – itu artinya JavaScript!

Pertama-tama, kita akan membutuhkan fungsi JavaScript yang menghasilkan bilangan bulat acak antara interval yang diberikan (minimum dan maksimum):

function randomInt (min, max) {
return Math.floor (Math.random () * (maks – min + 1) + min);
}

Selanjutnya, kami akan membutuhkan fungsi lain yang mengembalikan +1 atau -1 secara acak sehingga kami dapat memiliki nilai negatif atau positif acak:

fungsi plusOrMinus () {
return Math.random () < 0,5? -1: 1;
}

Sekarang untuk penanganan interaksi aktual; mari kita lihat kode untuk menjelaskannya dengan benar:

  • Pertama, kami akan menyimpan tombol kami di variabel dan menambahkan pendengar acara klik ke sana.
  • Ketika tombol diklik, kami akan menambahkan fungsi preventDefault () sehingga kami yakin bahwa tidak ada yang tidak diinginkan terjadi.
  • Setelah itu, kami akan menambahkan kelas aktif kami ke tombol, yang sebelumnya ditata dengan warna biru melalui CSS.
  • Kemudian kita akan menjalankan fungsi generateClones () (yang belum didefinisikan), melewati tombol kami sebagai parameter melalui ini.

biarkan tombol = document.querySelector (".tombol suka");

button.addEventListener ("klik", function (e) {
e.preventDefault ();
this.classList.toggle ("aktif");
menghasilkanClones (ini);
});

Sekarang mari kita definisikan fungsi generateClones () dan jalankan melalui langkah-langkah berikut ini:

  1. Pertama, mari kita putuskan jumlah klon acak. Kami akan instantiate antara dua dan empat klon untuk ikon. Kami akan menggunakan fungsi randomInt () yang didefinisikan sebelumnya.
  2. Lalu, untuk setiap klon, kami akan menggunakan tag SVG di dalam tombol kami sebagai a "model" dan gunakan fungsi JavaScript cloneNode (true) untuk mengkloningnya menjadi variabel baru. Kami juga akan menentukan ukuran antara 5 dan 16 untuk klon kami menggunakan fungsi generator integer acak.
  3. Selanjutnya, kami akan menambahkan klon kami ke tombol, mengatur lebar dan tinggi mereka dengan nomor yang dihasilkan sebelumnya, dan menjadikan posisi mereka absolut sehingga kami dapat memindahkannya secara independen dari tombol.
  4. Hal lain yang kami butuhkan adalah transisi untuk klon kami, jadi mereka tidak hanya muncul di tempat baru ketika mengklik.
  5. Sekarang, untuk menambahkan transformasi aktual yang akan menggerakkan ikon kita, kita akan menjadi sedikit gila. Kami ingin klon kami bergerak dari tengah tombol ke luar secara acak. Menggunakan kombinasi fungsi randomInt () dan plusOrMinus () kami, kami akan memindahkan klon kami di sumbu XY dengan properti CSS translate3d. Kami juga akan menggunakan a "retas", karena transisi kita tidak akan berlaku sebaliknya. Jadi menambahkan fungsi setTimeout () yang sederhana akan membantu kita mencapainya. Pada saat yang sama, kami akan memindahkan opacity ke 0, membuat klon menghilang.
  6. Menghapus klon kami. Kita harus menjernihkan DOM setelah kita selesai dengan semua jazz. Jadi kami membutuhkan fungsi setTimeout () lain yang akan menghapus klon kami dari DOM setelah satu detik.

menghasilkanClones (tombol) {
// 1. Hasilkan klon dan ulangi nomor yang ditentukan
biarkan klon = randomInt (2, 4);
untuk (biarkan = 1; <= klon; itu ++) {
// 2. Dapatkan klon tag SVG dalam sebuah variabel dan buat ukuran acak
biarkan clone = button.querySelector ("svg") .cloneNode (true),
size = randomInt (5, 16);
// 3. Tambahkan klon kami ke tombol dan ubah ‘lebar / tinggi / posisinya
button.appendChild (clone);
clone.setAttribute ("lebar", ukuran);
clone.setAttribute ("tinggi", ukuran);
clone.style.position = "mutlak";
// 4. Tambahkan beberapa transisi mencolok
clone.style.transition =
"mengubah 0.5s cubic-bezier (0.12, 0.74, 0.58, 0.99) 0.3s, opacity 1s easy-out .5s";
// 5. Menghidupkan ikon kita ke luar dengan fungsi setTimeout sehingga CSS sesuai.
biarkan animTimeout = setTimeout (function () {
clone.style.transform =
"translate3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"px, 0)";
clone.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. Menghapus klon setelah 0,9 detik
biarkan removeNodeTimeout = setTimeout (function () {
clone.parentNode.removeChild (clone);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

Itu dia! Kami telah berhasil sampai akhir! Di bawah Anda akan menemukan contoh CodePen:

Lihat Pena
Seperti Button
oleh Andrei Băicuș (@abaicus)
di CodePen.

Terima kasih sudah melalui ini!

Opsi lain untuk menambahkan interaksi mikro ke WordPress

Jika menulis kode secara manual bukan sepenuhnya urusan Anda, sebenarnya ada beberapa plugin WordPress yang dapat Anda gunakan untuk mendapatkan interaksi mikro ke situs Anda tanpa perlu khawatir tentang bagaimana semuanya bekerja di bawah tenda.

Pertama, Anda bisa menggunakan Menghidupkannya! plugin untuk menghidupkan hampir semua elemen di halaman Anda menggunakan CSS3.

Misalnya, Anda dapat menambahkan tombol, atau sepotong teks, dan kemudian mengaturnya untuk menghidupkan dengan cara tertentu pada klik.

Berikut ini contoh apa yang dapat dilakukan plugin – video ��.


Menghidupkannya!

Penulis: Studio Desain eLEOPARD


Peringkat 100%


40.000 + Pemasangan


4.7.0 Persyaratan

Info lebih lanjut

animate-it.2.3.7.zip

Versi Saat Ini: 2.3.7

Terakhir Diperbarui: 20 Maret 2020


Peringkat 100%


40.000 + Pemasangan


4.7.0 Persyaratan

Halaman Plugin WordPress.org


Menghidupkannya!

Plugin lain, dan salah satu favorit editor kami, adalah Kode Pintas Ultimate.

Di antara banyak kode pendek yang berbeda, ada satu untuk animasi sederhana. Ada beberapa preset tentang bagaimana animasi seharusnya berperilaku, dan Anda dapat meletakkan hampir semua hal di dalam blok yang akan dianimasikan.

Berikut adalah contoh tombol animasi (catatan; animasi hanya berfungsi saat pertama kali digulir ke viewport; jika Anda tidak melihatnya, segarkan halaman):

Klik saya


Plugin WordPress Shortcodes – Shortcodes Ultimate

Penulis: Vladimir Anokhin


Peringkat 98%


800.000 + Pemasangan


WP 4.6 + Membutuhkan

Info lebih lanjut

shortcodes-ultimate.5.9.0.zip

Versi Saat Ini: 5.9.0

Terakhir Diperbarui: 24 Mei 2020


Peringkat 98%


800.000 + Pemasangan


WP 4.6 + Membutuhkan

Halaman Plugin WordPress.org


Plugin WordPress Shortcodes – Shortcodes Ultimate

Kedua plugin ini akan memberi Anda lebih dari cukup opsi untuk menghidupkan elemen-elemen tertentu pada halaman Anda dan membuatnya sedikit lebih banyak ketika pengguna berinteraksi dengan mereka. Tentu saja, Anda tidak ingin berlebihan dengan itu, tetapi memberi pengguna dorongan tambahan saat mereka berinteraksi dengan ajakan kunci Anda untuk bertindak mungkin banyak membantu.

Apa pendapat Anda tentang interaksi mikro, apakah Anda mempertimbangkan untuk menggunakan tutorial interaksi mikro ini dengan baik dan menambahkan sesuatu ke situs Anda? Beri tahu kami di komentar.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    
    Evolusi Tema WordPress Default (2003 hingga 2019) Desain web
    0 комментариев
    
    Adblock
    detector