יצירת רכיב של סטוריז

סקירה כללית בסיסית של הדרכים ליצירת חוויה שדומה לסטוריז ב-Instagram באינטרנט.

Adam Argyle

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

הדגמה

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

אם אתם מעדיפים סרטון, הנה גרסה של YouTube לפוסט:

סקירה כללית

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

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

לבחור את הכלים המתאימים לעבודה

בסך הכול, מצאתי את הרכיב הזה די קל לבנייה, לתכונות קריטיות של פלטפורמת האינטרנט. בואו נכסה אותם!

רשת CSS

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

פריסת חברים

ה-wrapper הראשי של רכיב .stories הוא תצוגת גלילה אופקית שמותאמת לניידים:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
איך להשתמש בכלי הפיתוח ל-Chrome מצב המכשיר כדי להדגיש את העמודות שנוצרו על ידי Grid

נפרט את הפריסה של grid:

  • אנחנו ממלאים את אזור התצוגה בנייד באופן מפורש ב-100vh וב-100vw ומגבילים את הגודל במחשבים
  • / מפרידה בין התבניות של השורות והעמודות
  • תרגום של auto-flow לgrid-auto-flow: column
  • תבנית הזרימה האוטומטית היא 100%, ובמקרה הזה הוא כל רוחב חלון הגלילה

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

סידור בערימה

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

באמצעות רשת CSS ניתן להגדיר רשת של תא יחיד (כלומר ריבוע), כאשר השורות והעמודות חולקות את הכינוי ([story]), ואז כל צאצא מוקצה לשם מרחב תא יחיד עם כינוי:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

כך ה-HTML שלנו שולט בסדר הערימה ושומר על כל הרכיבים זורמים. שימי לב שלא היינו צריכים לעשות שום דבר עם המיקום של absolute או עם z-index לא היה צורך למלא את התיבה עם height: 100% או width: 100% בצורה נכונה. רשת ההורה כבר הוגדר גודל אזור התצוגה של תמונת הסיפור, כך שאף אחד מהרכיבים האלה של הסיפור צריך לומר להם למלא אותו!

נקודות Snap של גלילה ב-CSS

המפרט של CSS Scroll Snap Points לחיצה על האצבעות כדי לנעול רכיבים באזור התצוגה בזמן הגלילה. לפני שמאפייני ה-CSS האלה היו קיימים, הייתם צריכים להשתמש ב-JavaScript, והוא היה... מסובך, לפחות. ביצוע צ'ק-אאוט חדש: נקודות Snaps של CSS Scroll מאת שרה דרסנר (Sarah Drasner), שמסבירה בפירוט איך להשתמש בהן.

גלילה אופקית בלי ועם scroll-snap-points סגנונות. בלי האפשרות הזו, המשתמשים יכולים לגלול בחינם כרגיל. כך הדפדפן מניח בעדינות על כל פריט.
הורה
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
 הורה עם גלילת יתר מגדיר התנהגות של הצמדה.
צאצא
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 ילדים בוחרים להיות מטרה מהירה.

בחרתי ב- Scroll Snap Points מכמה סיבות:

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

תאימות לדפדפנים שונים

בדקנו את האפשרויות ב-Opera, Firefox, Safari ו-Chrome, וגם ב-Android וב-iOS. הנה סקירה קצרה של תכונות האינטרנט שבהן מצאנו הבדלים ביכולות ובתמיכה.

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

scroll-snap-stop

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

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

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

מידע נוסף זמין ב מפרט אם מעניין אותי.

overscroll-behavior

האם אי פעם גללתם בחלון של חלון, ופתאום הגעתם אליו להתחיל לגלול את התוכן מאחורי החלון? overscroll-behavior מאפשרים למפתח "לגלות" את הגלילה ואף פעם לא מאפשרים לו עזיבה. זה טוב לכל סוגי האירועים. הרכיב 'הסטוריז שלי' משתמש בו כדי למנוע העברה של החלקות נוספות ותנועות גלילה נוספות לרכיב הזה.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

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

scrollIntoView({behavior: 'smooth'})

כשמשתמש מקיש או לוחץ והגיע לסוף סדרת הסיפורים של חבר, הגיע הזמן לעבור לחבר הבא בסדר נקודות הגלילה. ב- JavaScript, הצלחנו להפנות לחבר הבא ולבקש שהוא גוללים לתצוגה. יש תמיכה מצוינת ביסודות האלה; כל דפדפן גלל בתצוגה. אבל לא כל דפדפן עשה זאת 'smooth'. זה רק אומר אם היא נגללה לתצוגה במקום מוקפצת.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari היה הדפדפן היחיד שלא התמוך כאן ב-behavior: 'smooth'. ביצוע צ'ק-אאוט תאימות הדפדפן לקבלת עדכונים.

הפעלה קולית

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

רמיקסים קהילתיים