Başlayan inkişaf etdiricilər üçün mikro qarşılıqlı əlaqə Tutorial: CSS və JavaScript ilə İnteraktiv “Like” düyməsini necə yaratmaq olar

Başlayan inkişaf etdiricilər üçün mikro qarşılıqlı əlaqə Tutorial: CSS və JavaScript ilə İnteraktiv “Like” düyməsini necə yaratmaq olar

Başlayan inkişaf etdiricilər üçün mikro qarşılıqlı əlaqə Tutorial: CSS və JavaScript ilə İnteraktiv “Like” düyməsini necə yaratmaq olar
СОДЕРЖАНИЕ
02 июня 2020

Yeni başlayanlar üçün mikro qarşılıqlı əlaqə


Mikro qarşılıqlı əlaqələrin sərin olduğunu söyləmək təhlükəsizdir. Biz – veb insanlar – hamısı onlardan zövq alırlar. Onları görməməyinizdən və ya görməməyinizdən asılı olmayaraq, istifadəçi baxımından əhəmiyyətli bir inkişaf təmin edir. Veb saytınızı və ya veb vasitənizi incə və səmimi bir şəkildə həyata keçirməklə, istifadəçini bütün qarşılıqlı əlaqəni kiçik bir az daha xoş hala gətirirlər..

Bu ruhda sizə tez bir mikro qarşılıqlı dərs verim və sərin bir şəkildə necə yaratmağı sizə göstərmək istəyirəm "Kimi" saytınız üçün düymə. Minimum kodu ilə. Budur fəaliyyətdədir:

Baş barmaq düymələri üçün olduqca maraqlıdır, elə deyilmi? Gəlin buna nail olaq!

Ancaq əvvəlcə:

Niyə ilk növbədə mikro qarşılıqlı təsir?

Burada sizi çox inandırmağa çalışmaq niyyətində deyiləm, ancaq bir neçə məqama nəzər salaq.

Mikro qarşılıqlı təsirlər bir müddətdir – kifayət qədərdir ki, belə olsun tam kitablar onlar haqqında yazılıb. Üstəlik, əslində nə qədər faydalı və təsirli olduğunu araşdıran bir çox təcrübə və tədqiqatlar olmuşdur.

Ən diqqət çəkən tədqiqat evlərindən biri olan Nielsen Norman Group mikro qarşılıqlı əlaqələrə daha çox baxdı yaxin 2018. Onların nəticələrinə görə, mikro qarşılıqlı əlaqə digər şeylər arasında nişanlanmanı təşviq etmək və marka ilə əlaqə yaratmaqla istifadəçi təcrübəsini inkişaf etdirdiyini sübut etdi..

Qısacası, mikro qarşılıqlı təsirlər düzgün istifadə edilərsə və çox da ağır olmasa çox faydalı ola bilər. Bu gün sizə mikro qarşılıqlı fəaliyyətin sadə bir nümunəsini göstərəcəyik:

Mikro qarşılıqlı əlaqə üçün təlimat: Baş barmağımız düyməsinin işarələmə və əsas CSS

�� Qeyd; altındakı, əl ilə kod yazmağı özündə olmayan bəzi variantlarımız var.

Əvvəlcə işləməsi üçün bir az yaxşı köhnə HTML və CSS sehrinə ehtiyacımız var. Quruluş olduqca sadədir.

Bənzər simgənin özü üçün SVG etiketindən istifadə edəcəyik – bu Şrift Zəhmli; nişanların çoxunu tapa bilərsiniz burada. SVG etiketinin eni və hündürlüyü atributlarını tənzimləmək üçün aşağıdakı HTML-dən istifadə edəcəyik:

İndi CSS üçün əsl əsasa keçəcəyik. Burada baş vermək istədiyimiz, bənzər düyməmizə gözəl bir görünüş vermək və hər şeyi gözəl şəkildə ekranda mərkəzləşdirməkdir. Artıq bildik ki, kliklə (aktiv sinif) bir sinif dəyişdiririk və bunun üçün hesab verməliyik. Aktiv olduqda və tünd boz rəngdə ikonanı mavi rəng ilə dolduracağıq:

