نظرة عامة على تقنية التمرير

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

تقنيات لتنفيذ آليات التمرير المحددة

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

property خاصية خاصية CSS: لزجة

إذا كنت بحاجة إلى منع بعض العناصر من التمرير مع بقية محتوى الصفحة ، فعند تصميم هذا العنصر ، يكفي تطبيق الخاصية position: sticky. هذه خدعة بسيطة ومفهومة ؛ تم دعمه في المتصفحات الحديثة. ولكن لكي يعمل هذا في IE وفي بعض متصفحات الجوال ، ستحتاج إلى ملء متعدد. إذا كنت مهتمًا بهذا الموضوع ، فألق نظرة على هذه المادة.





العنصر الأزرق "يستقر" في أعلى الحاوية ولا يتدحرج مع باقي العناصر ،



وهنا توضيح لهذا التمرير.

Par تأثير المنظر

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





تأثير المنظر: تتحرك العناصر بسرعات مختلفة.



هنا توضيح لتأثير المنظر.

▍ قم بالتمرير إلى نقاط محددة

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





إذا قام المستخدم بتمرير المحتوى ونقل العنصر بعيدًا عن الحد العلوي للحاوية ، فسيقوم المتصفح تلقائيًا بتغيير العنصر بحيث يكون مرئيًا بالكامل. في ما



يلي توضيح لكيفية عمل التمرير مع نقاط الربط.

scroll التمرير السلس

يدعم المستعرض التمرير السلس عند تمرير الصفحة إلى قسم معين باستخدام طريقة window.scrollTo () في جافا سكريبت ، أو حتى باستخدام خاصية CSS لسلوك التمرير . حاليا ، مطلوب مكتبات جافا سكريبت خاصة لتنفيذ التمرير السلس مع الصقل من حركات عجلة الماوس. ولكن عند استخدام هذه المكتبات ، من الضروري ضمان تفاعلها الطبيعي مع تقنيات التمرير الأخرى. بالإضافة إلى ذلك ، فإن استخدام التمرير السلس ليس دائمًا فكرة جيدة.

تقنيات التمرير العامة

لا توجد حاليًا طريقة CSS فقط لتشغيل أي رسوم متحركة للتمرير للأغراض العامة بناءً على موضع التمرير (على الرغم من وجود اقتراح بأن لدينا بعض الرسوم المتحركة للتمرير للأغراض العامة تحت تصرفنا في المستقبل البعيد) ... ونتيجة لذلك ، إذا كنت تريد تحريك العناصر أثناء التمرير ، فستحتاج على الأقل إلى استخدام بعض تعليمات JavaScript البرمجية لتحقيق التأثير المطلوب. هناك طريقتان لاستخدام JavaScript لتحريك العناصر أثناء التمرير. الأول هو استخدام واجهة برمجة تطبيقات Intersection Observer ، والثاني هو التعامل مع الحدث scroll.

▍ استخدام واجهة برمجة تطبيقات Intersection Observer

تسمح لك IntersectionObserver API بحل المهام المختلفة المتعلقة بالتمرير بنجاح ، إذا كان كل ما يلزم لبدء الرسم المتحرك هو معرفة ما إذا كان عنصر مرئيًا في إطار العرض ، وأي جزء من العنصر مرئي ... وهذا يجعل IntersectionObserver API أداة رائعة لبدء الرسوم المتحركة المصاحبة لظهور عنصر على الشاشة. ولكن حتى مع ذلك ، فإن بعض التأثيرات صعبة للغاية (على الرغم من أنها ممكنة) للتنفيذ باستخدام واجهة برمجة التطبيقات هذه. على سبيل المثال ، هذا هو إطلاق الرسوم المتحركة المختلفة اعتمادًا على اتجاه العنصر. بالإضافة إلى ذلك ، فإن واجهة برمجة التطبيقات هذه ليست مفيدة بشكل خاص في حالة حيث ، عند التمرير ، تحتاج إلى بدء الرسوم المتحركة عندما يكون العنصر في مكان ما في منتصف إطار العرض ، أي أنه لا يظهر في إطار العرض أو يختفي منه.

▍استخدام حدث التمرير

قبل أي شخص يستخدم حدثًا لتنفيذ الرسوم المتحركة أثناء التمرير ، scrollتفتح فرص رائعة جدًا. تسمح هذه التقنية ، عند التمرير ، بالعمل على العنصر في أي موضع للعنصر بالنسبة لحدود منطقة العرض. باستخدام الحدث scroll، يمكنك بدقة شديدة ، وفقًا لاحتياجات المشروع ، تعيين مواضع بداية الرسوم المتحركة ونهايتها.



