מדריך מיקרו-אינטראקציות למפתחים מתחילים: כיצד ליצור כפתור “אהבתי” אינטראקטיבי עם CSS ו- JavaScript

מדריך מיקרו-אינטראקציות למתחילים


אני חושב שבטוח לומר שמיקרו-אינטראקציות זה מגניב. אנו – אנשי רשת – כולם נהנים מהם. ולא משנה אם אתה מבחין בהם או לא, הם מספקים שיפור משמעותי בחוויית המשתמש. בכך שהאתר או כלי האינטרנט שלך יתעוררו לחיים בצורה עדינה ובאופן ידידותי, הם פשוט גורמים למשתמש ליהנות מכל האינטראקציה קצת יותר.

ברוח זו, אני רוצה לתת לך הדרכה מהירה במיקרו-אינטראקציות ולהראות לך כיצד ליצור מגניב "כמו" כפתור לאתר שלך. עם קוד מינימלי. הנה זה בפעולה:

די מרגש עבור כפתור האגודלים, לא? בואו נגיע לזה!

אבל קודם:

למה לטרוח מלכתחילה עם מיקרו-אינטראקציות?

אני לא מתכוון לנסות לשכנע אותך יותר מדי כאן, אבל בואו נסתכל על כמה דברים.

אינטראקציות מיקרו קיימות כבר זמן מה – מספיק כדי שיהיה להם אפילו ספרים מלאים כתוב עליהם. בנוסף, היו ניסויים ומחקרים רבים שבדקו עד כמה הם מועילים ויעילים.

אחד מבתי המחקר הבולטים ביותר, קבוצת נילסן נורמן, בדק אינטראקציות מיקרו יותר מקרוב בשנת 2018. על פי מסקנותיהם, מיקרו-אינטראקציות הוכיחו, בין השאר, שיפור חוויית המשתמש על ידי עידוד מעורבות ותקשורת מותג..

בקיצור, מיקרו-אינטראקציות יכולות להיות מועילות באמת אם משתמשים בהן נכון, וגם לא בכבדות רבה מדי. היום אנו נראה לכם דוגמא אחת פשוטה למיקרו-אינטראקציה בפעולה:

הדרכה בנושא מיקרו-אינטראקציות: הסימון וה- CSS הבסיסי של כפתור האצבעות שלנו

�� הערה; בתחתית, יש לנו כמה אפשרויות עבורך שאינן כרוכות בכתיבת קוד ביד.

ראשית, אנו זקוקים לכישוף קסם HTML ו- CSS ישן וטוב כדי לגרום לו לעבוד. המבנה די פשוט.

אנו הולכים להשתמש בתג SVG עבור אייקון הדומה עצמו – זה מ גופן מדהים; אתה יכול למצוא את רוב הסמלים כאן. רק כדי להתאים את תכונות הרוחב והגובה של תג SVG, אנו הולכים להשתמש ב- HTML למטה:

עכשיו עבור CSS, אנחנו הולכים להיות בסיסיים באמת. מה שאנחנו רוצים שיקרה כאן זה לתת מבט יפה לכפתור הדומה שלנו ולמרכז הכל יפה על המסך. אנו כבר יודעים שאנחנו הולכים להחליף כיתה בלחיצה (הכיתה הפעילה), ולכן עלינו לתת דין וחשבון על כך. אנו הולכים למלא את הסמל בצבע כחול כאשר הוא פעיל ואפור כהה כשלא:

גוף {
תצוגה: flex;
יישור פריטים: מרכז;
justify-content: מרכז;
גובה: 100 vh;
}

.כמו כפתור {
תצוגה: flex;
יישור פריטים: מרכז;
justify-content: מרכז;
}

.like-button.active {
-webkit-animation: פופ 0.9 שניהם;
אנימציה: פופ 0.9 שניהם;
}

.like-button svg {
אטימות: 1;
}

.מסלול svg כמו-כפתור {
מילוי: # 333;
מעבר: מילוי .4 קלות החוצה;
}

.like-button.active מסלול svg {
מילוי: # 2196f3;
}

דבר נוסף שאנחנו רוצים כאן הוא אנימציית הפופ שמשתמשים בו כאשר הכפתור הופך לפעיל, אז אנחנו הולכים להוסיף את זה לקובץ CSS שלנו:

