يُعد شريط التمرير قبل وبعد (before-and-after slider) من أسرع الطرق لعرض نتائج عملك. كل ما على المستخدم فعله هو سحب الفاصل للكشف عن تأثير إعادة التصميم أو التجديد أو التعديل الذي قمت به. لن يضطروا إلى التحديق في صورتين متجاورتين أو لعب لعبة اكتشاف الاختلافات — فالنتائج تظهر أمامهم مباشرة.
سواء كنت تدير وكالة أو كنت مستقلاً، أو مصمماً، أو مصوراً، أو فناناً، أو مقاولاً، أو أي شخص آخر يتطلع إلى عرض بعض أعماله، فإن استخدام شريط تمرير قبل وبعد يُعد طريقة رائعة للقيام بذلك. للأسف، على الرغم من كون Webflow واحداً من أكثر منشئي المواقع تقدماً (ويحظى بشعبية كبيرة بين المصممين)، إلا أنه لا يحتوي على شريط تمرير قبل وبعد مدمج. إذا كنت ترغب في إضافة واحد، فلديك ثلاثة خيارات: تثبيت عنصر “قابل للاستنساخ” (cloneable) من المجتمع، أو تضمين أداة (widget) مجانية مستضافة، أو إنشاء واحد من الصفر باستخدام محرك التفاعلات الأصلي لـ Webflow (المعروف بـ IX2).
نستكشف كل خيار من هذه الخيارات أدناه.
Pro Tip
إذا كان كل هذا يبدو متقدماً جداً، فاطلع على دليلنا التمهيدي حول كيفية إنشاء موقع إلكتروني قبل العودة إلى هنا.
الخيار الأول: استخدام عنصر Webflow قابل للاستنساخ (cloneable)
ربما تكون غريزتك الأولى هي البحث في معرض Made in Webflow أو في موقع مثل Flowbase عن “العناصر القابلة للاستنساخ” (cloneables). ورغم أن هذا قد ينجح، إلا أنه لا يخلو من المتاعب.
العيب الكبير هو أنك مقيد بطريقة شخص آخر في القيام بالأمور. يجب عليك الالتزام التام بالبنية الهيكلية الحالية للعنصر القابل للاستنساخ واصطلاحات التسمية الخاصة به. يمكن أن يشمل ذلك الاعتماد على سمات مخصصة، وقواعد CSS، والتموضع المطلق (absolute positioning). إذا أخطأت في أي من ذلك، فلن يعمل ببساطة. وإذا أضفته في نهاية تصميمك، فقد تضطر إلى إعادة التفكير في بعض العناصر الأخرى.
ولكن إذا كنت مصمماً على اتباع هذا المسار، فإليك كيفية إضافة عنصر قابل للاستنساخ:
- ابحث عن عنصر شريط تمرير قبل وبعد قابل للاستنساخ يخضع للصيانة النشطة ويحتوي على ترخيص يسمح لك باستخدامه. استنسخه في مشروعك الخاص.
- استبدل الصور بصورك الخاصة. لا تقم بإعادة ترتيب عناصر div المتداخلة، أو تغيير اسم أي شيء، أو محاولة ترتيب الأمور — فقد يؤدي ذلك إلى تعطل شريط التمرير.
- انشر موقعك واختبره. تأكد من أنه يعمل على كل من أجهزة الكمبيوتر المكتبية والأجهزة المحمولة. إذا قمت بتغيير أي شيء عن طريق الخطأ، فقد لا يعمل كود JavaScript في ظل ظروف مختلفة.
بشكل عام، تنجح هذه الطريقة، ولكنها مملة جداً بالنسبة لمكون مرئي بسيط — ومن غير المرجح أن تحصل على قدر التحكم الذي ترغب فيه. يجب أن تلتزم كل عملية إعادة تصميم تقوم بها بالبنية الأصلية ما لم تكن ترغب في إعادة كتابة السكربت الذي يتحكم فيها.
الخيار الثاني: استخدام أداة (widget) شريط تمرير مجانية بدون كود (موصى به)
إذا كنت ترغب في تجنب التعامل مع كتل div المتداخلة، وتكوين السمات المخصصة، وتصحيح أخطاء JavaScript التي كتبها شخص آخر في حال حدوث خطأ، فإن أسهل طريقة هي استخدام عنصر مضمن مستضاف مثل أداة شريط تمرير قبل وبعد من Jotform. من السهل جداً إعدادها وتحل الكثير من المشكلات المرتبطة بالعناصر القابلة للاستنساخ.
إليك كيفية إضافة شريط تمرير قبل وبعد إلى Webflow باستخدام Jotform:
- انتقل إلى أداة شريط تمرير قبل وبعد من Jotform وسجل الدخول إلى حساب Jotform الخاص بك. إذا لم يكن لديك حساب بالفعل، يمكنك التسجيل أثناء عملية الإعداد. إنه مجاني.
- أعطِ أداتك عنوانًا وأضف أزواج المقارنة الخاصة بك. يمكنك رفع الصور مباشرة أو إضافتها من خلال رابط (URL). إذا أردت، يمكنك أيضًا إضافة تعليق لكل زوج من الصور وتغيير تسمياتها. بعد ذلك، حدد ما إذا كان المستخدم بحاجة إلى سحب المقبض لرؤية قبل وبعد، أو إذا كان يتم تفعيله عند التمرير بالماوس. عند الانتهاء، انقر على متابعة (Continue).
- حان الوقت الآن لتصميم شريط التمرير الخاص بك. يمكنك ضبط الألوان، والعلامة التجارية، والخط، والمظهر الخارجي. عندما تكون راضيًا عنه، انقر على متابعة (Continue) مرة أخرى.
- أخيرًا، قم بتهيئة التخطيط. حدد ما إذا كنت تريد شريط تمرير أفقيًا أم عموديًا، ومكان الموضع الأولي للفاصل، ومقدار العرض الذي تريده، وما إذا كان سيتم عرضه على الأجهزة المحمولة، أو أجهزة الكمبيوتر المكتبية، أو كليهما. ثم انقر على جربه على موقعك الإلكتروني مجانًا (Try it on your website for free).
- انقر على نسخ الكود (Copy Code) لنسخ كود التضمين إلى الحافظة الخاصة بك، ثم عد إلى موقع Webflow الخاص بك.
- افتح قائمة إضافة (Add) وحدد تضمين كود (Code Embed). الصق كود التضمين وضع الكتلة في موقعك. انقر على نشر (Publish) وسيكون متاحاً على موقعك. الأمر بهذه البساطة.
كما ترى، فإن المسار المجاني الخالي من الأكواد أبسط بكثير من خيار العنصر القابل للاستنساخ. من الأسهل تصميمه، ولا داعي للقلق بشأن السمات المخصصة، أو أسماء الفئات (classes) الصارمة، أو JavaScript، وهو يعمل ببساطة. إذا كنت ترغب في تغيير أي شيء، فعد إلى Jotform وقم بتعديل إعدادات شريط تمرير قبل وبعد.
الخيار الثالث: إنشاؤه يدوياً باستخدام تفاعلات Webflow (Webflow Interactions)
بالنسبة للمتمسكين بأصالة Webflow الذين يريدون التحكم الكامل ولا يرغبون في استخدام JavaScript كتبه أشخاص آخرون أو أداة خارجية، من الممكن بناء شريط تمرير باستخدام محرك التفاعل الأصلي الخاص بـ Webflow، والمعروف بـ IX2. يُعد بناء شريط تمرير بكود مخصص في Webflow الطريقة الأكثر تقدماً وتعقيداً بلا شك، ولكنه يتيح لك التحكم الدقيق في مظهره وطريقة عمله.
لبناء شريط تمرير المقارنة الخاص بك في Webflow باستخدام IX2، تحتاج إلى تكديس صورتين في حاوية ذات تموضع نسبي (relatively positioned container) بحيث تكون كل صورة في كتلة div خاصة بها. بالنسبة للصورة العلوية، تعمل كتلة div كقناع (mask).
بعد ذلك، بالنسبة لتفاعل قبل وبعد في Webflow، تحتاج إلى إنشاء تفاعل تحريك الماوس (Mouse Move Interaction). اضبط المُشغّل (Trigger) على Mouse X والهدف على كتلة div الخاصة بالقناع. اضبط الخاصية المتحركة على العرض (Width) واجعلها تتراوح بين 0 و 100 بالمائة. بهذه الطريقة، تتحكم حركة الماوس على المحور السيني (X-axis) في التداخل بين الصورتين.
بالطبع، إذا كنت تريد فاصلاً بين الصورتين، فيجب عليك إنشاء ذلك. ويتطلب مزامنته بشكل مثالي مع حركة الماوس مهارات متقدمة في الرسوم المتحركة عبر Webflow.
في حين أن أدوات Webflow المدمجة يمكن أن تفي بالغرض، إلا أن ضبط كل شيء بشكل صحيح يتطلب الكثير من التعديلات وفهماً عميقاً لكيفية استخدام Webflow. عليك أيضاً إعداد رسوم متحركة مختلفة إذا كنت تريد أن تعمل على الأجهزة المحمولة. ما تكسبه من حيث التحكم، تفقده من حيث الراحة والسهولة.
حسّن موقع Webflow الخاص بك بأدوات ذكية بدون كود
الطريقة الأسرع والأسهل والأكثر ملاءمة لإضافة شريط تمرير قبل وبعد في Webflow هي باستخدام أداة شريط تمرير قبل وبعد من Jotform. لا تحتوي هذه الأداة على أي من سلبيات استخدام عنصر مقارنة الصور القابل للاستنساخ في Webflow، وهي أبسط بكثير من إنشاء أداة خاصة بك باستخدام IX2. يوفر لك استخدام خيار قوي بدون خوادم (serverless) الكثير من ساعات التطوير ويضمن لك تصميماً متجاوباً ومتيناً في كل مرة.
علاوة على ذلك، تمتلك Jotform مجموعة من أدوات مواقع الويب (widgets) المجانية الأخرى القادرة على الارتقاء بموقعك إلى المستوى التالي. إذا كنت ترغب في إضافة مراجعات Google، أو عناصر تحكم إمكانية الوصول، أو زر العودة إلى الأعلى بسيط، أو العشرات من الوظائف المفيدة الأخرى، تصفح الدليل. يمكنك أيضاً استخدام تكامل Jotform مع Webflow لربط أدوات جمع البيانات القوية من Jotform مباشرة بموقعك.
يستهدف هذا المقال مصممي Webflow، والوكالات، وأصحاب المواقع الذين يعتمدون على مبدأ “افعلها بنفسك” (DIY)، والذين يرغبون في عرض التحولات المرئية (مثل التجديدات، أو إعادة تصميم واجهة المستخدم، أو تعديل الصور) دون الحاجة إلى تصحيح أخطاء التفاعلات أو السكربتات المعقدة.
كتابة تعليق: