Mikrointerakciók bemutatója kezdő fejlesztőknek: Hogyan hozunk létre interaktív “Like” gombot CSS és JavaScript segítségével

Mikrointerakciók bemutatója kezdő fejlesztőknek: Hogyan hozunk létre interaktív “Like” gombot CSS és JavaScript segítségével

Mikrointerakciók bemutatója kezdő fejlesztőknek: Hogyan hozunk létre interaktív “Like” gombot CSS és JavaScript segítségével
СОДЕРЖАНИЕ
02 июня 2020

Mikrointerakciók bemutatója kezdőknek


Azt hiszem, biztonságos azt mondani, hogy a mikro-interakciók mennek. Mi – web emberek – általánosságban mindannyian élvezzük őket. És nem számít, ha észreveszi őket, vagy sem, ezek jelentősen javítják a felhasználói élményt. Azáltal, hogy webhelye vagy webes eszköze finoman és barátságosan életre kel, egyszerűen arra készteti a felhasználót, hogy a felhasználó egész kicsivel élvezze az egész interakciót..

Ebben a szellemben szeretnék egy gyors mikro-interakció bemutatót nyújtani neked, és megmutatom, hogyan lehet hűvös dolgot készíteni "Tetszik" gombot a webhelyéhez. Minimális kóddal. Itt működik:

Nagyon izgalmas egy remek gombra, nem igaz? Menjünk hozzá!

De először:

Miért érdekli elsősorban a mikrointerakciókat??

Nem fogom megpróbálni itt túlságosan meggyőzni téged, de nézzünk csak néhány dolgot.

A mikro-interakciók már egy ideje fennállnak – elég ahhoz, hogy meg is legyenek teljes könyvek írt róluk. Ráadásul számos kísérlet és tanulmány történt arról, hogy valójában mennyire hasznosak és eredményesek.

Az egyik legjelentősebb kutatóház, a Nielsen Norman csoport a mikrointerakciókat részletesebben vizsgálta szorosan 2018-ban. Következtetéseik szerint a mikro-interakciók bebizonyították, hogy többek között javítják a felhasználói élményt az elkötelezettség ösztönzése és a márka kommunikálása révén.

Röviden: a mikrointerakciók valóban hasznosak lehetnek, ha helyesen alkalmazzuk őket, és nem túl erősen. Ma bemutatunk egy egyszerű példát a működésben lévő mikrointerakcióról:

Mikrointerakciók bemutatója: Remek-megjelölés gombunk jelölése és alapvető CSS-je

�� Megjegyzés; alul van néhány olyan lehetőségünk az Ön számára, amely nem foglalja magában a kézzel írott kódot.

Mindenekelőtt szükségünk van egy jó öreg HTML és CSS mágiare, hogy működjön. A szerkezet nagyon egyszerű.

Magához a hasonló ikonhoz SVG-címkét fogunk használni – ez innen származik Fantasztikus betűtípus; megtalálja az ikonok legtöbbjét itt. Az SVG-címke szélességi és magassági tulajdonságainak beállításához csak az alábbi HTML-t fogjuk használni:

Most a CSS-hez valódi alapvető leszünk. Amit itt szeretnénk elérni, az, hogy szép megjelenést nyújtsunk a hasonlók gombra, és mindent szépen a képernyőn helyezkedjünk el. Már tudjuk, hogy kattintással váltunk egy osztályra (aktív osztály), ezért ezt figyelembe kell vennünk. Az ikont aktív kék színűre, majd sötétszürkere töltsük fel, ha nem:

test {
kijelző: flex;
igazítási elemek: középen;
igazolja-tartalom: központ;
magasság: 100vh;
}

.hasonló gomb {
kijelző: flex;
igazítási elemek: középen;
igazolja-tartalom: központ;
}

.like-button.active {
-webkit-animáció: mind a 0.9 pops;
animáció: mind a 0.9 pops;
}

.hasonló gomb svg {
átlátszatlanság: 1;
}

.like-gomb svg útvonal {
kitölteni: # 333;
átmenet: a 4 kitöltése könnyű;
}

.like-button.active svg útvonal {
kitölteni: # 2196f3;
}

Egy másik dolog, amit itt szeretnénk, a pop-animáció, amelyet akkor használunk, amikor a gomb aktiválódik, tehát ezt hozzá fogjuk adni a CSS-fájlunkhoz:

@ -webkit-keyframes pop {
0% {
-webkit-transzformáció: scale3d (1, 1, 1);
transzformáció: skála3d (1, 1, 1);
}
30% {
-webkit-transzformáció: scale3d (1,25, 0,75, 1);
transzformáció: skála3d (1,25, 0,75, 1);
}
40% {
-webkit-transzformáció: scale3d (0,75, 1,25, 1);
transzformáció: skála3d (0,75, 1,25, 1);
}
50% {
-webkit-transzformáció: scale3d (1,15, 0,85, 1);
transzformáció: skála3d (1,15, 0,85, 1);
}
65% {
-webkit-transzformáció: scale3d (0,95, 1,05, 1);
transzformáció: skála3d (0,95, 1,05, 1);
}
75% {
-webkit-transzformáció: scale3d (1,05, 0,95, 1);
transzformáció: skála3d (1,05, 0,95, 1);
}
100% {
-webkit-transzformáció: scale3d (1, 1, 1);
transzformáció: skála3d (1, 1, 1);
}
}

@keyframes pop {
0% {
-webkit-transzformáció: scale3d (1, 1, 1);
transzformáció: skála3d (1, 1, 1);
}
30% {
-webkit-transzformáció: scale3d (1,25, 0,75, 1);
transzformáció: skála3d (1,25, 0,75, 1);
}
40% {
-webkit-transzformáció: scale3d (0,75, 1,25, 1);
transzformáció: skála3d (0,75, 1,25, 1);
}
50% {
-webkit-transzformáció: scale3d (1,15, 0,85, 1);
transzformáció: skála3d (1,15, 0,85, 1);
}
65% {
-webkit-transzformáció: scale3d (0,95, 1,05, 1);
transzformáció: skála3d (0,95, 1,05, 1);
}
75% {
-webkit-transzformáció: scale3d (1,05, 0,95, 1);
transzformáció: skála3d (1,05, 0,95, 1);
}
100% {
-webkit-transzformáció: scale3d (1, 1, 1);
transzformáció: skála3d (1, 1, 1);
}
}

Az "kölcsönhatás" ennek a mikrointerakció-oktatóanyagnak a része

Most, hogy megszabadultak az alapvető stílusoktól, ideje kezelni a tényleges interakciókat – ez azt jelenti, hogy a JavaScript!

Mindenekelőtt szükségünk lesz egy JavaScript függvényre, amely egy véletlen egész számot generál egy adott intervallum (minimum és maximum) között:

a randomInt függvény (min, max) {
vissza a Math.floor (Math.random () * (max – perc + 1) + perc);
}

Következő lépésként szükségünk lesz egy másik függvényre, amely véletlenszerűen ad vissza +1 vagy -1, így véletlenszerű negatív vagy pozitív értékeket kaphatunk:

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

Most a tényleges interakció kezelése; nézzük meg a kódot annak magyarázata érdekében:

  • Először is, meg fogjuk menteni a gombunkat egy változóban, és hozzá kell adnunk egy kattintási esemény-figyelőt.
  • Amikor a gombra kattintunk, hozzáadunk egy prevenDefault () függvényt, hogy biztosak lehessünk abban, hogy nem történik semmi nem kívánt.
  • Ezután hozzáadjuk az aktív osztályunkat a gombhoz, amelyet korábban kék színűként festettünk a CSS-en keresztül.
  • Akkor futtatjuk a generatorClones () függvényt (amely még nincs meghatározva), és ezen keresztül átadjuk a gombunkat mint paramétert.

let gomb = document.querySelector (".hasonló gomb");

button.addEventListener ("kettyenés", funkció (e) {
e.preventDefault ();
this.classList.toggle ("aktív");
generateClones (e);
});

Most definiáljuk a generatorClones () függvényt, és végezzük el a következő lépéseket vele:

  1. Először döntsünk véletlenszerű klónszámról. Az ikon kettő és négy klónját azonnal elkészítjük. A korábban definiált randomInt () függvényt fogjuk használni.
  2. Ezután minden klónhoz a gomb belsejében található SVG-címkét fogjuk használni a "modell" és használja a cloneNode (true) JavaScript függvényt egy új változóba történő klónozáshoz. Ezenkívül a véletlenszerű egész generátor függvény segítségével meghatározzuk a klónunk méretét is 5 és 16 között.
  3. Következő lépésként hozzáadjuk a klónjainkat a gombhoz, beállítjuk szélességüket és magasságukat az előzőleg generált számmal, és abszolút helyzetbe állítjuk, hogy mozoghassuk őket a gombból függetlenül..
  4. Egy másik dolog, amire szükségünk van, a klónok átmenete, így kattintásukkor nem pusztulnak be új helyükre.
  5. Ha hozzá szeretnénk adni a tényleges transzformációkat, amelyek körül mozgatják az ikonunkat, kissé megőrülünk. Azt akarjuk, hogy klónjaink véletlenszerűen mozogjanak gombunk közepéből kifelé. A randomInt () és plusOrMinus () függvények kombinációjának felhasználásával áthelyezzük klónjainkat az XY tengelyen a translate3d CSS tulajdonsággal. Az a "csapkod", mivel az átmenetünk másként nem lenne érvényes. Tehát egy egyszerű setTimeout () függvény hozzáadásával segít elérni ezt. Ugyanakkor az átlátszatlanságot 0-ra állítjuk, így a klónok eltűnnek.
  6. Klónjaink törlése. A DOM-ot ki kell tisztítanunk, miután az összes jazz-rel megtettük. Szüksége van tehát egy másik setTimeout () függvényre, amely egy másodperc múlva eltávolítja a klónjainkat a DOM-ból.