@ -webkit-keyframes pop {
0% {
-webkit-transform: scale3d (1, 1, 1);
טרנספורמציה: scale3d (1, 1, 1);
}
30% {
-webkit-transform: scale3d (1.25, 0.75, 1);
טרנספורמציה: scale3d (1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d (0.75, 1.25, 1);
טרנספורמציה: scale3d (0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d (1.15, 0.85, 1);
טרנספורמציה: scale3d (1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d (0.95, 1.05, 1);
טרנספורמציה: scale3d (0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d (1.05, 0.95, 1);
טרנספורמציה: scale3d (1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d (1, 1, 1);
טרנספורמציה: scale3d (1, 1, 1);
}
}

@keyframes pop {
0% {
-webkit-transform: scale3d (1, 1, 1);
טרנספורמציה: scale3d (1, 1, 1);
}
30% {
-webkit-transform: scale3d (1.25, 0.75, 1);
טרנספורמציה: scale3d (1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d (0.75, 1.25, 1);
טרנספורמציה: scale3d (0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d (1.15, 0.85, 1);
טרנספורמציה: scale3d (1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d (0.95, 1.05, 1);
טרנספורמציה: scale3d (0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d (1.05, 0.95, 1);
טרנספורמציה: scale3d (1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d (1, 1, 1);
טרנספורמציה: scale3d (1, 1, 1);
}
}

ה "אינטראקציה" חלק מהמדריך מיקרו-אינטראקציות זה

עכשיו אחרי שיש לנו את הסטיילינג הבסיסי מהדרך, הגיע הזמן לטפל באינטראקציות בפועל – זה אומר JavaScript!

ראשית, אנו זקוקים לפונקציית JavaScript המייצרת מספר שלם אקראי בין מרווח נתון (מינימום ומקסימום):

פונקציה randomInt (דקות, מקסימום) {
להחזיר את Math.floor (Math.random () * (מקסימום – דקות + 1) + דקות);
}

בשלב הבא, אנו זקוקים לפונקציה אחרת שתחזיר +1 או -1 באופן אקראי, כך שנוכל לערכים שליליים או חיוביים אקראיים:

פונקציה plusOrMinus () {
להחזיר את Math.random () < 0.5? -1: 1;
}

עכשיו לטיפול בפועל באינטראקציות; בואו נסתכל על הקוד כדי להסביר אותו כראוי:

  • ראשית, אנו הולכים לשמור את הכפתור שלנו במשתנה ולהוסיף לו מאזין לאירועי קליקים.
  • כאשר לוחצים על הכפתור, אנו מתכוונים להוסיף פונקציית preventDefault () כך שאנו בטוחים ששום דבר לא רצוי יקרה.
  • לאחר מכן, אנו נוסיף להוסיף את הכיתה הפעילה שלנו לכפתור, שעיצבנו בעבר עם צבע כחול באמצעות CSS.
  • לאחר מכן אנו נפעיל את הפונקציה createClones () (שעדיין לא הוגדרה), ונעביר את הכפתור שלנו כפרמטר באמצעות זה.

תן לחצן = document.querySelector (".כמו כפתור");

button.addEventListener ("לחץ", פונקציה (ה) {
e.preventDefault ();
this.classList.toggle ("פעיל");
createClones (זה);
});

כעת נגדיר את הפונקציה createClones () ונעבור איתה בשלבים הבאים:

  1. ראשית, בואו ונחליט על מספר שיבוטים אקראי. אנו הולכים להעביר בין שני לארבעה שיבוטים עבור הסמל. אנו נשתמש בפונקציה randomInt () שהוגדרה בעבר.
  2. ואז, עבור כל שיבוט, אנו נשתמש בתג SVG שנמצא בתוך הכפתור שלנו בתור "דגם" ולהשתמש בפונקציית JavaScript cloneNode (true) כדי לשכפל אותה למשתנה חדש. אנו מתכוונים גם להגדיר גודל בין 5 ל -16 לשיבוט שלנו באמצעות פונקציית המחולל המספרי האקראי.
  3. בשלב הבא, אנו מתכוונים להוסיף את השיבוטים שלנו לכפתור, להגדיר את הרוחב והגובה שלהם עם המספר שנוצר בעבר ולהפוך את מיקומם למוחלט כך שנוכל להעביר אותם באופן עצמאי מהכפתור.
  4. דבר נוסף שאנו זקוקים לו הוא מעבר לשיבוטים שלנו, כך שהם לא סתם נכנסים למקום החדש שלהם בעת לחיצה.
  5. כעת, כדי להוסיף את התמורות בפועל שיזיזו את הסמל שלנו, אנחנו הולכים להשתגע. אנו רוצים שהשיבוטים שלנו יעברו ממרכז הכפתור כלפי חוץ באופן אקראי. בעזרת שילוב של פונקציות randomInt () ו- plusOrMinus (), אנו הולכים להעביר את השיבוטים שלנו בציר XY עם נכס ה- CSS translate3d. אנו מתכוונים להשתמש גם ב- "גרזן", מכיוון שהמעבר שלנו לא יחול אחרת. אז הוספת פונקציית setTimeout () פשוטה הולכת לעזור לנו להשיג זאת. יחד עם זאת, אנו הולכים להעביר את האטימות ל -0, לגרום לשיבוטים להיעלם.
  6. מוחק את השיבוטים שלנו. עלינו לפנות את ה- DOM אחרי שסיימנו את כל הג’אז. לכן אנו זקוקים לפונקציית setTimeout נוספת () שתסיר את השיבוטים שלנו מה- DOM לאחר שנייה אחת.

createClones (לחצן) {
// 1. צור שיבוטים וחלף על פני המספר שנקבע
תן לשכפולים = randomInt (2, 4);
עבור (תן לזה = 1; זה <= שיבוטים; זה ++) {
// 2. קבל את שיבוט תג SVG במשתנה וייצר גודל אקראי
בואו לשכפל = button.querySelector ("svg") .cloneNode (נכון),
גודל = randomInt (5, 16);
// 3. הוסף את השיבוט שלנו לכפתור ושנה את רוחב / גובה / מיקום שלו
button.appendChild (שיבוט);
clone.setAttribute ("רוחב", גודל);
clone.setAttribute ("גובה", גודל);
clone.style.position = "מוחלט";
// 4. הוסף כמה מעברים נוצצים
clone.style.transition =
"הפוך 0.5 ש”ח מעוקב (0.12, 0.74, 0.58, 0.99) 0.3 שניות, אטימות קלות החוצה .5 שניות";
// 5. הנפש את הסמל שלנו כלפי חוץ באמצעות פונקציית setTimeout כך שתואמת CSS.
תן animTimeout = setTimeout (פונקציה () {
clone.style.transform =
"תרגם 3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"px, 0)";
clone.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. הסרת השיבוטים לאחר 0.9 שניות
תן removeNodeTimeout = setTimeout (פונקציה () {
שיבוט.parentNode.removeChild (שיבוט);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

זהו זה! סיימנו את זה בסוף! למטה תוכלו למצוא את הדוגמה של CodePen:

ראו את העט
כמו כפתור
מאת אנדריי בייצ’ו (@abaicus)
ב קוד פן.

תודה שעברת על זה!

אפשרויות נוספות להוסיף מיקרו אינטראקציות לוורדפרס

אם כתיבת קוד באופן ידני אינה לגמרי הדבר שלך, יש למעשה קומץ תוספי וורדפרס לא מעטים שבהם אתה יכול להשתמש בכדי להשיג מיקרו-אינטראקציות לאתר שלך מבלי שתצטרך לדאוג איך הכל עובד תחת מכסה המנוע..

ראשית, אתה יכול להשתמש ב- הנפש אותו! תוסף להנפשת כמעט כל אלמנט בדפים שלך באמצעות CSS3.

לדוגמה, אתה יכול להוסיף כפתור, או פיסת טקסט, ואז להגדיר אותו להנפשה בצורה מסוימת בלחיצה.

הנה דוגמה למה התוסף יכול לעשות – וידאו ��.


הנפש אותו!

מחבר / ים: אולפני עיצוב eLEOPARD


100% דירוגים


40,000 + התקנות


4.7.0 משלים

עוד מידע

הנפשה-it.2.3.7.zip

גרסה נוכחית: 2.3.7

עודכן לאחרונה: 20 במרץ, 2020


100% דירוגים


40,000 + התקנות


4.7.0 משלים

דף התוסף של WordPress.org


הנפש אותו!

תוסף נוסף, ואחד המועדפים על העורך שלנו הוא קודי קיצור.

בין שפע שלם של קיצורי דרך שונים, יש אחד לאנימציות פשוטות. יש כמה קביעות מוגדרות מראש כיצד האנימציה צריכה להתנהג, ואתה יכול לשים כמעט כל דבר בתוך הבלוק שהולך להיות מונפש.

הנה דוגמה לכפתור מונפש (שימו לב; ההנפשה פועלת רק בפעם הראשונה שהיא גולשת לתצוגה; אם אינך רואה אותה, רענן את הדף):

לחץ עלי


תוסף קיצורי וורדפרס –

מחבר / ים: ולדימיר אנוקין


98% דירוגים


800,000 + התקנות


WP 4.6 + דורש

עוד מידע

shortcodes-ultimate.5.9.0.zip

גרסה נוכחית: 5.9.0

עודכן לאחרונה: 24 במאי 2020


98% דירוגים


800,000 + התקנות


WP 4.6 + דורש

דף התוסף של WordPress.org


תוסף קיצורי וורדפרס –

שני התוספים האלה צריכים לתת לך יותר מדי אפשרויות להנפשת אלמנטים מסוימים בדפים שלך ולגרום להם לפופ קצת יותר כאשר המשתמש מתקשר איתם. כמובן, אינך מעוניין להסתדר עם אלה, אך מתן אפשרות לדחוף למשתמש כשהוא מתקשר עם קריאת המפתח שלך לפעולות עשויה לעזור רבות.

מה אתה חושב על מיקרו-אינטראקציות, האם אתה שוקל להפיק את השימוש במדריך המיקרו-אינטראקציות ולהוסיף משהו לאתר שלך? נודיע בתגובות.

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 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