Mikrointeraktsioonide õpetus algajatele arendajatele: kuidas luua interaktiivne nupp Meeldib CSS-i ja JavaScripti abil

Mikrointeraktsioonide õpetus algajatele


Ma arvan, et võib kindlalt öelda, et mikrotoimingud on lahedad. Me – veebiinimesed – naudime neid kõiki. Ja hoolimata sellest, kas olete neid märganud või mitte, pakuvad need kasutajakogemuse olulist paranemist. Muutes teie veebisaidi või veebitööriista peeneks ja sõbralikult ellu, muudavad need kasutaja lihtsalt kogu suhtluse veelgi nauditavamaks.

Selles vaimus tahan anda teile kiire mikro-interaktsioonide õpetuse ja näidata teile, kuidas luua lahedat "Nagu" nuppu oma saidil. Minimaalse koodiga. Siin see on tegevuses:

Päris põnev on pöidlakinnituse nupu jaoks, kas pole? Läheme selle juurde!

Aga esmalt:

Miks üldse häirida mikrotoiminguid??

Ma ei ürita teid siin liiga tugevalt veenda, vaid vaatame vaid mõnda asja.

Mikrointeraktsioonid on olnud juba mõnda aega – piisavalt, et neid isegi oleks täisraamatud neist kirjutatud. Lisaks on tehtud palju katseid ja uuringuid, uurides, kui kasulikud ja tõhusad need tegelikult on.

Üks tähelepanuväärsemaid teadusuuringute maju, Nielsen Normani grupp, vaatles mikrolülitusi lähemalt tähelepanelikult 2018. aastal. Nende järelduste kohaselt on mikrointeraktsioonid tõestanud, et muu hulgas parandavad kasutajakogemust, julgustades kaasalöömist ja brändiga suhtlemist.

Lühidalt öeldes võib mikrotoimimine olla õigesti kasutamisel tõeliselt kasulik, aga ka mitte liiga tugev. Täna näitame teile ühte lihtsat näidet toimimises olevast mikro-interaktsioonist:

Mikrointeraktsioonide õpetus: meie pöidla üles nupu märgistus ja CSS

�� märkus; allosas on teile mõned võimalused, mis ei hõlma koodi käsitsi kirjutamist.

Esiteks vajame selle toimimiseks vana head HTML-i ja CSS-i võlu. Struktuur on üsna sirgjooneline.

Me kasutame sarnase ikooni enda jaoks SVG-silti – see on pärit Font vinge; leiate enamiku ikoonidest siin. SVG-sildi laiuse ja kõrguse atribuutide kohandamiseks hakkame kasutama järgmist HTML-i:

Nüüd CSS-i jaoks läheme tõeliselt lihtsaks. Mida me siin juhtuda tahame, on see, et me näeksime oma nupule Like meeldiv välja ja kõik oleks ekraanil kenasti keskel. Me juba teame, et hakkame klõpsuga klassi vahetama (aktiivne klass), nii et peame selle arvesse võtma. Täidame ikooni sinise värviga, kui see on aktiivne, ja tumehallist, kui mitte:

keha {
kuva: flex;
joonda üksused: keskel;
õigusta-sisu: kese;
kõrgus: 100vh;
}

.meeldimisnupp {
kuva: flex;
joonda üksused: keskel;
õigusta-sisu: kese;
}

.nagu nupp.aktiivne {
-webkit-animatsioon: pop 0.9 on mõlemad;
animatsioon: pop 0.9 on mõlemad;
}

.meeldimisnupuga svg {
läbipaistmatus: 1;
}

.nagu nupuga svg tee {
täitke: # 333;
üleminek: täitke .4 lihtsus;
}

.like-button.active svg tee {
täitke: # 2196f3;
}

Veel üks asi, mida me siin soovime, on nupu aktiveerimisel kasutatav pop-animatsioon, nii et lisame selle oma CSS-faili:

@ -webkit-keyframes pop {
0% {
-veebikomplekti teisendus: skaala3d (1, 1, 1);
teisend: skaala3d (1, 1, 1);
}
30% {
-veebikomplekti teisendus: skaala3d (1,25, 0,75, 1);
teisend: skaala3d (1,25, 0,75, 1);
}
40% {
-veebikomplekti teisendus: skaala3d (0,75, 1,25, 1);
teisend: skaala3d (0,75, 1,25, 1);
}
50% {
-veebikomplekti teisendus: skaala3d (1,15, 0,85, 1);
teisend: skaala3d (1,15, 0,85, 1);
}
65% {
-veebikomplekti teisendus: skaala3d (0,95, 1,05, 1);
teisend: skaala3d (0,95, 1,05, 1);
}
75% {
-veebikomplekti teisendus: skaala3d (1,05, 0,95, 1);
teisend: skaala3d (1,05, 0,95, 1);
}
100% {
-veebikomplekti teisendus: skaala3d (1, 1, 1);
teisend: skaala3d (1, 1, 1);
}
}

@ võtmekaadrid pop {
0% {
-veebikomplekti teisendus: skaala3d (1, 1, 1);
teisend: skaala3d (1, 1, 1);
}
30% {
-veebikomplekti teisendus: skaala3d (1,25, 0,75, 1);
teisend: skaala3d (1,25, 0,75, 1);
}
40% {
-veebikomplekti teisendus: skaala3d (0,75, 1,25, 1);
teisend: skaala3d (0,75, 1,25, 1);
}
50% {
-veebikomplekti teisendus: skaala3d (1,15, 0,85, 1);
teisend: skaala3d (1,15, 0,85, 1);
}
65% {
-veebikomplekti teisendus: skaala3d (0,95, 1,05, 1);
teisend: skaala3d (0,95, 1,05, 1);
}
75% {
-veebikomplekti teisendus: skaala3d (1,05, 0,95, 1);
teisend: skaala3d (1,05, 0,95, 1);
}
100% {
-veebikomplekti teisendus: skaala3d (1, 1, 1);
teisend: skaala3d (1, 1, 1);
}
}

"interaktsioon" osa sellest mikrointeraktsioonide õpetusest

Nüüd, kui põhiline stiil on paigast ära, on aeg tegeleda tegelike interaktsioonidega – see tähendab JavaScripti!

Esiteks on meil vaja JavaScripti funktsiooni, mis genereerib antud intervalli (minimaalse ja maksimaalse) vahel juhusliku täisarvu:

funktsioon randomInt (min, max) {
tagasi Math.põrand (Math.random () * (max – min + 1) + min);
}

Järgmisena on meil vaja veel ühte funktsiooni, mis tagastab juhuslikult +1 või -1, et meil oleks juhuslikud negatiivsed või positiivsed väärtused:

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

Nüüd tegeliku interaktsiooni käsitlemise jaoks; vaatame koodi, et seda õigesti selgitada:

  • Kõigepealt salvestame oma nupu muutujasse ja lisame sellele klõpsamissündmuse kuulaja.
  • Kui nuppu klõpsatakse, lisame funktsiooni prevenDefault (), et oleksime kindlad, et midagi soovimatut ei juhtu..
  • Pärast seda lisame nupule oma aktiivse klassi, mille varem kujundasime CSS-i kaudu sinise värviga.
  • Siis käivitame funktsiooni genereeriClones () (mida pole veel määratletud), edastades selle nupu parameetrina selle kaudu.

lase nupp = document.querySelector (".nagu nupp");

button.addEventListener ("klõps", funktsioon (e) {
e.preventDefault ();
this.classList.toggle ("aktiivne");
genereerima kloonid (see);
});

Määratlegem nüüd funktsioon genereeriClones () ja jätkake sellega järgmisi samme:

  1. Esiteks otsustame juhusliku arvu kloonide kasuks. Koostame ikooni jaoks kaks kuni neli klooni. Me hakkame kasutama varem määratletud funktsiooni randomInt ().
  2. Seejärel hakkame iga klooni jaoks nupu sees kasutama SVG-märgendit a "mudel" ja kasutage funktsiooni cloneNode (true) JavaScripti uueks muutujaks kloonimiseks. Samuti määrame juhusliku täisarvu generaatori funktsiooni abil oma klooni suuruse vahemikus 5–16.
  3. Järgmisena lisame oma kloonid nupule, määrame nende genereeritud numbri järgi laiuse ja kõrguse ning muudame nende asukoha absoluutseks, et saaksime neid nupust sõltumatult ümber tõsta..
  4. Teine asi, mida vajame, on üleminek meie kloonidele, nii et nad ei hüppa klõpsates lihtsalt uude kohta.
  5. Nüüd, kui lisada tegelikud muutused, mis meie ikooni ümber tõstavad, läheme natuke hulluks. Soovime, et meie kloonid liiguksid meie nupu keskelt juhuslikult väljapoole. Kasutades funktsioonide randomInt () ja plusOrMinus () kombinatsiooni, liigutame oma kloonid XY-teljele atribuudiga translate3d. Kasutame ka a "häkkima", kuna meie üleminek ei kehti teisiti. Nii et lihtsa funktsiooni setTimeout () lisamine aitab meil seda saavutada. Samal ajal muudame läbipaistmatuse väärtuseks 0, muutes kloonid kaduma.
  6. Meie kloonide kustutamine. Peame DOM-i puhastama pärast seda, kui kõik jazzid on tehtud. Seega vajame veel ühte funktsiooni setTimeout (), mis eemaldab meie kloonid DOM-ist ühe sekundi pärast.

