Mikrovuorovaikutuksen opetusohjelma aloittelijoille: Kuinka luoda interaktiivinen Like-painike CSS: n ja JavaScriptin avulla

Mikrovuorovaikutuksen opetusohjelma aloittelijoille: Kuinka luoda interaktiivinen Like-painike CSS: n ja JavaScriptin avulla

Mikrovuorovaikutuksen opetusohjelma aloittelijoille: Kuinka luoda interaktiivinen Like-painike CSS: n ja JavaScriptin avulla
СОДЕРЖАНИЕ
02 июня 2020

Mikrovuorovaikutusopetus aloittelijoille


Mielestäni on turvallista sanoa, että mikrovuorovaikutus on hienoa. Me – verkko ihmiset – nauttiimme heistä yleisesti. Ja riippumatta siitä, huomaatko niitä tai ei, ne tarjoavat merkittävän käyttökokemuksen parannuksen. Panemalla verkkosivustosi tai verkkosivustosi elämään hienovaraisesti ja ystävällisellä tavalla, ne yksinkertaisesti tekevät käyttäjästä nauttimaan koko vuorovaikutuksesta vähän enemmän.

Tässä hengessä haluan antaa sinulle nopean mikrovuorovaikutuksen opetusohjelman ja näyttää kuinka luoda hienoa "Kuten" -painike sivustollesi. Pienellä koodilla. Tässä se on toiminnassa:

Melko jännittävä peukalonappulalle, eikö niin? Mennään siihen!

Mutta ensin:

Miksi häiritä ensisijaisesti mikrovuorovaikutuksia?

En aio yrittää vakuuttaa sinua liian voimakkaasti täällä, vaan katsotaanpa vain pari asiaa.

Mikrovuorovaikutukset ovat olleet olemassa jo jonkin aikaa – tarpeeksi, jotta heillä jopa olisi täydet kirjat kirjoitettu heistä. Lisäksi on tehty monia kokeita ja tutkimuksia siitä, kuinka hyödyllisiä ja tehokkaita ne todella ovat.

Yksi merkittävimmistä tutkimuslaitoksista, Nielsen Norman -ryhmä, tarkasteli enemmän mikrovuorovaikutuksia tarkasti vuonna 2018. Heidän päätelmiensä mukaan mikrovuorovaikutus on osoittanut muun muassa parantavan käyttökokemusta rohkaisemalla sitoutumista ja kommunikoimalla brändin.

Lyhyesti sanottuna, mikro-vuorovaikutukset voivat olla todella hyödyllisiä, jos niitä käytetään oikein, ja myöskään ei liian raskaasti. Näytämme tänään yhden yksinkertaisen esimerkin toiminnassa olevasta mikrovuorovaikutuksesta:

Mikrovuorovaikutuksen opetusohjelma: Peukalo-painikkeemme merkinnät ja CSS

�� Huomaa; alareunassa on sinulle joitain vaihtoehtoja, joihin ei sisälly koodin kirjoittamista käsin.

Ensinnäkin, tarvitsemme vanhaa hyvää HTML- ja CSS-taikuutta, jotta se toimisi. Rakenne on melko suoraviivainen.

Käytämme SVG-tunnistetta itse samankaltaisessa kuvakkeessa – tämä on lähtöisin Fontti mahtava; löydät suurimman osan kuvakkeista tässä. Käytämme alla olevaa HTML-koodia vain SVG-tunnisteen leveys- ja korkeusominaisuuksien säätämiseksi:

Nyt CSS: n osalta aiomme mennä oikeisiin perusasioihin. Mitä haluamme tapahtua täällä, on antaa hieno ilme samankaltaiselle painikkeellemme ja saada kaikki kauniisti näytön keskelle. Tiedämme jo, että aiomme vaihtaa luokkaa napsauttamalla (aktiivinen luokka), joten meidän on otettava se huomioon. Täytämme kuvakkeen sinisellä värillä, kun aktiivinen, ja tummanharmaat, kun ei:

vartalo {
näyttö: flex;
Kohdista tuotteet: keskusta;
perustele sisältö: keskusta;
korkeus: 100vh;
}

.kuten-painike {
näyttö: flex;
Kohdista tuotteet: keskusta;
perustele sisältö: keskusta;
}

.like-button.active {
-webkit-animaatio: pop 0.9 on molemmat;
animaatio: pop 0.9s molemmat;
}

.kuten painike svg {
opasiteetti: 1;
}

