Výukový program pro mikrointerakce pro začínající vývojáře: Jak vytvořit interaktivní tlačítko „Like“ s CSS a JavaScriptem

Výukový program pro mikrointerakce pro začátečníky


Myslím, že je bezpečné říci, že mikro-interakce jsou v pohodě. My – lidé na webu – si je všichni všichni užíváme. A bez ohledu na to, zda si jich všimnete nebo ne, poskytují významné zlepšení uživatelského prostředí. Díky tomu, že váš web nebo webový nástroj ožívají jemně a přátelsky, jednoduše dělají uživateli, aby si užil celou interakci o něco více.

V tomto duchu vám chci poskytnout výuku rychlých mikrointerakcí a ukázat vám, jak vytvořit cool "Jako" tlačítko pro váš web. S minimálním kódem. Tady to je v akci:

Je to docela vzrušující tlačítko pro palec nahoru, že? Pojďme na to!

Ale nejdřív:

Proč se v první řadě obtěžovat mikro-interakcemi?

Nesnažím se vás tu příliš přesvědčit, ale podívejme se na pár věcí.

Mikrointerakce již nějakou dobu existují – natolik, že dokonce mají plné knihy psal o nich. Navíc bylo provedeno mnoho experimentů a studií zaměřených na to, jak jsou skutečně užitečné a efektivní.

Jeden z nejvýznamnějších výzkumných domů, skupina Nielsen Norman, se více podíval na mikrointerakce těsně v roce 2018. Podle jejich závěrů se ukázalo, že mikro-interakce mimo jiné zlepšují uživatelský dojem tím, že podporují zapojení a komunikují značku.

Stručně řečeno, mikro-interakce mohou být opravdu prospěšné, pokud budou použity správně a také ne příliš těžce. Dnes vám ukážeme jeden jednoduchý příklad mikrointerakce v akci:

Výukový program pro mikrointerakce: Značení a základní CSS našeho tlačítka pro palec nahoru

�� Poznámka; ve spodní části máme pro vás několik možností, které nezahrnují ruční psaní kódu.

Nejprve potřebujeme nějakou dobrou starou magii HTML a CSS, aby to fungovalo. Struktura je docela jednoduchá.

Budeme používat značku SVG pro stejnou ikonu jako ikonu – to je z Písmo Awesome; najdete většinu ikon tady. Pro úpravu atributů šířky a výšky značky SVG použijeme níže uvedený kód HTML:

Nyní pro CSS se chystáme jít opravdu základní. Chceme se zde stát, aby se náš hezký knoflík pěkně podíval a vše se pěkně soustředilo na obrazovku. Už víme, že po kliknutí přepneme třídu (aktivní třída), takže za to musíme odpovídat. Budeme ikonu plnit modrou barvou, pokud je aktivní, a tmavě šedou, pokud ne:

tělo {
displej: flex;
Zarovnat položky: střed;
justify-content: center;
výška: 100vh;
}

.jako tlačítko {
displej: flex;
Zarovnat položky: střed;
justify-content: center;
}

.like-button.active {
-webkit-animation: pop 0.9s both;
animace: pop 0,9 s;
}

.like-button svg {
krytí: 1;
}

.cesta podobného tlačítku {
výplň: # 333;
přechod: vyplňte .4s easy-out;
}

.like-button.active svg path {
výplň: # 2196f3;
}

Další věcí, kterou tu chceme, je popová animace použitá, když se tlačítko aktivuje, takže ji přidáme do našeho souboru CSS:

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

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

"interakce" součást tohoto tutoriálu o mikrointerakce

Teď, když jsme dostali základní styl z cesty, je čas zvládnout skutečné interakce – to znamená JavaScript!

Nejprve potřebujeme funkci JavaScript, která vygeneruje náhodné celé číslo mezi daným intervalem (minimum a maximum):

funkce randomInt (min, max) {
návrat Math.floor (Math.random () * (max – min + 1) + min);
}

Dále budeme potřebovat další funkci, která náhodně vrátí +1 nebo -1, abychom mohli mít náhodné záporné nebo kladné hodnoty:

function plusOrMinus () {
návrat Math.random () < 0,5? -1: 1;
}

Nyní pro zpracování skutečné interakce; pojďme se podívat na kód, abychom to řádně vysvětlili:

  • Nejprve uložíme tlačítko do proměnné a přidáme do něj posluchače událostí kliknutí.
  • Po kliknutí na tlačítko přidáme funkci preventDefault (), abychom si byli jisti, že se nic nechtěného neděje.
  • Poté přidáme do tlačítka naši aktivní třídu, kterou jsme dříve stylizovali modrou barvou pomocí CSS.
  • Pak spustíme funkci vygenerovatClones () (to ještě není definováno), předáním tohoto tlačítka jako parametru.

let button = document.querySelector (".jako tlačítko");

button.addEventListener ("klikněte", funkce (e) {
e.preventDefault ();
this.classList.toggle ("aktivní");
createClones (this);
});