generatorClones (gomb) {
// 1. Generáljon klónokat, és iteráljon a beállított számon
legyen klónok = randomInt (2, 4);
mert (legyen = 1; ez <= klónok; ez ++) {
// 2. Szerezze be az SVG tag-klónt egy változóba, és generáljon véletlenszerű méretet
hadd klón = gomb.querySelector ("svg") .CloneNode (true),
méret = randomInt (5, 16);
// 3. Adja hozzá klónunkat a gombhoz, és változtassa meg annak szélességét / magasságát / helyzetét
button.appendChild (klón);
clone.setAttribute ("szélesség", méret);
clone.setAttribute ("magasság", méret);
clone.style.position = "abszolút";
// 4. Adjon hozzá néhány váratlan átmenetet
clone.style.transition =
"átalakítani 0,5s köbös bezier (0,12, 0,74, 0,58, 0,99) 0,3s, átlátszóság 1s könnyű .5s";
// 5. Animálja kifelé ikonját setTimeout funkcióval, hogy a CSS megfeleljen.
hadd 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. A klónok eltávolítása 0,9 másodperc után
hadd removeNodeTimeout = setTimeout (function () {
clone.parentNode.removeChild (klón);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

Ez az! A végén megtettük! Az alábbiakban megtalálja a CodePen példát:

Lásd a tollat
Mint Button
írta: Andrei Băicuș (@abaicus)
tovább CodePen.

Köszönöm, hogy átmented ezt!

Egyéb lehetőségek mikrointerakciók hozzáadására a WordPress-hez

Ha a kód kézi írása nem teljesen a dolgod, valójában nagyon kevés WordPress-bővítmény található, amelyek segítségével mikrointerakciókat hozhat létre webhelyén anélkül, hogy aggódnia kellene, hogy az összes működik-e a motorháztető alatt.

Először használhatja a Animálja azt! plugin ahhoz, hogy az oldalak bármely elemét nagyjából animálhassa a CSS3 használatával.

Például hozzáadhat egy gombot vagy egy darab szöveget, majd beállíthatja, hogy kattintással bizonyos módon animálja.

Íme egy példa arra, hogy a plugin mit tehet – videó ��.


Animálja azt!

Szerzői): eLEOPARD Design Studios


100% Értékelések


40.000 + telepítések


4.7.0Requires

Több információ

animate-it.2.3.7.zip

Aktuális változat: 2.3.7

Utolsó frissítés: 2020. március 20


100% Értékelések


40.000 + telepítések


4.7.0Requires

WordPress.org beépülő oldal


Animálja azt!

Egy másik plugin, és a szerkesztő egyik kedvence, az Rövid kódok Ultimate.

A rengeteg különféle rövid kód közül egy megtalálható az egyszerű animációk számára. Van néhány előre beállított beállítás, hogy az animáció hogyan viselkedjen, és nagyon sok mindent el lehet helyezni a blokkba, amely animálni fog..

Íme egy példa egy animált gombra (megjegyzés: az animáció csak akkor működik, amikor először görgeti a nézetablakba; ha nem látja, frissítse az oldalt):

Kattints ide


WordPress Shortcodes beépülő modul – Shortcodes Ultimate

Szerzői): Vladimir Anokhin


98% Értékelések


800.000 + telepítések


WP 4.6 + szükséges

Több információ

shortcodes-ultimate.5.9.0.zip

Aktuális változat: 5.9.0

Utolsó frissítés: 2020. május 24


98% Értékelések


800.000 + telepítések


WP 4.6 + szükséges

WordPress.org beépülő oldal


WordPress Shortcodes beépülő modul – Shortcodes Ultimate

E két pluginnak több mint elegendő lehetőséget kell adnia az oldalak bizonyos elemeinek animálására, és egy kicsit több megjelenítésére, amikor a felhasználó interakcióba lép. Természetesen nem akarja a fedélzeten túl menni, de a felhasználónak egy további botrány megadása, amikor kapcsolatba lép a kulcsfontosságú cselekvési felhívással, sokat segíthet..

Mit gondolsz a mikrointerakciókról, fontolóra veszi a mikrointerakció-oktatóanyag hasznos felhasználását, és ad hozzá valamit a webhelyéhez? Tudassa velünk a megjegyzésekben.

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

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