.like-button svg polku {
täyttö: # 333;
siirtymä: täyttää .4 on helppoa;
}

.like-button.active svg polku {
täyttää: # 2196f3;
}

Toinen asia, jonka haluamme tässä, on pop-animaatio, jota käytetään, kun painike aktivoituu, joten lisäämme sen CSS-tiedostoomme:

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

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

"vuorovaikutus" osa tätä mikrovuorovaikutuksen opetusohjelmaa

Nyt kun perustyylisuudet ovat poissa käytöstä, on aika käsitellä todellisia vuorovaikutuksia – se tarkoittaa JavaScriptiä!

Ensinnäkin tarvitsemme JavaScript-toimintoa, joka tuottaa satunnaisen kokonaisluvun tietyn ajanjakson (minimin ja maksimiarvon) välillä:

toiminto randomInt (min, max) {
paluu Math.floor (Math.random () * (max – min + 1) + min);
}

Seuraavaksi tarvitsemme toisen funktion, joka tuottaa satunnaisesti +1 tai -1, jotta meillä voi olla satunnaisia ​​negatiivisia tai positiivisia arvoja:

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

Nyt todelliseen vuorovaikutuksen käsittelyyn; Katsotaanpa koodia selittääksesi se oikein:

  • Ensin tallennamme painikkeemme muuttujaan ja lisäämme siihen napsautustapahtuman kuuntelijan.
  • Kun painiketta napsautetaan, lisäämme prevenDefault () -toiminnon, jotta olemme varmoja, ettei mitään ei-toivottua tapahtuu.
  • Sen jälkeen lisäämme aktiivisen luokan painikkeeseen, jonka aikaisemmin muotoilimme sinisellä värillä CSS: n kautta.
  • Sitten aiomme suorittaa generatorClones () -toiminnon (jota ei ole vielä määritelty) kuljettamalla painikkeemme parametriksi tämän kautta.

anna painike = document.querySelector (".like-painike");

button.addEventListener ("klikkaus", toiminto (e) {
e.preventDefault ();
this.classList.toggle ("aktiivinen");
generateClones (tämä);
});

Määritetään nyt generatorClones () -toiminto ja suoritetaan seuraavat vaiheet sen kanssa:

  1. Ensinnäkin päätetään satunnaisesta määrästä klooneja. Aiomme välittää kahdesta neljään kuvakkeen kloonia. Käytämme aiemmin määriteltyä randomInt () -toimintoa.
  2. Sitten käytämme jokaisen kloonin kohdalla SVG-tunnistetta a "malli" ja kloonaa se uuteen muuttujaan cloneNode (true) JavaScript -toiminnolla. Aiomme myös määrittää kloonillemme koon 5-16, käyttämällä satunnaisten kokonaislukugeneraattoritoimintoa.
  3. Seuraavaksi aiomme lisätä kloonimme painikkeeseen, asettaa niiden leveyden ja korkeuden aiemmin luodulla numerolla ja tehdä niiden sijainnista ehdoton, jotta voimme liikuttaa niitä painikkeesta riippumattomasti.
  4. Toinen asia, jota tarvitsemme, on siirtyminen klooneillemme, joten ne eivät vain pop uuteen paikkaansa napsauttaessa.
  5. Nyt, kun lisäämme todelliset muutokset, jotka liikuttavat kuvakettamme, menemme hieman hulluksi. Haluamme klooniemme siirtyvän painikkeemme keskustasta satunnaisesti. Käyttämällä randomInt () – ja plusOrMinus () -toimintojen yhdistelmää aiomme siirtää kloonimme XY-akselilla translate3d CSS -ominaisuuden kanssa. Aiomme myös käyttää a "hakata", koska siirtymämme ei sovellettaisi muuten. Joten yksinkertaisen setTimeout () -toiminnon lisääminen auttaa meitä saavuttamaan tämän. Samaan aikaan siirrämme opasiteetin arvoon 0, jolloin kloonit katoavat.
  6. Poistetaan kloonimme. Meidän on puhdistettava DOM, kun olemme valmiit kaiken jazzin kanssa. Tarvitsemme siis toisen setTimeout () -toiminnon, joka poistaa kloonimme DOM: sta yhden sekunnin kuluttua.