Nyní definujme funkci vygenerujClones () a projdi s ní následující kroky:

  1. Nejprve se rozhodneme pro náhodný počet klonů. Chystáme se vytvořit instanci mezi dvěma a čtyřmi klony pro ikonu. Budeme používat dříve definovanou funkci randomInt ().
  2. Pak pro každý klon použijeme značku SVG uvnitř našeho tlačítka jako "Modelka" a klonovat ji do nové proměnné pomocí funkce cloneNode (true) JavaScript. Pomocí funkce generátoru náhodných celých čísel také definujeme velikost pro náš klon mezi 5 a 16.
  3. Dále přidáme do tlačítka naše klony, nastavíme jejich šířku a výšku s dříve vygenerovaným číslem a učiníme jejich polohu absolutní, abychom je mohli pohybovat nezávisle na tlačítku.
  4. Další věcí, kterou potřebujeme, je přechod pro naše klony, takže se po kliknutí nekliknou na své nové místo.
  5. Nyní, pro přidání skutečných transformací, které posouvají naši ikonu, se zblázníme. Chceme, aby se naše klony náhodně pohybovaly od středu tlačítka směrem ven. Pomocí kombinace našich randomInt () a plusOrMinus () funkcí, přesuneme naše klony v ose XY pomocí vlastnosti translate3d CSS. Budeme také používat "zaseknout", protože náš přechod by neplatil jinak. Přidání jednoduché funkce setTimeout () nám tedy pomůže toho dosáhnout. Současně přesuneme krytí na 0, takže klony zmizí.
  6. Mazání našich klonů. Po dokončení všech jazzů musíme vyčistit DOM. Proto potřebujeme další funkci setTimeout (), která po jedné sekundě odstraní naše klony z DOMu.

vygenerovatClones (tlačítko) {
// 1. Vygenerujte klony a opakujte přes nastavené číslo
nechť klony = randomInt (2, 4);
pro (ať to = 1; to <= klony; it ++) {
// 2. Získejte klon značky SVG v proměnné a vygenerujte náhodnou velikost
let clone = button.querySelector ("svg") .cloneNode (true),
size = randomInt (5, 16);
// 3. Přidejte do tlačítka náš klon a změňte jeho ‘šířku / výšku / polohu
button.appendChild (klon);
clone.setAttribute ("šířka", velikost);
clone.setAttribute ("výška", velikost);
clone.style.position = "absolutní";
// 4. Přidejte nějaké honosné přechody
clone.style.transition =
"transformace 0,5 s krychlovým bezierem (0,12, 0,74, 0,58, 0,99) 0,3 s, neprůhlednost 1 s uvolnění 0,5 s";
// 5. Animujte naši ikonu ven pomocí funkce setTimeout, aby CSS vyhovovala.
nechat 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. Odstranění klonů po 0,9 sekundách
nechte removeNodeTimeout = setTimeout (function () {
clone.parentNode.removeChild (klon);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

A je to! Udělali jsme to až do konce! Níže dole najdete příklad CodePen:

Podívejte se na pero
Jako tlačítko
od Andrei Băicuș (@abaicus)
na CodePen.

Díky, že jste to prošli!

Další možnosti přidání mikrointerakcí do WordPress

Pokud ruční psaní kódu není úplně vaše věc, existuje ve skutečnosti spousta pluginů WordPress, které můžete použít k získání mikro-interakcí na vašem webu, aniž byste se museli obávat, jak to všechno funguje pod kapotou.

Nejprve můžete použít Animujte to! plugin pro oživení téměř jakéhokoli prvku na vašich stránkách pomocí CSS3.

Můžete například přidat tlačítko nebo část textu a poté jej určitým způsobem nastavit kliknutím na animaci.

Zde je příklad toho, co může plugin udělat – video ��.


Animujte to!

Autor: eLEOPARD Design Studios


100% hodnocení


40 000 + instalace


4.7.0 Požadavky

Více informací

animate-it.2.3.7.zip

Aktuální verze: 2.3.7

Poslední aktualizace: 20. března 2020


100% hodnocení


40 000 + instalace


4.7.0 Požadavky

Stránka pluginu WordPress.org


Animujte to!

Další plugin a jeden z oblíbených editorů je Krátké kódy Ultimate.

Mezi celou řadou různých krátkých kódů je jeden pro jednoduché animace. Existuje několik předvoleb o tom, jak by se měla animace chovat, a do bloku můžete vložit téměř cokoli, co bude animováno..

Zde je příklad animovaného tlačítka (poznámka: animace funguje pouze při prvním posouvání do výřezu; pokud ji nevidíte, obnovte stránku):

Klikni na mě


Doplněk WordPress Shortcodes – Shortcodes Ultimate

Autor: Vladimir Anokhin


Hodnocení 98%


800 000 + instalace


WP 4.6 + Vyžaduje

Více informací

shortcodes-ultimate.5.9.0.zip

Aktuální verze: 5.9.0

Poslední aktualizace: 24. května 2020


Hodnocení 98%


800 000 + instalace


WP 4.6 + Vyžaduje

Stránka pluginu WordPress.org


Doplněk WordPress Shortcodes – Shortcodes Ultimate

Tyto dva pluginy by vám měly poskytnout více než dost možností, jak oživit určité prvky na vašich stránkách a přimět je k popu trochu více, když s nimi uživatel komunikuje. Samozřejmě s nimi nechcete přejít přes palubu, ale přidělení dalšího štětce při interakci s vaší klíčovou výzvou k akci vám může hodně pomoci.

Co si myslíte o mikrointerakcích, uvažujete o tom, že tento tutoriál o mikrointerakcích dobře využijete a něco přidáte na svůj web? Dejte nám vědět v komentářích.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 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