Урок за микро взаимодействия за начинаещи разработчици: Как да създадете интерактивен бутон „Харесвам“ с CSS и JavaScript

Урок за микро взаимодействия за начинаещи


Мисля, че е безопасно да се каже, че микро взаимодействията са готини. Ние – хората в мрежата – общо взето всички им се радваме. И без значение дали ги забелязвате или не, те осигуряват значително подобрение на потребителското изживяване. Като карате уебсайта или уеб инструмента ви да оживяват фино и приятелски, те просто правят потребителя да се наслаждава на цялото взаимодействие малко повече.

В този дух искам да ви дам бърз урок за микро взаимодействия и да ви покажа как да създадете готина "като" бутон за вашия сайт. С минимален код. Ето го в действие:

Доста вълнуващо за бутон за палец нагоре, нали? Нека да стигнем до него!

Но първо:

Защо да се занимавате с микро взаимодействия на първо място?

Няма да се опитвам да ви убеждавам твърде силно тук, но нека да разгледаме няколко неща.

Микро взаимодействията са от известно време – достатъчно, така че дори да има пълни книги написано за тях. Плюс това, има много експерименти и проучвания, които разглеждат колко полезни и ефективни са всъщност.

Една от най-забележителните изследователски къщи, Nielsen Norman Group, разгледа повече микро-взаимодействията отблизо през 2018г. Според техните заключения, микро взаимодействията са доказали, освен всичко друго, подобряване на потребителското изживяване чрез насърчаване на ангажираността и комуникация с марката.

Накратко, микро взаимодействията могат да бъдат наистина полезни, ако се използват правилно и, също така, не много силно. Днес ще ви покажем един прост пример за микро взаимодействие в действие:

Урок за микро взаимодействия: Маркиране и основен CSS на нашия бутон за палец

�� Забележка; най-отдолу, имаме няколко опции за вас, които не включват писане на код на ръка.

На първо място, ние се нуждаем от някои добри стари HTML и CSS магия, за да работим. Структурата е доста проста.

Ще използваме SVG маркер за самата подобна икона – това е от Шрифт страхотно; можете да намерите повечето от иконите тук. Само за да коригираме атрибутите за ширина и височина на SVG маркера, ще използваме HTML по-долу:

Сега за CSS, ние ще отидем истински основни. Това, което искаме да се случи тук, е да дадем хубав поглед на нашия харесващ бутон и всичко да е центрирано добре на екрана. Вече знаем, че ще превключим клас при щракване (активният клас), така че трябва да отчитаме това. Ще запълним иконата със син цвят, когато е активен, и тъмносив, когато не:

тяло {
дисплей: гъвкав;
подравняване-елементи: център;
обосновка-съдържание: център;
височина: 100vh;
}

.like-button {
дисплей: гъвкав;
подравняване-елементи: център;
обосновка-съдържание: център;
}

.like-button.active {
-webkit-анимация: поп 0,9 и двете;
анимация: поп 0,9 и двете;
}

.svg като бутон
непрозрачност: 1;
}

.svg пътека като бутон {
попълване: # 333;
преход: запълване на .4s улеснение;
}

.като-button.active svg път {
попълване: # 2196f3;
}

Друго нещо, което искаме тук, е поп анимацията, използвана, когато бутонът стане активен, така че ще добавим това към нашия CSS файл:

@ -webkit-keyframes pop {
0% {
-webkit-трансформация: scale3d (1, 1, 1);
трансформация: scale3d (1, 1, 1);
}
30% {
-webkit-трансформация: scale3d (1.25, 0.75, 1);
трансформация: скала3d (1,25, 0,75, 1);
}
40% {
-webkit-трансформация: scale3d (0.75, 1.25, 1);
трансформация: скала3d (0.75, 1.25, 1);
}
50% {
-webkit-трансформация: scale3d (1.15, 0.85, 1);
трансформация: скала3d (1.15, 0.85, 1);
}
65% {
-webkit-трансформация: scale3d (0.95, 1.05, 1);
трансформация: скала3d (0.95, 1.05, 1);
}
75% {
-webkit-трансформация: scale3d (1,05, 0,95, 1);
трансформация: скала3d (1,05, 0,95, 1);
}
100% {
-webkit-трансформация: scale3d (1, 1, 1);
трансформация: scale3d (1, 1, 1);
}
}