bədən {
ekran: çevik;
align-items: mərkəz;
justify-content: mərkəz;
hündürlüyü: 100vh;
}

.like düyməsinə {
ekran: çevik;
align-items: mərkəz;
justify-content: mərkəz;
}

.like düyməsi.aktiv {
-webkit-animasiya: hər ikisi 0.9s;
animasiya: hər ikisi 0.9s;
}

.like düyməsini svg {
qeyri-şəffaflıq: 1;
}

.kimi düyməli svg yolu {
doldur: # 333;
keçid: doldurmaq .4s rahatlama;
}

.like-button.active svg yolu {
doldur: # 2196f3;
}

Burada istədiyimiz başqa bir şey, düymənin aktiv olduqda istifadə olunan pop animasiyasıdır, buna görə CSS sənədimizə əlavə edəcəyik:

@ -webkit-keyframes pop {
0% {
-vebkit-çevirmə: miqyaslı3d (1, 1, 1);
çevir: miqyas3d (1, 1, 1);
}
30% {
-webkit-transform: miqyaslı3d (1.25, 0.75, 1);
çevir: miqyas3d (1.25, 0.75, 1);
}
40% {
-vebkit-transformasiya: miqyas3d (0.75, 1.25, 1);
çevir: miqyas3d (0.75, 1.25, 1);
}
50% {
-vebkit-transformasiya: miqyas3d (1.15, 0.85, 1);
çevir: miqyas3d (1.15, 0.85, 1);
}
65% {
-vebkit-transformasiya: miqyas3d (0.95, 1.05, 1);
çevir: miqyas3d (0.95, 1.05, 1);
}
75% {
-webkit-transform: miqyaslı3d (1.05, 0.95, 1);
çevir: miqyas3d (1.05, 0.95, 1);
}
100% {
-vebkit-çevirmə: miqyaslı3d (1, 1, 1);
çevir: miqyas3d (1, 1, 1);
}
}

@keyframes pop {
0% {
-vebkit-çevirmə: miqyaslı3d (1, 1, 1);
çevir: miqyas3d (1, 1, 1);
}
30% {
-webkit-transform: miqyaslı3d (1.25, 0.75, 1);
çevir: miqyas3d (1.25, 0.75, 1);
}
40% {
-vebkit-transformasiya: miqyas3d (0.75, 1.25, 1);
çevir: miqyas3d (0.75, 1.25, 1);
}
50% {
-vebkit-transformasiya: miqyas3d (1.15, 0.85, 1);
çevir: miqyas3d (1.15, 0.85, 1);
}
65% {
-vebkit-transformasiya: miqyas3d (0.95, 1.05, 1);
çevir: miqyas3d (0.95, 1.05, 1);
}
75% {
-webkit-transform: miqyaslı3d (1.05, 0.95, 1);
çevir: miqyas3d (1.05, 0.95, 1);
}
100% {
-vebkit-çevirmə: miqyaslı3d (1, 1, 1);
çevir: miqyas3d (1, 1, 1);
}
}

The "qarşılıqlı əlaqə" bu mikro qarşılıqlı dərsliyin bir hissəsi

İndi əsas üslubu yoldan çıxartdıqdan sonra, faktiki qarşılıqlı əlaqə qurmağın vaxtı gəldi – bu JavaScript deməkdir!

Əvvəla, müəyyən bir interval (minimum və maksimum) arasında təsadüfi bir tam yaradan JavaScript funksiyasına ehtiyac duyacağıq:

funksiya randomInt (min, max) {
qaytar Math.floor (Math.random () * (maks – min + 1) + dəq);
}

Bundan sonra, təsadüfi mənfi və ya müsbət dəyərlərə sahib olmaq üçün təsadüfi olaraq +1 və ya -1-ni geri qaytaran başqa bir funksiyaya ehtiyac duyacağıq:

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

