إنشاء مكوِّن القصص

نظرة عامة أساسية حول كيفية إنشاء تجربة مشابهة لـ "قصص Instagram" على الويب

Adam Argyle

في هذا المنشور، أريد مشاركة أفكار حول إنشاء عنصر "قصص" ل الويب يكون سريع الاستجابة ويتوافق مع التنقّل باستخدام لوحة المفاتيح ويعمل على جميع المتصفّحات.

الإصدار التجريبي

إذا كنت تفضّل مشاهدة عرض عملي لإنشاء مكوّن "قصص" هذا بنفسك، يمكنك الاطّلاع على الدرس التطبيقي حول الترميز الخاص بمكوّن "قصص".

إذا كنت تفضّل مشاهدة الفيديوهات، يمكنك الاطّلاع على نسخة من هذه المشاركة على YouTube:

نظرة عامة

من الأمثلة الشائعة على تجربة المستخدم في ميزة "قصص" قصص Snapchat وقصص Instagram (ناهيك عن "المهام الإضافية"). من حيث تجربة المستخدم بشكل عام، عادةً ما تكون ميزة "القصص" مصمّمة للأجهزة الجوّالة فقط، وهي تتمحور حول النقر للتنقل في الاشتراكات المتعدّدة. على سبيل المثال، في Instagram، يفتح المستخدمون قصة أحد الأصدقاء ويتصفّحون الصور الواردة فيها. وعادةً ما يفعلون ذلك مع العديد من الأصدقاء في وقت واحد. من خلال النقر على الجانب الأيمن من الجهاز، يمكن للمستخدم التخطّي إلى القصص التالية الخاصة بهذا الصديق. من خلال التمرير سريعًا لليمين، ينتقل المستخدم إلى صديق آخر. يشبه مكوّن "القصة" إلى حدٍ كبير لوحة العرض الدوّارة، ولكنه يسمح بالتنقّل في صفيف متعدّد الأبعاد بدلاً من صفيف أحادي الأبعاد. يبدو الأمر وكأنّ هناك لوحة عرض دوّارة داخل كل لوحة عرض دوّارة. 🤯

صفيف متعدّد الأبعاد مرئي باستخدام البطاقات من اليمين إلى اليسار، تظهر حزمة من البطاقات ذات الحدود الأرجوانية، وفي داخل كل بطاقة بطاقة واحدة أو أكثر ذات حدود زرقاء سماوية. قائمة في قائمة
لوحة العرض الدوّارة الأولى للأصدقاء
لوحة العرض الدوّارة الثانية "المكدسة" للقصص
👍 قائمة في قائمة، وتُعرف أيضًا باسم: صفيف متعدد الأبعاد

اختيار الأدوات المناسبة للوظيفة

بوجهٍ عام، تبيّن لي أنّه من السهل جدًا إنشاء هذا المكوّن، وذلك بفضل بعض ميزات منصّة الويب المهمة. لنطّلِع على هذه النقاط.

شبكة CSS

تبيّن أنّ تنسيقنا ليس صعبًا على CSS Grid لأنّه مزوّد ببعض الطرق الفعّالة لتنظيم المحتوى.

تنسيق "الأصدقاء"

إنّ الغلاف الأساسي لمكوّن .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:

على الهاتف الجوّال، يمكنك اعتبار حجم الصف هو ارتفاع إطار العرض و أنّ كل عمود هو عرض إطار العرض. لنواصل مثال "قصص Snapchat" و "قصص Instagram"، سيكون كل عمود قصة أحد الأصدقاء. نريد أن تستمر قصص الأصدقاء خارج إطار العرض حتى يكون لدينا مكان للانتقال إليه. ستنشئ الشبكة أي عدد من الأعمدة تحتاجه لتنسيق HTML لكل قصة صديق، ما يسمح لنا بإنشاء حاوية لفائف ديناميكية وتفاعلية. من خلال استخدام الشبكة، تمكّنا من تجميع التأثير بالكامل.

التجميع

بالنسبة إلى كل صديق، نحتاج إلى قصصه في حالة جاهزة للفهرسة. استعدادًا للحركة وأنماط ممتعة أخرى، اخترت حزمة. عندما أقول "تجميع"، أعني أنّك تنظر إلى sandwich من الأعلى، وليس من الجانب.