genereeriClones (nupp) {
// 1. Genereerige kloonid ja itereerige valitud arvu kohal
las kloonid = randomInt (2, 4);
jaoks (las see = 1; see <= kloonid; see ++) {
// 2. Hankige SVG-sildi kloon muutujaga ja genereerige juhuslik suurus
lase kloon = nupp.querySelector ("svg") .cloneNode (tõene),
suurus = randomInt (5, 16);
// 3. Lisage nupule meie kloon ja muutke selle laiust / kõrgust / positsiooni
nupp.appendChild (kloon);
clone.setAttribute ("laius", suurus);
clone.setAttribute ("kõrgus", suurus);
kloon.stiil.positsioon = "absoluutne";
// 4. Lisage mõned toretsevad üleminekud
kloon.style.transition =
"teisendada 0,5 s kuupmeetri bezier (0,12, 0,74, 0,58, 0,99) 0,3 s, läbipaistmatus 1 lihtsustab, 5 s";
// 5. Animeerige meie ikooni väljapoole funktsiooniga setTimeout, et CSS vastaks.
lase animTimeout = setTimeout (function () {
kloon.style.transform =
"translate3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"px, 0)";
kloon.stiil.mahukus = 0;
clearTimeout (animTimeout);
}, 1);
6. Kloonide eemaldamine 0,9 sekundi pärast
lase removeNodeTimeout = setTimeout (function () {
clone.parentNode.removeChild (kloon);
clearTimeout (eemaldaNodeTimeout);
}, 900);
}
}

See selleks! Oleme selle läbi teinud! Altpoolt leiate CodePeni näite:

Vaadake pastakat
Nagu Button
autor: Andrei Băicuș (@abaicus)
peal CodePen.

Täname, et selle läbi tegite!

Muud valikud WordPressile mikrointeraktsioonide lisamiseks

Kui koodi käsitsi kirjutamine pole päris teie asi, on tegelikult üsna käputäis WordPressi pluginaid, mille abil saate oma saidile mikrotoiminguid teha, ilma et peaksite muretsema, kuidas see kõik kapoti all töötab.

Esiteks võite kasutada Animeerige see! pistikprogramm CSS3 abil oma lehtede mis tahes elemendi animeerimiseks.

Näiteks võite lisada nupu või tekstiosa ja seejärel klõpsamisega teatud viisil animeerida.

Siin on näide pistikprogrammi toimimisest – video ��.


Animeerige see!

Autor (id): eLEOPARDi disainistuudiod


100% hinnangud


40 000 + installida


4.7.0 Nõuab

Rohkem infot

animeerima.2.3.7.zip

Praegune versioon: 2.3.7

Viimati värskendatud: 20. märtsil 2020


100% hinnangud


40 000 + installida


4.7.0 Nõuab

WordPress.org pistikprogrammi leht


Animeerige see!

Veel üks pistikprogramm ja üks meie toimetaja lemmikutest on Ultimate lühikoodid.

Terve hulga erinevate lühikoodide hulgas on üks lihtsate animatsioonide jaoks. Animatsiooni käitumiseks on olemas mõned eeldused ja te saate ploki sisse panna peaaegu kõike, mida animeeritakse..

Siin on animeeritud nupu näide (märkus; animatsioon töötab ainult siis, kui seda vaateaknasse keritakse; kui te seda ei näe, värskendage lehte):

Klõpsake mind


WordPressi lühikoodide pistikprogramm – otseteed Ultimate

Autor (id): Vladimir Anokhin


98% hinnangud


800 000 + installida


WP 4.6 + Nõuab

Rohkem infot

lühikoodid – ülim.5.9.0.zip

Praegune versioon: 5.9.0

Viimati värskendatud: 24. mail 2020


98% hinnangud


800 000 + installida


WP 4.6 + Nõuab

WordPress.org pistikprogrammi leht


WordPressi lühikoodide pistikprogramm – otseteed Ultimate

Need kaks pistikprogrammi peaksid andma teile rohkem kui piisavad võimalused teatud lehtede elementide animeerimiseks ja panema need natuke rohkem esile, kui kasutaja nendega suhtleb. Muidugi, te ei taha nendega üle parda minna, kuid kasutajale täiendava kära andmine, kui nad suheldavad teie peamise tegevusele kutsumisega, võib palju aidata.

Mida arvate mikrointeraktsioonidest, kas kaalute selle mikrointeraktsioonide õpetuse kasutamist ja oma saidile midagi lisamist? Andke meile kommentaarides teada.

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map