İndi faktiki qarşılıqlı işləmə üçün; düzgün izah etmək üçün koda baxaq:

  • Əvvəlcə düyməni dəyişəndə ​​saxlayırıq və ona bir klik hadisəsi dinləyicisini əlavə edirik.
  • Düymə tıklandığında, istenmeyen bir şeyin baş verməyəcəyinə əmin olmağımız üçün bir profilDefault () funksiyasını əlavə edəcəyik.
  • Bundan sonra, aktiv siniflərimizi əvvəllər CSS vasitəsilə mavi rəng ilə bəzədilmiş düyməyə əlavə edəcəyik.
  • Sonra düyməni parametr olaraq ötürərək generateClones () funksiyasını işlədirik (hələ təyin olunmur)..

icazə düyməsini = sənəd.querySelector (".kimi düymə");

düymə.addEventListener ("vurun", funksiya (e) {
e.preventDefault ();
bu.classList.toggle ("aktivdir");
generateClones (bu);
});

İndi generateClones () funksiyasını müəyyənləşdirək və aşağıdakı addımlarla keçək:

  1. Əvvəlcə təsadüfi sayda klon qərar verək. İkiqat üçün iki ilə dörd klon arasında təcavüz edəcəyik. Əvvəlcədən müəyyən edilmiş randomInt () funksiyasından istifadə edəcəyik.
  2. Sonra, hər bir klon üçün düyməmizdəki SVG etiketini a kimi istifadə edəcəyik "model" və yeni bir dəyişənə klonlaşdırmaq üçün cloneNode (true) JavaScript funksiyasından istifadə edin. Təsadüfi tam ədəd generatoru funksiyasından istifadə edərək klonumuz üçün 5 ilə 16 arasındakı ölçü təyin edəcəyik.
  3. Bundan sonra düymələrə klonlarımızı əlavə edəcəyik, genişliyini və boyunu əvvəlcədən əmələ gələn sayla təyin edirik və mövqelərini mütləq şəkildə düzəldirik ki, düymədən müstəqil olaraq hərəkət edə bilək..
  4. Lazım olan başqa bir şey, klonlarımız üçün bir keçiddir, buna görə tıklayarkən yalnız yeni yerlərinə girməzlər.
  5. İndi ikonamızı hərəkətə gətirəcək əsl dəyişiklikləri əlavə etmək üçün bir az dəli olduğumuzu düşünürük. Klonlarımızın düyməmizin mərkəzindən təsadüfi olaraq kənara çıxmasını istəyirik. RandomInt () və plusOrMinus () funksiyalarının birləşməsindən istifadə edərək translate3d CSS xassəsi ilə XY oxlarımızdakı klonlarımızı hərəkət etdirəcəyik. Bir də istifadə edəcəyik "hack", çünki keçidimiz başqa cür tətbiq edilməyəcəkdir. Beləliklə, sadə bir setTimeout () funksiyasının əlavə edilməsi buna nail olmağımıza kömək edəcəkdir. Eyni zamanda, qeyri-şəffaflığı 0-a çatdıracağıq, klonları yox edir.
  6. Klonlarımızı silmək. Bütün cazla tamamlandıqdan sonra DOM-u təmizləməliyik. Beləliklə, bir saniyədən sonra DOM-dan klonlarımızı çıxartmaq üçün başqa bir setTimeout () funksiyasına ehtiyacımız var.