باستخدام شبكة 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%. لقد حدّدت الشبكة الرئيسية حجم إطار عرض صورة القصة، لذا لم يكن من الضروري تحديد أيّ من مكوّنات القصة لملئه.

نقاط التصاق التمرير في CSS

تجعل مواصفات نقاط التصاق التمرير في CSS من السهل قفل العناصر في إطار العرض عند الانتقال للأعلى أو للأسفل. قبل توفّر سمات CSS هذه، كان عليك استخدام JavaScript، وكان ذلك أمرًا صعبًا على أقل تقدير. اطّلِع على مقالة Introducing CSS Scroll Snap Points التي كتبتها سارة دراسنر للحصول على شرح مفصّل عن كيفية استخدامها.

التمرير الأفقي بدون أنماط 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;
}
 يوافق الأطفال على أن يكونوا هدفًا للصور المصغّرة.

لقد اخترتُ نقاط التصاق التمرير لعدة أسباب:

  • إمكانية الوصول المجاني: تشير مواصفات نقاط التصاق التمرير إلى أنّ الضغط على مفتاحَي السهم المتّجه لليسار والسهم المتّجه لليمين يجب أن يؤدي إلى التنقّل في نقاط التصاق بشكل تلقائي.
  • مواصفات متزايدة: تحصل مواصفات نقاط التصغير/التكبير أثناء الانتقال على ميزات وتحسينات جديدة باستمرار، ما يعني أنّ عنصر "قصص" سيتحسّن على الأرجح من الآن فصاعدًا.
  • سهولة التنفيذ: تم تصميم نقاط "التمرير السريع" بشكل عملي لخدمة حالة الاستخدام المتعلّقة بصفحة الترقيم الأفقية التي تركّز على اللمس.
  • الاستجابة الحرة على غرار النظام الأساسي سيتم التمرير في كل نظام أساسي واستراحة المحتوى وفقًا لنمطه، على عكس الاستراحة والانتقال العاديَين اللذَين يمكن أن يتسببا في ظهور نمط التمرير والاستراحة غير المعتاد.

التوافق مع جميع المتصفّحات

لقد اختبرنا هذه الميزة على متصفّحات Opera وFirefox وSafari وChrome، بالإضافة إلى Android وiOS. في ما يلي ملخّص موجز عن ميزات الويب التي تبيّن لنا أنّها تختلف في الإمكانات والتوافق.

ومع ذلك، لم يتم تطبيق بعض قواعد CSS، لذا لا تستفيد بعض المنصات حاليًا من تحسينات ملف تعريف المستخدم. لقد أعجبتني فكرة عدم الحاجة إلى إدارة هذه الميزات، وأثق تمامًا بأنّها ستتوفّر في النهاية على متصفّحات ومنصّات أخرى.

scroll-snap-stop

كانت لوحات العرض الدوّارة إحدى حالات استخدام تجربة المستخدم الرئيسية التي أدّت إلى إنشاء مواصفات نقاط التصغير/التكبير في CSS. وعلى عكس "قصص"، لا تحتاج لوحة العرض الدوّارة إلى التوقف دائمًا عند كل صورة بعد تفاعل المستخدم معها. قد يكون من المفيد أو المُشجَّع التنقّل بسرعة في لوحة العرض الدوّارة. من ناحية أخرى، من الأفضل التنقّل في القصص الواحدة تلو الأخرى، وهذا ما يوفّره 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' هنا. يمكنك الاطّلاع على توافق المتصفّح للحصول على آخر المعلومات.

التدريب العملي

الآن بعد أن عرفت كيف فعلت ذلك، كيف ستفعل ذلك؟ لننوّع الطرق التي نتّبعها ونتعرّف على جميع الطرق لإنشاء تطبيقات على الويب. أنشئ Glitch، أرسِل إليّ تغريدة تتضمّن نسختك، وسنضيفها إلى قسم الريمكسات التي أنشأها المستخدمون أدناه.

الريمكسات التي أنشأها المستخدمون