Mikrointerakcijų pamoka pradedantiesiems kūrėjams: Kaip sukurti interaktyvų mygtuką „Patinka“ naudojant CSS ir „JavaScript“

Mikrointerakcijų pamoka pradedantiesiems


Manau, kad galima drąsiai teigti, kad mikro-sąveika yra šauni. Mes, žiniatinklio žmonės, visi jais džiaugiamės. Ir nesvarbu, ar jūs juos pastebite, ar ne, jie žymiai pagerina vartotojo patirtį. Priverčiant jūsų svetainę ar žiniatinklio įrankį gyventi subtiliai ir draugiškai, jie paprasčiausiai privers vartotoją džiaugtis visa sąveika šiek tiek daugiau.

Šia dvasia noriu duoti jums greitą mikro-sąveikos pamoką ir parodyti, kaip sukurti puikų vaizdą "Kaip" mygtuką jūsų svetainei. Su minimaliu kodu. Čia jis veikia:

Tai gana jaudinantis mygtukas „nykščiai“, ar ne? Pabandykime!

Bet pirma:

Kodėl pirmiausia reikia nerimauti dėl mikro-sąveikos?

Nebandysiu čia per daug įtikinti, bet pažvelkime tik į keletą dalykų.

Mikro-sąveikos buvo tam tikrą laiką – pakankamai, kad jos net būtų pilnos knygos parašyta apie juos. Be to, buvo atlikta daugybė eksperimentų ir tyrimų, siekiant įvertinti, kiek jie iš tikrųjų yra naudingi ir veiksmingi.

Vienas žymiausių tyrimų namų, „Nielsen Norman Group“, daugiau nagrinėjo mikroįveikimą atidžiai 2018 m. Remiantis jų išvadomis, įrodyta, kad mikro-sąveika, be kita ko, pagerina vartotojo patirtį skatinant įsitraukimą ir komunikuojant prekės ženklą..

Trumpai tariant, mikro sąveika gali būti tikrai naudinga, jei naudojama tinkamai, be to, ne per daug. Šiandien parodysime jums vieną paprastą veikimo metu vykdomos mikro-sąveikos pavyzdį:

Mikro-sąveikos pamoka: mygtuko „Thumbs up“ žymėjimas ir pagrindinė CSS

�� Pastaba; apačioje turime keletą parinkčių, į kurias nereikia įtraukti kodo rašymo ranka.

Pirmiausia, norint, kad jis veiktų, mums reikia gero seno HTML ir CSS magijos. Struktūra yra gana paprasta.

Mes ketinsime naudoti SVG žymą pačiai panašiai ikonai – tai yra iš Nuostabus šriftas; galite rasti daugumą piktogramų čia. Tiesiog norėdami pakoreguoti SVG žymos pločio ir aukščio atributus, naudosime toliau pateiktą HTML:

Dabar, CSS srityje, mes eisime tikru pagrindiniu. Mes norime, kad čia atsitiko, kad gražiai pažvelgtume į mygtuką „patinka“ ir kad viskas būtų gražiai sutelkta į ekraną. Mes jau žinome, kad perjungsime klasę spustelėję (aktyvi klasė), todėl turime tai atsiskaityti. Mes užpildysime piktogramą mėlyna spalva, kai aktyvi, ir tamsiai pilka, kai ne:

kūnas {
ekranas: lankstus;
suderinti elementus: centrą;
pagrįsti turinį: centras;
aukštis: 100vh;
}

.panašus mygtukas {
ekranas: lankstus;
suderinti elementus: centrą;
pagrįsti turinį: centras;
}

.like-button.active {
-„webkit-animation“: pop 0.9 tiek;
animacija: pop 0.9s abu;
}

.panašus mygtukas svg {
neskaidrumas: 1;
}

.„like-button“ svg kelias {
užpildyti: # 333;
perėjimas: užpildyti .4 palengvina;
}

.like-button.active svg kelias {
užpildyti: # 2196f3;
}

Kitas dalykas, kurio mes norime, yra pop animacija, naudojama, kai mygtukas suaktyvinamas, todėl mes pridėsime tai prie savo CSS failo:

@ -webkit-keyframes pop {
0% {
-„webkit-transform“: „scale3d“ (1, 1, 1);
transformacija: scale3d (1, 1, 1);
}
30% {
-„webkit-transform“: „scale3d“ (1,25, 0,75, 1);
transformacija: skalė3d (1,25, 0,75, 1);
}
40% {
-„webkit-transform“: „scale3d“ (0,75, 1,25, 1);
transformacija: skalė3d (0,75, 1,25, 1);
}
50% {
-„webkit-transform“: „scale3d“ (1,15, 0,85, 1);
transformacija: scale3d (1,15, 0,85, 1);
}
65% {
-„webkit-transform“: „scale3d“ (0,95, 1,05, 1);
transformacija: scale3d (0,95, 1,05, 1);
}
75% {
-„webkit-transform“: „scale3d“ (1,05, 0,95, 1);
transformacija: scale3d (1,05, 0,95, 1);
}
100% {
-„webkit-transform“: „scale3d“ (1, 1, 1);
transformacija: scale3d (1, 1, 1);
}
}