بالنظر إلى ذلك ، تجدر الإشارة إلى أن هذا النهج في التمرير للرسوم المتحركة يمكن أن يخلق حملًا كبيرًا على النظام. يحدث هذا إذا لم يهتم المطور بالأداء ولم يحد من تكرار معالجة الأحداث scroll. بالإضافة إلى ذلك ، تحت تصرف المبرمج الذي يقرر استخدام الحدثscroll، لن تكون هناك واجهة برمجة تطبيقات مناسبة تسمح لك بتنفيذ سيناريوهات التمرير المختلفة. هذا هو السبب في أنه في كثير من الأحيان ، بدلاً من تنفيذ آليات التعامل مع الأحداث scrollبنفسك ، من المنطقي استخدام مكتبة متخصصة ، وقد اهتم مؤلفوها بالفعل بكل من تأثير scrollالأداء على معالجة الأحداث وواجهة برمجة التطبيقات. بعض هذه المكتبات قادرة حتى على مساعدة المطور عندما تكون هناك مشاكل في أحجام العناصر.

أدوات التمرير للأغراض العامة

هناك العديد من مكتبات التمرير القوية التي تهدف إلى منح المطور تحكمًا كاملاً في الرسوم المتحركة التي يتم إجراؤها عند التمرير عبر الصفحات ، وكذلك لجعل الحياة سهلة قدر الإمكان للمطور دون إجباره على إجراء حسابات معقدة بنفسه.

crScrollMagic

توفر لنا مكتبة ScrollMagic واجهة برمجة تطبيقات بسيطة نسبيًا تتيح لنا إنشاء تأثيرات مختلفة عند التمرير. يمكن أن تعمل هذه المكتبة مع مكتبات الرسوم المتحركة المختلفة مثل GSAP و Velocity.js . صحيح ، في السنوات القليلة الماضية لم يتم دعم هذه المكتبة بشكل جيد. أدى هذا إلى إنشاء مكتبة ScrollScene.

crScrollScene

ScrollScene ، في جوهره ، عبارة عن غلاف يهدف إلى زيادة قابلية استخدام مكتبة ScrollMagic و / أو IntersectionObserver API. تستخدم نسختها الخاصة من ScrollMagic ، والتي تتمتع بدعم أفضل من المكتبة العادية. هناك ميزات إضافية هنا ، مثل تشغيل الفيديو ودعم نقاط التوقف التي تؤثر على الرسوم المتحركة. بالإضافة إلى ذلك ، تستخدم هذه المكتبة GSAP.

crScrollTrigger

مكتبة ScrollTrigger هي المكوّن الإضافي الرسمي GreenSock لـ GSAP. تحتوي هذه المكتبة على مجموعة واسعة من الميزات ، ويبدو أن واجهة برمجة التطبيقات الخاصة بها هي أبسط المكتبات الموجودة لتمرير المكتبات. باستخدام هذه المكتبة ، لديك تحكم كامل في مكان بداية الرسوم المتحركة للتمرير ونهايتها ، يمكنك تحريك أي شيء تريده أثناء التمرير (WebGL ، كانفاس ، SVG ، DOM) ، يمكنك تثبيت العناصر أثناء تشغيل الرسوم المتحركة. لا تقتصر إمكانيات هذه المكتبة على ذلك. بالإضافة إلى ذلك ، يدعم GreenSock هذه المكتبة ؛ يمكنك الحصول على المساعدة في استخدامها على منتديات GreenSock.

library مكتبة جديرة بالملاحظة: تمرير قاطرة

لا تسعى مكتبة قاطرة التمرير لتقديم مجموعة واسعة من الميزات مثل المكتبات الأخرى التي ناقشناها. الغرض الرئيسي منه هو تنفيذ التمرير السلس. باستخدامه ، بالإضافة إلى ذلك ، يمكنك تحريك بعض خصائص كائنات DOM باستخدام السمات data-*، أو استخدام معالج onscrollلتحريك كائنات من أنواع أخرى.

مقارنة التقنيات والأدوات

هنا مقارنة بين تقنيات التمرير.





فيما يلي مقارنة بين المكتبات التي تمت مراجعتها.

النتيجة

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



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



ما التقنيات التي تستخدمها عند إعداد التمرير في مشاريعك؟