@keyframes pop {
0% {
-webkit-трансформация: scale3d (1, 1, 1);
трансформация: scale3d (1, 1, 1);
}
30% {
-webkit-трансформация: scale3d (1.25, 0.75, 1);
трансформация: скала3d (1,25, 0,75, 1);
}
40% {
-webkit-трансформация: scale3d (0.75, 1.25, 1);
трансформация: скала3d (0.75, 1.25, 1);
}
50% {
-webkit-трансформация: scale3d (1.15, 0.85, 1);
трансформация: скала3d (1.15, 0.85, 1);
}
65% {
-webkit-трансформация: scale3d (0.95, 1.05, 1);
трансформация: скала3d (0.95, 1.05, 1);
}
75% {
-webkit-трансформация: scale3d (1,05, 0,95, 1);
трансформация: скала3d (1,05, 0,95, 1);
}
100% {
-webkit-трансформация: scale3d (1, 1, 1);
трансформация: scale3d (1, 1, 1);
}
}

Най- "взаимодействие" част от този урок за микро взаимодействия

Сега, когато вече имаме основна стилистика, е време да се справим с действителните взаимодействия – това означава, че JavaScript!

На първо място, ще ни трябва JavaScript функция, която генерира произволно цяло число между даден интервал (минимум и максимум):

функция randomInt (min, max) {
върнете Math.floor (Math.random () * (max – min + 1) + min);
}

След това ще ни трябва друга функция, която на случаен принцип връща +1 или -1, за да можем да имаме произволни отрицателни или положителни стойности:

функция плюсOrMinus () {
върнете Math.random () < 0,5? -1: 1;
}

Сега за действителното управление на взаимодействието; нека да разгледаме кода, за да го обясним правилно:

  • Първо, ще запазим бутона си в променлива и ще добавим към него слушател на събитие за кликване.
  • Когато щракнете върху бутона, ще добавим функция prevenDefault (), така че да сме сигурни, че не се случва нищо нежелано.
  • След това ще добавим нашия активен клас към бутона, който преди това оформихме със син цвят чрез CSS.
  • Тогава ще стартираме функцията geneClones () (която все още не е дефинирана), като предаваме нашия бутон като параметър чрез това.

пуснете бутона = document.querySelector (".като бутон");

button.addEventListener ("кликване", функция (д) {
e.preventDefault ();
this.classList.toggle ("активен");
generateClones (това);
});

Сега нека да определим функцията generatorClones () и да преминем през следните стъпки:

  1. Първо, нека да вземем решение за произволен брой клонинги. Ще инсталираме между два и четири клона за иконата. Ще използваме предварително дефинираната функция randomInt ().
  2. След това за всеки клонинг ще използваме SVG маркера в нашия бутон като "модел" и използвайте функцията cloneNode (true) JavaScript, за да го клонирате в нова променлива. Също така ще определим размер между 5 и 16 за нашия клонинг, използвайки функцията генератор на произволни цели числа.
  3. След това ще добавим нашите клонинги към бутона, ще зададем ширината и височината им с генерираното по-рано число и ще направим позицията им абсолютна, така че да можем да ги движим независимо от бутона.
  4. Друго нещо, от което се нуждаем, е преход за нашите клонинги, така че те не изскачат на новото си място, когато кликнат.
  5. Сега, за да добавим действителните трансформации, които ще преместят нашата икона наоколо, ще направим малко луд. Искаме клонингите ни да се придвижват от центъра на нашия бутон навън на случаен принцип. Използвайки комбинация от нашите randomInt () и plusOrMinus () функции, ще преместим клонингите си по оста XY със свойството translate3d CSS. Ние също ще използваме "хамалски", тъй като преходът ни не би се прилагал по друг начин. Така че добавянето на проста функция setTimeout () ще ни помогне да постигнем това. В същото време ще преместим непрозрачността на 0, като клоновете изчезнат.
  6. Изтриване на нашите клонинги. Трябва да изчистим DOM, след като приключим с целия джаз. Така че се нуждаем от друга функция setTimeout (), която ще премахне клоновете ни от DOM след една секунда.

generatorClones (бутон) {
// 1. Генериране на клонинги и итерация над зададеното число
нека клонира = randomInt (2, 4);
за (нека = 1; то <= клонинги; то ++) {
// 2. Вземете клона на SVG маркера в променлива и генерирайте произволен размер
нека clone = button.querySelector ("SVG") .CloneNode (истина),
размер = randomInt (5, 16);
// 3. Добавете нашия клон към бутона и променете неговата ‘ширина / височина / позиция
button.appendChild (клон);
clone.setAttribute ("широчина", размер);
clone.setAttribute ("височина", размер);
clone.style.position = "абсолютен";
// 4. Добавете някои плаващи преходи
clone.style.transition =
"трансформирайте 0,5s кубично-безие (0,12, 0,74, 0,58, 0,99) 0,3s, непрозрачност 1s улеснение .5s";
// 5. Анимирайте нашата икона навън с функция setTimeout, така че CSS да отговаря.
нека animTimeout = setTimeout (функция () {
clone.style.transform =
"translate3d (" +
плюсOrMinus () * randomInt (10, 25) +
"пиксела," +
плюсOrMinus () * randomInt (10, 25) +
"пиксела, 0)";
clone.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. Премахване на клоновете след 0,9 секунди
нека RemoveNodeTimeout = setTimeout (функция () {
clone.parentNode.removeChild (клон);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

Това е! Ние успяхме до края! Долу ще намерите примера CodePen:

Вижте писалката
Като Бутон
от Andrei Băicuș (@abaicus)
На CodePen.

Благодаря, че преминахте през това!

Други опции за добавяне на микро взаимодействия в WordPress

Ако писането на код ръчно не е изцяло ваше нещо, всъщност има доста шепа WordPress плъгини, които можете да използвате, за да получите микро-взаимодействия на вашия сайт, без да е необходимо да се притеснявате как става всичко под капака.

Първо, можете да използвате Анимирайте го! плъгин, за да анимирате почти всеки елемент на вашите страници, използвайки CSS3.

Например можете да добавите бутон или парче текст и след това да го настроите да анимира по определен начин при натискане.

Ето пример за това, което плъгинът може да направи – видео ��.


Анимирайте го!

Автор (и): eLEOPARD Design Studios


100% Ratings


40000 + инсталирания


4.7.0Requires

Повече информация

animate-it.2.3.7.zip

Текуща версия: 2.3.7

Последна актуализация: 20 март 2020 г.


100% Ratings


40000 + инсталирания


4.7.0Requires

Страница на приставката за WordPress.org


Анимирайте го!

Друг плъгин и един от любимите на нашия редактор е Кратки кодове Ultimate.

Сред цяла плеяда от различни къси кодове има един за прости анимации. Има някои предварителни настройки за това как трябва да се държи анимацията и можете да поставите почти всичко в блока, който ще се анимира.

Ето пример за анимиран бутон (забележете; анимацията работи само първия път, когато се превърти в прозореца за преглед; ако не го видите, опреснете страницата):

Щракнете върху мен


WordPress Plugin за кратки кодове – кратки кодове Ultimate

Автор (и): Владимир Анохин


98% Ratings


800000 + инсталирания


WP 4.6 + Изисква

Повече информация

shortcodes-ultimate.5.9.0.zip

Текуща версия: 5.9.0

Последна актуализация: 24 май 2020 г.


98% Ratings


800000 + инсталирания


WP 4.6 + Изисква

Страница на приставката за WordPress.org


WordPress Plugin за кратки кодове – кратки кодове Ultimate

Тези два приставки трябва да ви дадат повече от достатъчно възможности за анимиране на определени елементи на вашите страници и да ги накарат да изскачат малко повече, когато потребителят взаимодейства с тях. Разбира се, не искате да прекалявате с тези, но даването на допълнителен тласък на потребителя, когато той взаимодейства с вашия ключов призив за действия, може да помогне много.

Какво мислите за микро взаимодействията, обмисляте ли да използвате този урок за микро взаимодействия и да добавите нещо към вашия сайт? Уведомете ни в коментарите.

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 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