في عالم تصميم الويب المتطور باستمرار، ظهرت مفهوم واحد كمبتكر: تمرير بارالاكس. هذه التقنية الديناميكية قد أعادت تعريف كيفية التنقل والتفاعل مع المواقع على الويب، مما يرفع من مستوى مشاركة المستخدم ويجلبها إلى آفاق جديدة. ولكن ما هو بالضبط تمرير بارالاكس، ولماذا من الضروري أن نسلط الضوء على مواقع الويب المتنوعة والمبتكرة؟
ما هو تمرير بارالاكس؟
تمرير بارالاكس هو تأثير يجعل خلفية صفحة الويب تبدو ثابتة بينما يتحرك الجزء الأمامي عمودياً. في هذه المقالة، ندعوك للانطلاق في رحلة عبر 20 موقعًا رائعًا يستخدمون تمرير بارالاكس بشكل ملحوظ.
استعد للإلهام من الإبداع والشمولية والابتكار التي يجلبها تمرير بارالاكس إلى العالم الرقمي.
أفضل 20 موقعًا بارالاكس
1. The Believer
مجلة أدبية تستخدم تمرير بارالاكس بشكل مبدع في قسم الكوميكس الخاص بها. عندما يتم التمرير لأسفل الصفحة، تظهر لوحات جديدة. تهتز الصور في المقدمة وتتحرك بينما تظهر فقاعات الكلام.
ما يعجبنا: يحافظ تمرير بارالاكس على انشغال القراء أثناء قراءتهم للكوميكس على The Believer. أحب قراءة الكوميكس المطبوعة، ولكن هذه التجربة لا يمكن تكرارها في شكل مطبوع.
2. The Boat
يتميز The Boat بإظهار إمكانات تمرير بارالاكس في إنشاء قصص مثيرة وجذابة على الإنترنت. يقدم الموقع تكييفًا قائمًا على الويب لقصة عن اللاجئين الذين يسافرون على قارب. عندما يتم التمرير، تتحرك لوحات القصة جانبيًا. ومع ذلك، تظل الصور للقوارب والمناظر البحرية ثابتة.
ما يعجبنا: السرد التفاعلي يجعل القصة غامرة بسبب طرق التمرير المختلفة. تظهر الصور بزوايا مختلفة. التصميم الصوتي يضيف إلى التجربة الغامرة. القصة مثيرة بالفعل، وهذه العناصر الإضافية تجعلني متشوقًا.
Delassus Group
يتضمن معظم المواقع العرض الدائري للصور التي تعرض ما يبيعونه. ومع ذلك، يأخذ شركة Delassus Group الزراعية المغربية هذه التجربة إلى مستوى آخر باستخدام تمرير بارالاكس. بمجرد تحميل الصفحة الرئيسية، يمكن للزوار التمرير أفقيًا للمرور بجوار الطماطم والحمضيات والعنب والأفوكادو والزهور التي يبيعونها.
ما يعجبنا: اليوم، نحن نتعرض للكثير من الإعلانات. يجب أن يكون عرض المنتج فريدًا ليبرز. أحب التمثيل الفني لمنتج Delassus. أنا متشوق لرؤية ما يظهر بعد ذلك عندما أتمركز.
The Goonies
عندما أفكر في The Goonies، أفكر في المغامرات مع الأصدقاء والشخصيات الأيقونية والساحل المغطى بالغابات. يدفع هذا الموقع النصيب للفيلم بشكل مثالي. عند التمرير، تكبر الشاطئ الذي يجري فيه القصة. يمكنك رؤية جميع الشخصيات المفضلة لديك وعبارة “Goonies لا يقولون أبدًا موت” فوق كومة من الكنز.
ما يعجبنا: أحب كيفية تقديم الموقع لمعلومات عن الفيلم بشكل منطقي. لا تحتاج إلى البحث عن المعلومات في الموقع. كل ما ترغب في معرفته يظهر عند التمرير.
NASA Prospect
يقرب NASA Prospect عجائب الفضاء للمستخدمين، مما يثير الدهشة والفضول. عندما تهبط على الموقع، يُطلب منك تشغيل الصوت والتمرير. يظهر رائد الفضاء ضد خلفية مليئة بالنجوم.
ثم يتم أخذك في مغامرة خيال علمي حيث يسافر المستكشف الفضائي عبر الفضاء مع روبوت. تتغير مواقع هاتين الشخصيتين بفضل تمرير بارالاكس.
ما يعجبنا: الرحلة الكونية التي يأخذنا فيها NASA Prospect، حيث يجعلني تمرير بارالاكس أشعر وكأنني أستكشف الفضاء الخارجي.
Every Last Drop
يشد Every Last Drop المستخدمين للمشاركة في أهمية الحفاظ على الماء من خلال سرد مثير بصريًا. يسمح تمرير بارالاكس للزوار بالتنقل بسهولة خلال القصة. نتابع الشخصية طوال يومه ونتعرف على كمية الماء التي نستهلكها يوميًا. ينتهي التمرير بمزيد من الأزرار للاستمرار في التعلم حول الحفاظ على الماء.
ما يعجبنا: يجعل تمرير بارالاكس على هذا الموقع الرسومات البسيطة أكثر إشراكًا. أحب كيفية انزلاق العناصر داخل وخارج الصفحة، مثل تغيير المجموعة.
تاريخ فن التصميم على الويب
تمرير بارالاكس هو وسيلة رائعة لإظهار التطور. يمكنك إنشاء جدول زمني يظهر كيف تغيرت الفنون على مر الزمن. يوضح هذا الموقع عن تصميم الويب وتاريخ الفن كيف تغيرت الفنون من رسومات الكهوف القديمة إلى الوقت الحاضر.
عندما يفكر الناس في الفن، غالبًا ما يفكرون في لوحات ثابتة تعلق في المتحف. يسمح تمرير بارالاكس للصور بالتحرك والانتقال بسلاسة على شاشة الزائر.
ما يعجبنا: النص المعلوماتي والصور المتحركة متوازنة في جميع أنحاء الموقع. لديك الكثير للنظر والكثير للتعلم.
Ivy Chen
تمرير بارالاكس ليس مقتصرًا على العلامات التجارية الكبيرة فقط. يمكن أن تساعد هذه التقنية في جعل محفظتك الرقمية تبرز من بين الكثير. استلهم من مصمم الأزياء Ivy Chen. عند تحميل موقعها، ترى صورة لزهرة ورسم لسترة. عند التمرير، تتحول هذه الصور إلى نموذج يرتدي تصميمًا حقيقيًا في الحياة الواقعية.
ما يعجبنا: يحول موقع Chen الأفكار إلى منتجات يمكن للناس ارتدائها. يستخدم موقع Chen تمرير بارالاكس لإحياء هذا المفهوم.
Firewatch
موقع لعبة Firewatch ينقل المستخدمين إلى إعداد الغابة للعبة، مما يولد الترقب والاهتمام. بمجرد تحميل الصفحة، يمكنك التمرير بجانب الغروب. تظهر الصخور في المقدمة، ويظهر النص لبدء الرحلة. يمكنك بعد ذلك معرفة المزيد عن قصة اللعبة.
يوضح Firewatch كيف يمكن أن يكون تمرير بارالاكس أداة ترويجية فعالة للمنتجات الترفيهية. يحصل الزوار تلقائيًا على فكرة عن الأسلوب الفني الذي يمكنهم توقعه من اللعبة.
ما يعجبنا: يستخدم موقع لعبة الفيديو هذا تمرير بارالاكس لغمرني في عالم اللعبة.
Porsche Evolution
يأخذ Porsche Evolution المستخدمين في جولة مرئية للسيارات الأيقونية، مؤكدًا تراث العلامة التجارية من التميز. يمكنك التمرير بجوار السيارات ورؤيتها من زوايا مختلفة. يشعر التمرير السلس بأنك تمر بجانب السيارات نفسها في المتحف. يعتبر هذا الموقع مثالًا على كيفية استخدام تمرير بارالاكس لعرض تاريخ وابتكار المنتج.
ما يعجبنا: يتم استخدام تمرير بارالاكس بطريقة تشبه العرض التوضيحي لعرض تطور بورش وتصميمها الممتاز.
Strek
تمرير بارالاكس لا يحتاج إلى أن يهيمن على موقعك. يمكن أن يكون هذا التأثير عنصرًا واحدًا يخدم هدفًا محددًا.
لنلقِ نظرة على استوديو اليوغا Strek. عندما تحمل الصفحة لأول مرة، يكون معظم العناصر ثابتة. يتم استخدام تمرير بارالاكس فقط لعرض مساحة الاستوديو. عندما يتم التمرير، يمكن للأشخاص رؤية المكان الذي سيمارسون فيه اليوغا.
ما يعجبنا: يظهر Strek أن تمرير بارالاكس يمكن استخدامه بشكل استراتيجي لجلب جزء محدد من موقعك إلى التركيز.
Soleil Noir
يفتتح Soleil Noir بتمرير جانبي يقرأ “نحن نصنع تجارب غامرة وتفاعلية للعلامات التجارية العالمية”. يضع هذا الاستخدام لتمرير بارالاكس الرسالة أمام زوار الموقع. لا يوجد طريقة للهروب من بيان مهمة العلامة التجارية.
يسلط Soleil Noir الضوء على كيفية أضافة تمرير بارالاكس الإبداع إلى محفظتهم. هذا اللمسة الأولى الغامرة هي مثال دال على الخدمة التي يقدمونها.
ما يعجبنا: يستخدم وكالة الإبداع هذه تمرير بارالاكس لعرض أعمالها بطريقة تشد الانتباه بصورة بصرية.
Ben the Bodyguard
تطبيق Ben the Bodyguard هو تطبيق أمان للهواتف المحمولة مصمم لحماية كلمات المرور الخاصة بك. ومع ذلك، بدلاً من رمز قفل ممل، يتمتع المستخدمون بـ Ben – تجسيد حارس الجسم الرقمي. يستخدم موقع التطبيق تمرير بارالاكس ونمط ألعاب الفيديو الذي يندمج مع هذا العلامة التجارية.
عندما يتم التمرير، يظهر بن. مرتديًا بدلة تشبه جيمس بوند، يمشي على شاشة مظلمة بينما تتحرك لأسفل الموقع. تظهر فقاعات الكلام، ويتحدث بن عن مدى خطورة العالم السيبراني.
ما يعجبنا: أستمتع بكيفية تواصل هذا الموقع بارالاكس بشكل فعال فوائد تطبيق أمان الهاتف المحمول من خلال السرد التفاعلي.
NBC News
أعلم أن قراءة الأخبار أمر مهم. ومع ذلك، قد يكون من الصعب الانتهاء من مقال طويل. تحتوي NBC News على قصص خاصة تتضمن تمرير بارالاكس، مما يشد القراء أثناء تعلمهم المزيد عن موضوع معين.
دعونا نستكشف “تم بناؤها لمنع الأسود من الأبيض”، وهي قصة عن جدار في ديترويت يفصل المجتمعات. عندما أتمركز، يمكنني رؤية خريطة الجدار في سياق ديترويت الأكبر. يقترب هذا الهيكل عندما أقرب الزووم، ويمكنني رؤية نموذج ثلاثي الأبعاد للمنطقة.
ما يعجبنا: يساعد تمرير بارالاكس الروائيين على التركيز على عناصر مختلفة من السرد. يمكن للمبدعين أيضًا دمج الخرائط والرسوم البيانية والصور التوضيحية التي تعزز الرسالة.
Cyclemon
الدراجات ليست منتجًا مناسبًا للجميع. إذا كنت تخطط لركوب الدراجات في الجبال، فستحتاج إلى معدات مختلفة عن شخص يقوم برحلة هادئة إلى سوق الفلاحين. يعرض Cyclemon جميع الخيارات المتاحة للمتسوقين، ويكشف الدراجات واحدة تلو الأخرى باستخدام تمرير بارالاكس.
عند التمرير، تظهر إصدارات مختلفة من الدراجة أمام خلفيات مختلفة. على سبيل المثال، تظهر دراجة مع أضواء فوق شارع المدينة ليلاً.
ما يعجبنا: يتم تقديم عالم الدراجات اللعوب والخيالي من خلال تمرير بارالاكس، مما يستهوي الأطفال والكبار على حد سواء.
WaterAid
إذا كان موقعك يرغب في عرض الصور بطريقة مشوقة، فإن تمرير بارالاكس يمكن أن يحدث الفرق. WaterAid هو مثال مميز. يعرض هذا المنظمة غير الربحية الفنان البصري Ngadi Smart، الذي يصور قدرة المجتمع على التكيف في سيراليون خلال أزمة مياه.
يظهر النص فوق صور للأشخاص الذين يعيشون في المنطقة. يمكننا رؤية منازلهم بينما نتعلم عن الموضوع.
ما يعجبنا: تتحول الألوان في الصور أثناء التمرير، مما يخلق تأثيرًا فنيًا فريدًا.
Louie Sellers
إذا كانت مهنتك في عالم التصميم، فإن وجود موقع ويب جذاب وسهل الاستخدام أمر ضروري. يحقق Louie Sellers ذلك في محفظته كمصمم تجربة المستخدم. أول شيء تراه هو عبارة “recap after use” بخط عريض. عند التمرير، يظهر قلم مفتوح، ويغلق عندما تتحرك لأسفل.
ما يعجبنا: كان الجزء الأول من الموقع الذي واجهته مذهلاً بصريًا. لقد جذبني من البداية.
The Other Side of Truth
عندما يتعلق الأمر بفهم المسائل الجيوسياسية المعقدة، فمن الصعب معرفة من أين تبدأ. غالبًا ما تستخدم المواقع المعلوماتية تمرير بارالاكس لإنشاء نقطة بداية بديهية للأشخاص الذين يتعلمون للتو عن مواضيع معقدة.
دعونا نلقي نظرة على The Other Side of Truth، وهو موقع عن الحرب في أوكرانيا. يظهر جدول زمني واضح، يعرض صورًا للمنطقة قبل وأثناء الصراع. لديك الوصول إلى مقالات الأخبار والروابط والصور كلها عند التمرير.
ما يعجبنا: تمرير بارالاكس هو أداة يمكن أن تساعدك في ترتيب المعلومات. يستفيد هذا الموقع الأقصى من هذا العرض.
Dope Good
إذا كنت تعرض منتجات، فإن تمرير بارالاكس يمكن أن يساعدك في جعل العملية تجربة. عند التمرير، يمكنك رؤية أرائك وكراسي ومصابيح تظهر بينما تتحرك. تنزلق الصور من اليسار واليمين، مما يضيف حركة إضافية إلى الموقع.
ما يعجبنا: الاستخدام الفعال لتمرير بارالاكس لعرض ميزات وفوائد المنتج بطريقة مشوقة. هذه طريقة ذكية لمساعدة العملاء في اتخاذ قرارات الشراء.
Qode Interactive Catalog
يبدأ كتالوج Qode Interactive بتمرير بارالاكس في المقدمة. بمجرد التمرير، ستجد قائمة تكشف عن صور مع مواضيع ووردبريس مختلفة من المطور. ضمن الكتالوج، يمكنك رؤية محفظة تمريرية لأمثلة تستخدم القالب.
ما يعجبنا: عندما أفكر في الكتالوجات، أفكر في المجلات المملة التي تظهر في صندوق بريدي. هذا يتجاوز ذلك بكثير.
قوة تمرير بارالاكس
تجاوز تمرير بارالاكس عالم الجمالية البحتة. إنه أداة للسرد ومشاركة المستخدم والشمولية. وبينما نختتم هذه الرحلة، فإنه من الواضح أن تمرير بارالاكس هو قوة ديناميكية تستمر في إعادة تعريف تصميم الويب، وتدفع حدود ما هو ممكن.
سواء كنت مستوحى من الكون، أو محفوز لإنقاذ الكوكب، أو مجرد متحمس للسرد الإبداعي، فإن تمرير بارالاكس لديه شيء لتقدمه.
Source: https://blog.hubspot.com/website/parallax-website-examples
اترك تعليقاً