generatorClones (painike) {
// 1. Luo klooneja ja toista asetettu numero
olkoon kloonit = randomInt (2, 4);
for (olkoon = 1; se <= kloonit; se ++) {
// 2. Hanki SVG-tag-klooni muuttujasta ja luo satunnainen koko
anna klooni = painike.querySelector ("svg") .CloneNode (tosi),
koko = randomInt (5, 16);
// 3. Lisää klooni nappiin ja muuta sen leveyttä / korkeutta / sijaintia
button.appendChild (klooni);
clone.setAttribute ("leveys", koko);
clone.setAttribute ("korkeus", koko);
klooni.tyyli.asento = "absoluuttinen";
// 4. Lisää joitain näyttäviä siirtymiä
klooni.style.transition =
"muunna 0,5 s kuutiometri-bezier (0,12, 0,74, 0,58, 0,99) 0,3 s, opasiteetti 1 helpottaa 5,5 s";
// 5. Animoi kuvake ulospäin setTimeout-toiminnolla, jotta CSS noudattaa.
anna animTimeout = setTimeout (toiminto () {
clone.style.transform =
"translate3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"px, 0)";
klooni.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. Kloonien poistaminen 0,9 sekunnin kuluttua
anna removeNodeTimeout = setTimeout (toiminto () {
clone.parentNode.removeChild (klooni);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

Se siitä! Olemme päässeet loppuun asti! Alhaalta löydät CodePen-esimerkin:

Katso kynä
Kuten Button
kirjoittanut: Andrei Băicuș (@abaicus)
päällä CodePen.

Kiitos tämän läpi!

Muut vaihtoehdot lisätä mikrovuorovaikutuksia WordPressiin

Jos koodin kirjoittaminen manuaalisesti ei ole täysin sinun juttusi, on olemassa todella kourallinen WordPress-laajennuksia, joiden avulla voit saada mikrotoimintaa sivustollesi tarvitsematta huolehtia siitä, kuinka se kaikki toimii konepellin alla..

Ensinnäkin voit käyttää Animoi se! plugin animoida melkein kaikki sivusi elementit CSS3: n avulla.

Voit esimerkiksi lisätä painikkeen tai kappaleen tekstin ja asettaa sen sitten animoimaan tietyllä tavalla napsautuksella.

Tässä on esimerkki siitä, mitä laajennus voi tehdä – video ��.


Animoi se!

Tekijä (t): eLEOPARD Design Studios


100% Arviot


40000 + asennukset


4.7.0Requires

Lisätietoja

animate-it.2.3.7.zip

Nykyinen versio: 2.3.7

Viimeksi päivitetty: 20. maaliskuuta 2020


100% Arviot


40000 + asennukset


4.7.0Requires

WordPress.org-laajennussivu


Animoi se!

Toinen laajennus ja yksi toimittajan suosikeista on Lyhytkoodit Ultimate.

Koko joukosta erilaisia ​​lyhytkoodeja on yksi yksinkertaisia ​​animaatioita varten. Joitakin esiasetuksia siitä, kuinka animaation tulisi toimia, ja voit laittaa melkein mitä tahansa animoidun lohkon sisälle,.

Tässä on esimerkki animoidusta painikkeesta (huomautus; animaatio toimii vain ensimmäisen kerran, kun se vieritetään näyttöporttiin; jos et näe sitä, päivitä sivu):

Napsauta minua


WordPress Shortcodes -laajennus – Shortcodes Ultimate

Tekijä (t): Vladimir Anokhin


98% Arviot


800000 + asennukset


WP 4.6 + vaaditaan

Lisätietoja

shortcodes-ultimate.5.9.0.zip

Nykyinen versio: 5.9.0

Viimeksi päivitetty: 24. toukokuuta 2020


98% Arviot


800000 + asennukset


WP 4.6 + vaaditaan

WordPress.org-laajennussivu


WordPress Shortcodes -laajennus – Shortcodes Ultimate

Näiden kahden laajennuksen pitäisi antaa sinulle enemmän kuin tarpeeksi vaihtoehtoja animoida tiettyjä sivujen elementtejä ja saada ne poppumaan hieman enemmän, kun käyttäjä on vuorovaikutuksessa niiden kanssa. Tietysti et halua mennä yli laitaan näiden kanssa, mutta antamalla käyttäjälle lisämutkaa, kun hän on vuorovaikutuksessa sinun avainkäyttökutsusi kanssa, voi olla paljon apua.

Mitä mieltä olet mikrovuorovaikutuksista, harkitsetko tämän mikrovuorovaikutuksen opetusohjelman hyödyntämistä ja lisäämistä jotain sivustollesi? Kerro meille kommenteissa.

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 50–80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector