Mikro-interaktionsvejledning til nybegynderudviklere: Sådan opretter du en interaktiv “Like” -knap med CSS og JavaScript

Mikro-interaktionsvejledning til nybegynderudviklere: Sådan opretter du en interaktiv “Like” -knap med CSS og JavaScript

Mikro-interaktionsvejledning til nybegynderudviklere: Sådan opretter du en interaktiv “Like” -knap med CSS og JavaScript
СОДЕРЖАНИЕ
02 июня 2020

Mikro-interaktionsvejledning til begyndere


Jeg synes, det er sikkert at sige, at mikrointeraktioner er seje. Vi – webfolk – stort set alle nyder dem. Og uanset om du lægger mærke til dem eller ej, giver de en betydelig forbedring af brugeroplevelsen. Ved at få dit websted eller dit webværktøj til at opstå subtile og på en venlig måde, får de blot brugeren til at nyde hele interaktionen lidt mere.

I den ånd vil jeg give dig en hurtig tutorial til mikrointeraktioner og vise dig, hvordan du opretter en cool "Synes godt om" knappen til dit websted. Med minimal kode. Her er det i aktion:

Temmelig spændende for en tommelfingeren-knap, er det ikke? Lad os komme til det!

Men først:

Hvorfor gider med mikro-interaktioner i første omgang?

Jeg vil ikke prøve at overbevise dig for stærkt her, men lad os bare se på et par ting.

Mikrointeraktioner har eksisteret i et stykke tid – nok til at de endda har gjort det fuld bøger skrevet om dem. Der har desuden været mange eksperimenter og undersøgelser, der undersøger, hvor nyttige og effektive de faktisk er.

Et af de mest bemærkelsesværdige forskningshuse, Nielsen Norman Group, kiggede mere på mikrointeraktioner tæt i 2018. I henhold til deres konklusioner har mikrointeraktioner vist sig at blandt andet forbedre brugeroplevelsen ved at tilskynde til engagement og kommunikere brand.

Kort sagt kan mikrointeraktioner være virkelig gavnlige, hvis de bruges rigtigt og heller ikke for stærkt. I dag vil vi vise dig et enkelt eksempel på en mikrointeraktion i handling:

Vejledning til mikrointeraktioner: Markering og grundlæggende CSS for vores tommelfingertast

�� Bemærk; nederst har vi nogle muligheder for dig, der ikke involverer at skrive kode manuelt.

Først og fremmest har vi brug for nogle gode gamle HTML- og CSS-magier for at få det til at fungere. Strukturen er ret ligetil.

Vi vil bruge et SVG-tag til det lignende ikon i sig selv – dette er fra Font Awesome; du kan finde de fleste af ikonerne her. Bare for at justere bredde- og højdeegenskaber for SVG-taget, bruger vi HTML nedenfor:

Nu for CSS, kommer vi til at gå meget grundlæggende. Det, vi gerne vil ske her, er at give et smukt look til vores lignende knap og have alt pænt centreret på skærmen. Vi ved allerede, at vi vil skifte en klasse ved klik (den aktive klasse), så vi er nødt til at redegøre for det. Vi vil udfylde ikonet med en blå farve, når den er aktiv og mørkegrå, når ikke:

krop {
display: flex;
align-items: center;
justify-content: center;
højde: 100vh;
}

.lignende-knap {
display: flex;
align-items: center;
justify-content: center;
}

.like-button.active {
-webkit-animation: pop 0,9 begge dele;
animation: pop 0,9 begge dele;
}

.like-button svg {
opacitet: 1;
}

.lignende-knap svg-sti {
udfyld: # 333;
overgang: udfyld .4s let ud;
}

.like-button.active svg-sti {
fyld: # 2196f3;
}

En anden ting, vi ønsker her, er popanimationen, der bruges, når knappen bliver aktiv, så vi vil tilføje det til vores CSS-fil:

@ -webkit-keyframes pop {
0% {
-webkit-transformation: skala3d (1, 1, 1);
transform: skala3d (1, 1, 1);
}
30% {
-webkit-transformation: skala3d (1,25, 0,75, 1);
transform: skala3d (1,25, 0,75, 1);
}
40% {
-webkit-transformation: skala3d (0,75, 1,25, 1);
transform: skala3d (0,75, 1,25, 1);
}
50% {
-webkit-transformation: skala3d (1.15, 0.85, 1);
transform: skala3d (1,15, 0,85, 1);
}
65% {
-webkit-transformation: skala3d (0,95, 1,05, 1);
transform: skala3d (0,95, 1,05, 1);
}
75% {
-webkit-transformation: skala3d (1.05, 0.95, 1);
transform: skala3d (1,05, 0,95, 1);
}
100% {
-webkit-transformation: skala3d (1, 1, 1);
transform: skala3d (1, 1, 1);
}
}

@keyframes pop {
0% {
-webkit-transformation: skala3d (1, 1, 1);
transform: skala3d (1, 1, 1);
}
30% {
-webkit-transformation: skala3d (1,25, 0,75, 1);
transform: skala3d (1,25, 0,75, 1);
}
40% {
-webkit-transformation: skala3d (0,75, 1,25, 1);
transform: skala3d (0,75, 1,25, 1);
}
50% {
-webkit-transformation: skala3d (1.15, 0.85, 1);
transform: skala3d (1,15, 0,85, 1);
}
65% {
-webkit-transformation: skala3d (0,95, 1,05, 1);
transform: skala3d (0,95, 1,05, 1);
}
75% {
-webkit-transformation: skala3d (1.05, 0.95, 1);
transform: skala3d (1,05, 0,95, 1);
}
100% {
-webkit-transformation: skala3d (1, 1, 1);
transform: skala3d (1, 1, 1);
}
}

Det "interaktion" del af denne mikrointeraktionsvejledning

Nu hvor vi har fået den grundlæggende styling ud af vejen, er det tid til at håndtere de faktiske interaktioner – det betyder JavaScript!

Først og fremmest har vi brug for en JavaScript-funktion, der genererer et tilfældigt heltal mellem et givet interval (et minimum og et maksimum):

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

Herefter har vi brug for en anden funktion, der tilfældigt returnerer +1 eller -1, så vi kan have tilfældige negative eller positive værdier:

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

Nu til den faktiske håndtering af interaktioner; lad os se på koden for at forklare den ordentligt:

  • Først op, vil vi gemme vores knap i en variabel og tilføje en klikbegivenhedslytter til den.
  • Når der klikkes på knappen, tilføjer vi en preventDefault () -funktion, så vi er sikre på, at der ikke sker noget uønsket.
  • Derefter tilføjer vi vores aktive klasse til knappen, som vi tidligere stylede med en blå farve via CSS.
  • Derefter kører vi funktionen generererClones () (der er ikke defineret endnu), hvor vores knap sendes som en parameter via denne.

lad-knap = document.querySelector (".like-knap");

button.addEventListener ("klik", funktion (e) {
e.preventDefault ();
this.classList.toggle ("aktiv");
generateClones (denne);
});

Lad os nu definere funktionen generereClones () og køre gennem følgende trin med den:

  1. Lad os først beslutte et tilfældigt antal kloner. Vi kommer til at indstille mellem to og fire kloner til ikonet. Vi vil bruge den tidligere definerede randomInt () -funktion.
  2. Så for hver klon bruger vi SVG-mærket i vores knap som en "model" og brug kloneNode (sand) JavaScript-funktionen til at klone den til en ny variabel. Vi vil også definere en størrelse mellem 5 og 16 for vores klon ved hjælp af den tilfældige heltalegeneratorfunktion.
  3. Herefter vil vi tilføje vores kloner til knappen, indstille deres bredde og højde med det tidligere genererede nummer og gøre deres position absolut, så vi kan flytte dem rundt uafhængigt af knappen.
  4. En anden ting, vi har brug for, er en overgang til vores kloner, så de ikke bare kommer ind på deres nye sted, når du klikker.
  5. Nu, for at tilføje de faktiske transformationer, der vil flytte vores ikon rundt, vil vi blive lidt skøre. Vi ønsker, at vores kloner bevæger sig tilfældigt fra midten af ​​vores knap udad. Ved hjælp af en kombination af vores randomInt () og plusOrMinus () -funktioner flytter vi vores kloner i XY-aksen med egenskaben translate3d CSS. Vi vil også bruge en "hack", da vores overgang ikke ville finde anvendelse ellers. Så at tilføje en simpel setTimeout () -funktion vil hjælpe os med at opnå det. Samtidig vil vi flytte opaciteten til 0, så klonerne forsvinder.
  6. Sletning af vores kloner. Vi er nødt til at rydde op i DOM, når vi er færdige med al jazz. Så vi har brug for en anden setTimeout () -funktion, der vil fjerne vores kloner fra DOM efter et sekund.

generereClones (knap) {
// 1. Generer kloner og iterere over det indstillede nummer
lad kloner = randomInt (2, 4);
for (lad det = 1; det <= kloner; det ++) {
// 2. Hent SVG-tag-klonen i en variabel og generer en tilfældig størrelse
lad klone = button.querySelector ("svg") .CloneNode (sand),
størrelse = randomInt (5, 16);
// 3. Føj vores klon til knappen og ændre dens ‘bredde / højde / position
button.appendChild (klon);
clone.setAttribute ("bredde", størrelse);
clone.setAttribute ("højde", størrelse);
clone.style.position = "absolutte";
// 4. Tilføj nogle prangende overgange
clone.style.transition =
"transformer 0,5s cubic-bezier (0,12, 0,74, 0,58, 0,99) 0,3s, opacitet 1s easy-out 0,5";
// 5. Animer vores ikon udad med en setTimeout-funktion, så CSS overholder.
lad animTimeout = setTimeout (funktion () {
clone.style.transform =
"translate3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"px, 0)";
clone.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. Fjernelse af kloner efter 0,9 sekunder
lad removeNodeTimeout = setTimeout (funktion () {
clone.parentNode.removeChild (klon);
clearTimeout (removeNodeTimeout);
} 900);
}
}

Det er det! Vi har nået det gennem slutningen! Nedenunder finder du CodePen-eksemplet:

Se pennen
Som knap
af Andrei Băicuș (@abaicus)
CodePen.

Tak for at gå igennem dette!

Andre muligheder for at tilføje mikrointeraktioner til WordPress

Hvis at skrive kode manuelt ikke helt er din ting, er der faktisk en ganske håndfuld WordPress-plugins, som du kan bruge til at få mikro-interaktioner på dit websted uden at skulle bekymre dig om, hvordan det hele fungerer under hætten.

Først kan du bruge Animer det! plugin til at animere stort set ethvert element på dine sider ved hjælp af CSS3.

For eksempel kan du tilføje en knap eller et stykke tekst og derefter indstille den til at animere på en bestemt måde ved klik.

Her er et eksempel på, hvad plugin kan gøre – video ��.


Animer det!

Forfatter (e): eLEOPARD Design Studios


100% Ratings


40.000 + Installationer


4.7.0Requires

Mere info

animate-it.2.3.7.zip

Nuværende version: 2.3.7

Sidst opdateret: 20. marts 2020


100% Ratings


40.000 + Installationer


4.7.0Requires

WordPress.org-pluginside


Animer det!

Et andet plugin, og en af ​​vores redaktørs favoritter, er Shortcodes Ultimate.

Blandt en hel overflod af forskellige kortnumre er der en til enkle animationer. Der er nogle forudindstillinger for, hvordan animationen skal opføre sig, og du kan lægge stort set alt inden for blokken, der vil blive animeret.

Her er et eksempel på en animeret knap (bemærk; animationen fungerer kun første gang den rulles ind i visningen; hvis du ikke kan se den, skal du opdatere siden):

Klik på mig


WordPress Shortcodes Plugin – Shortcodes Ultimate

Forfatter (e): Vladimir Anokhin


98% Vurderinger


800.000 + Installationer


WP 4.6 + Kræver

Mere info

shortcodes-ultimate.5.9.0.zip

Nuværende version: 5.9.0

Sidst opdateret: 24. maj 2020


98% Vurderinger


800.000 + Installationer


WP 4.6 + Kræver

WordPress.org-pluginside


WordPress Shortcodes Plugin – Shortcodes Ultimate

Disse to plugins skal give dig mere end nok muligheder for at animere bestemte elementer på dine sider og få dem til at poppe lidt mere, når brugeren interagerer med dem. Selvfølgelig ønsker du ikke at gå overbord med dem, men at give brugeren en ekstra skubbe, når de interagerer med dit nøgleopkald til handlinger kan hjælpe meget.

Hvad synes du om mikrointeraktioner, overvejer du at bruge denne tutorial til mikrointeraktioner til god brug og tilføje noget til dit websted? Fortæl os det i kommentarerne.

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

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