@keyframes pop {
0% {
-„webkit-transform“: „scale3d“ (1, 1, 1);
transformacija: scale3d (1, 1, 1);
}
30% {
-„webkit-transform“: „scale3d“ (1,25, 0,75, 1);
transformacija: skalė3d (1,25, 0,75, 1);
}
40% {
-„webkit-transform“: „scale3d“ (0,75, 1,25, 1);
transformacija: skalė3d (0,75, 1,25, 1);
}
50% {
-„webkit-transform“: „scale3d“ (1,15, 0,85, 1);
transformacija: scale3d (1,15, 0,85, 1);
}
65% {
-„webkit-transform“: „scale3d“ (0,95, 1,05, 1);
transformacija: scale3d (0,95, 1,05, 1);
}
75% {
-„webkit-transform“: „scale3d“ (1,05, 0,95, 1);
transformacija: scale3d (1,05, 0,95, 1);
}
100% {
-„webkit-transform“: „scale3d“ (1, 1, 1);
transformacija: scale3d (1, 1, 1);
}
}

"sąveika" šios mikro-sąveikos vadovėlio dalis

Dabar, kai nebeturime pagrindinio stiliaus, laikas tvarkyti tikrąją sąveiką – tai reiškia „JavaScript“!

Visų pirma, mums reikės „JavaScript“ funkcijos, generuojančios atsitiktinį sveikąjį skaičių tarp nurodyto intervalo (mažiausio ir maksimalaus):

funkcija randomInt (min, max) {
grąžinti „Math.floor“ („Math.random“) * (maks. – min + 1) + min);
}

Toliau mums reikės kitos funkcijos, kuri atsitiktinai parodytų +1 arba -1, kad galėtume turėti atsitiktines neigiamas ar teigiamas reikšmes:

funkcija plusOrMinus () {
grąžinti matematiką < 0,5? -1: 1;
}

Dabar tikrasis sąveikos tvarkymas; pažiūrėkime į kodą, kad tinkamai paaiškintume:

  • Pirmiausia išsaugosime savo mygtuką kintamajame ir prie jo pridėsime paspaudimų įvykio klausytoją.
  • Spustelėjus mygtuką, mes pridėsime funkciją prevenDefault (), kad būtume tikri, jog neatsitiks nieko nepageidaujamo.
  • Po to mes pridėsime savo aktyvią klasę prie mygtuko, kurį anksčiau sukūrėme mėlyna spalva per CSS.
  • Tada mes vykdysime funkciją „generatorClones ()“ (kuri dar neapibrėžta), perleisdami mūsų mygtuką kaip parametrą per.

leisti mygtuką = document.querySelector (".kaip mygtukas");

button.addEventListener ("paspauskite", funkcija (e) {
e.preventDefault ();
this.classList.toggle ("aktyvus");
generuoti klonus (tai);
});

Dabar apibrėžkime funkciją „generatorClones ()“ ir atlikk su ja šiuos veiksmus:

  1. Pirmiausia nuspręskime dėl atsitiktinio klonų skaičiaus. Mes pagaminsime nuo dviejų iki keturių piktogramos klonų. Mes naudosime anksčiau apibrėžtą „randomInt ()“ funkciją.
  2. Tada kiekviename klone mygtuko viduje naudosime SVG žymą kaip "modelis" ir naudokite funkciją „cloneNode (true) JavaScript“, kad ją klonuotumėte į naują kintamąjį. Taip pat ketiname apibrėžti savo klono dydį nuo 5 iki 16, naudodami atsitiktinių skaičių skaičių generatoriaus funkciją.
  3. Toliau mes pridėsime savo klonus prie mygtuko, nustatysime jų plotį ir aukštį pagal anksčiau sugeneruotą skaičių ir padarysime jų padėtį absoliučią, kad galėtume juos judinti atskirai nuo mygtuko..
  4. Kitas dalykas, kurio mums reikia, yra mūsų klonų perėjimas, todėl, spustelėdami, jie ne tik atsiduria naujoje vietoje.
  5. Dabar pridėsime faktinių transformacijų, kurios pakeis mūsų piktogramą, ir mes šiek tiek išprotėsime. Mes norime, kad mūsų klonai atsitiktinai judėtų iš mygtuko centro į išorę. Naudodami mūsų randomInt () ir plusOrMinus () funkcijų derinį, mes perkelsime savo klonus XY ašyje su translate3d CSS ypatybe. Mes taip pat ketiname naudoti a "nulaužti", nes kitaip nebus taikomas mūsų perėjimas. Taigi, pridėję paprastą funkciją „setTimeout ()“, tai padės mums tai pasiekti. Tuo pat metu mes pakeisime neskaidrumą iki 0, todėl klonai išnyks.
  6. Ištriname mūsų klonus. Baigę Džiazą, turime išvalyti DOM. Taigi mums reikia dar vienos „setTimeout ()“ funkcijos, kuri po vienos sekundės pašalins mūsų klonus iš DOM.