generateClones (düymə) {
// 1. Klonları yaradın və müəyyən edilmiş say üzərində iterasiya edin
qoy klonlar = randomInt (2, 4);
üçün (qoy = 1; it <= klonlar; bu ++) {
// 2. SVG etiket klonunu dəyişəndə ​​alın və təsadüfi bir ölçü yaradın
qoy clone = button.querySelector ("svg") .cloneNode (doğru),
ölçüsü = randomInt (5, 16);
// 3. Düyməyə klonumuzu əlavə edin və ‘eni / boyu / mövqeyini dəyişdirin
düyməsini.appendChild (klon);
clone.setAttribute ("eni", ölçüsü);
clone.setAttribute ("hündürlük", ölçüsü);
klon.style.position = "mütləq";
// 4. Bəzi parlaq keçidlər əlavə edin
klon.style.transition =
"0.5s kub-bezier çevirmək (0.12, 0.74, 0.58, 0.99) 0.3s, qeyri-şəffaflıq 1s rahatlıq .5s";
// 5. Bir setTimeout funksiyası ilə simgimizi kənara canlandırın ki, CSS uyğun gəlir.
qoy animTimeout = setTimeout (funksiya () {
klon.style.transform =
"translate3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"px, 0)";
klon.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. 0.9 saniyədən sonra klonları çıxarmaq
RemoveNodeTimeout = setTimeout (funksiya () {
klon.parentNode.removeChild (klon);
ClearTimeout (removeNodeTimeout);
}, 900);
}
}

Bu belədir! Bunu sona qədər etdik! Aşağıda CodePen nümunəsini tapa bilərsiniz:

Qələmə baxın
Düymə kimi
by Andrei Băicuș (@abaicus)
yandır KodPen.

Bunu keçdiyiniz üçün təşəkkür edirəm!

WordPress-ə mikro qarşılıqlı təsir əlavə etmək üçün digər seçimlər

Əllə kod yazmaq tamamilə sizin işiniz deyilsə, başqalarının necə işlədiyini düşünmədən saytınıza mikro qarşılıqlı əlaqə qurmaq üçün istifadə edə biləcəyiniz bir çox WordPress plugin var..

Birincisi, istifadə edə bilərsiniz Onu canlandırın! CSS3 istifadə edərək səhifələrinizdəki hər hansı bir elementi canlandırmaq üçün plugin.

Məsələn, bir düymə və ya mətn parçası əlavə edə bilərsiniz və sonra tıklayarak müəyyən bir şəkildə canlandırmaq üçün qura bilərsiniz.

Budur, plaginin edə biləcəyi bir nümunə – video.


Onu canlandırın!

Müəllif (lər): eLEOPARD Dizayn Studiyaları


100% Reytinqlər


40.000 + quraşdırır


4.7.0 Tələblər

Daha çox məlumat

canli-it.2.3.7.zip

Cari versiya: 2.3.7

Son Yeniləmə: 20 Mart 2020


100% Reytinqlər


40.000 + quraşdırır


4.7.0 Tələblər

WordPress.org Plugin Səhifə


Onu canlandırın!

Digər bir plugin və redaktorumuzun ən sevdiylərindən biridir Shortcodes Ultimate.

Fərqli qısa kodların bütöv bir plethora arasında sadə animasiyalar üçün bir var. Animasiyanın necə davranacağına dair bəzi hafızalar var və cizgi əldə edəcək blokun içərisinə olduqca çox şey qoya bilərsiniz.

Budur bir cizgi düyməsinə bir nümunə (qeyd; animasiya yalnız ilk dəfə görünmə limanına diyirlənir; görmürsənsə, səhifəni yeniləyin):

Məni vurun


WordPress Shortcodes Plugin – Shortcodes Ultimate

Müəllif (lər): Vladimir Anoxin


98% Reytinqlər


800.000 + quraşdırır


WP 4.6 + tələb olunur

Daha çox məlumat

shortcodes-ultimate.5.9.0.zip

Cari versiya: 5.9.0

Son Yeniləmə: 24 May 2020


98% Reytinqlər


800.000 + quraşdırır


WP 4.6 + tələb olunur

WordPress.org Plugin Səhifə


WordPress Shortcodes Plugin – Shortcodes Ultimate

Bu iki plugin, səhifələrinizdəki müəyyən elementləri canlandırmaq və istifadəçi onlarla əlaqə qurarkən onları bir az daha populyarlaşdırmaq üçün sizə daha çox seçim verməlidir. Əlbətdə ki, bunları aşmaq istəmirsən, amma əsas çağırışınızla əlaqəyə girəndə istifadəçiyə əlavə bir dəsdəklik vermək çox kömək edə bilər.

Mikro qarşılıqlı təsir haqqında nə düşünürsünüz, bu mikro qarşılıqlı əlaqə dərsliyini yaxşı istifadəyə və saytınıza bir şey əlavə etməyi düşünürsünüz? Bizə şərhlərdə bildirin.

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

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