„generatorClones“ (mygtukas) {
// 1. Generuokite klonus ir pakartokite nustatytą skaičių
tegul klonai = randomInt (2, 4);
už (tegul = 1; tai <= klonai; tai ++) {
// 2. Gaukite SVG etiketės kloną kintamajame ir sugeneruokite atsitiktinį dydį
tegul klonas = mygtukas.querySelector ("svg") .cloneNode (tiesa),
dydis = randomInt (5, 16);
// 3. Įtraukite mūsų mygtuką į mygtuką ir pakeiskite jo plotį / aukštį / padėtį
button.appendChild (klonas);
clone.setAttribute ("plotis", dydis);
clone.setAttribute ("ūgio", dydis);
klonas.style.pozicija = "absoliutus";
4. 4. Pridėkite keletą neryškių perėjimų
klonas.style.transition =
"paversti 0,5 s kubinio bezierio (0,12, 0,74, 0,58, 0,99) 0,3 s, neskaidrumas 1 palengvina. 5 s";
// 5. Animuokite mūsų piktogramą į išorę naudodami funkciją setTimeout, kad CSS atitiktų.
tegul animTimeout = setTimeout (function () {
klonas.style.transformuoti =
"translate3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"px, 0)";
clone.style.opacity = 0;
„clearTimeout“ („animTimeout“);
}, 1);
6. Klonai pašalinami po 0,9 sekundės
let removeNodeTimeout = setTimeout (function () {
clone.parentNode.removeChild (klonas);
„clearTimeout“ (pašalintiNodeTimeout);
}, 900);
}
}

Viskas! Mes tai padarėme iki galo! Žemiau rasite „CodePen“ pavyzdį:

Žiūrėkite rašiklį
Kaip Buttonas
pateikė Andrei Băicuș (@abaicus)
apie „CodePen“.

Ačiū, kad išgyvenate tai!

Kitos parinktys pridėti mikroįveikimą prie „WordPress“

Jei kodo rašymas rankiniu būdu nėra tik jūsų dalykas, iš tikrųjų yra nemažai „WordPress“ įskiepių, kuriuos galite naudoti norėdami į savo svetainę įsitraukti mikro sąveikas, nesijaudindami, kaip visa tai veikia po gaubtu..

Pirmiausia galite naudoti Pagyvinkite tai! papildinys pagyvinti bet kurį elementą savo puslapiuose naudojant CSS3.

Pvz., Galite pridėti mygtuką arba teksto fragmentą ir nustatyti jį tam tikru būdu pagyvinti spustelėjus.

Štai pavyzdys, ką papildinys gali padaryti – video ��.


Pagyvinkite tai!

Autorius (-ai): „eLEOPARD“ dizaino studijos


100% reitingai


40 000 ir daugiau įdiegimų


4.7.0Reikalaujama

Daugiau informacijos

animuoti.2.3.7.zip

Dabartinė versija: 2.3.7

Paskutinį kartą atnaujinta: 2020 m. Kovo 20 d


100% reitingai


40 000 ir daugiau įdiegimų


4.7.0Reikalaujama

„WordPress.org“ papildinio puslapis


Pagyvinkite tai!

Kitas įskiepis ir vienas iš redaktoriaus mėgstamiausių yra Trumpieji kodai.

Tarp daugybės skirtingų trumpųjų kodų yra vienas, skirtas paprastoms animacijoms. Yra keletas iš anksto numatytų, kaip turėtų elgtis animacija, ir bloke, kurį ketinate pagyvinti, galite įdėti daug ką..

Čia yra animuoto mygtuko pavyzdys (pastaba; animacija veikia tik pirmą kartą nuslinkus į peržiūros sritį; jei to nematote, atnaujinkite puslapį):

Paspausk mane


„WordPress“ trumpųjų kodų papildinys – svarbiausi trumpiniai kodai

Autorius (-ai): Vladimiras Anokinas


98% reitingai


Daugiau nei 800 000 diegimų


WP 4.6 + reikalinga

Daugiau informacijos

shortcodes-ultimate.5.9.0.zip

Dabartinė versija: 5.9.0

Paskutinį kartą atnaujinta: 2020 m. Gegužės 24 d


98% reitingai


Daugiau nei 800 000 diegimų


WP 4.6 + reikalinga

„WordPress.org“ papildinio puslapis


„WordPress“ trumpųjų kodų papildinys – svarbiausi trumpiniai kodai

Šie du papildiniai turėtų suteikti daugiau nei pakankamai galimybių pagyvinti tam tikrus elementus jūsų puslapiuose ir priversti juos šiek tiek daugiau pasirodyti, kai vartotojas su jais bendrauja. Žinoma, nenorite eiti už borto su jais, tačiau jei vartotojui suteikiate papildomą paslėpimą, kai jie sąveikauja su jūsų raginimu veikti, tai gali daug padėti..

Ką manote apie mikro-sąveiką, ar jūs ketinate šį mikro-sąveikos vadovą tinkamai panaudoti ir ką nors įtraukti į savo svetainę? Praneškite mums komentaruose.

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 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