14 مذهل المنظر مواقع التمرير

التمرير المنظر: تصميم الويب وتاريخ الفن
(رصيد الصورة: تصميم الويب وتاريخ الفن)

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

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

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



01. تاريخ فن تصميم الويب

التمرير المنظر: تصميم الويب وتاريخ الفن

تعرف على تاريخ الفن من خلال سلسلة من تأثيرات التمرير المنظر(رصيد الصورة: تصميم الويب وتاريخ الفن)

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

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

أنا أكره مظهر الكروم الجديد

02. كتالوج Qode التفاعلي

المنظر التمرير

استمر في التمرير لاستكشاف سمات WordPress المعروضة هنا(رصيد الصورة: كتالوج Qode Interactive)

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

03. القنوات

التمرير المنظر: القنوات

القنوات مثل تصفح كتاب طاولة القهوة الكبير(رصيد الصورة: القنوات)

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

04. قصة الحمقى

التمرير المنظر: قصة The Goonies

احصل على أغنية رائعة من الثمانينيات هنا(رصيد الصورة: قصة The Goonies)

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

05. Dogstudio

التمرير المنظر: DogStudio

فيلم الرسوم المتحركة ثلاثي الأبعاد هو نجم العرض هنا [الصورة: Dogstudio]

الجاذبية البؤرية الفورية لـ دوجستوديو موقع 'كلب' متحرك جميل ثلاثي الأبعاد - أم أنه ذئب؟ - في وسط الصفحة ، يتم تغيير الحجم والتدوير أثناء التمرير لأسفل صفحة المنظر. يتغير لون الإضاءة الخاصة به عندما تحوم فوق عناوين مشاريع Dogstudio الأخيرة ، وربما يكون الشيء المفضل لدينا عندما يدور أمام بعض نسخة الصفحة ، مما يؤدي إلى حجب بعض النص.

06. تويفايت

التمرير المنظر: ToyFight

كلا من Jonny و Leigh صحيحان من الناحية التشريحية [الصورة: ToyFight]

توي فايت هي وكالة إبداعية حائزة على جوائز ، وموقعها الإلكتروني مليء بالمرح. قام المؤسسان Jonny Lander و Leigh Whipday بتحويل أنفسهم إلى شخصيات ثلاثية الأبعاد ، والتي تظهر في مجموعة من المشاهد في جميع أنحاء الموقع (بما في ذلك مرجع Sagmeister & Walsh). يؤدي الاستخدام الذكي للمنظر إلى تضخيم التأثير ثلاثي الأبعاد ، ويقترن بخلفيات جريئة ومشرقة وواضحة ، ولا يصبح أبدًا ساحقًا أو مزعجًا.

07. الديزل: دليل سيء

التمرير المنظر: ديزل

هل تُحدث بطاقات الصوت فرقًا حقًا
يعمل دليل Diesel's BAD مثل لوحة الدبوس الافتراضية [الصورة: ديزل]

84- باريس أنشأ موقع Parallax الرائع هذا (وحملة وسائل التواصل الاجتماعي المرتبطة به) لمرافقة إطلاق عطر BAD من Diesel. يقدم الموقع المكون من صفحة واحدة سلسلة القواعد التي تشكل 'الدليل السيئ'.

يمكن للمستخدم الاستكشاف عن طريق سحب الماوس حول صفحة المنظر ، والتي تم وضعها مثل لوحة الصور للنقر عليها. هناك نصائح حول كل شيء بدءًا من Tinder ('مرر لليمين ، يمينًا ، يمينًا ، يمينًا - ستفرزها لاحقًا') إلى Instagram ('لا تنسى التواصل مع شخص سابق يوم الخميس #TBT') ، برفقة الرسوم التوضيحية أحادية اللون.

08. فايرواتش

لقطة شاشة لموقع ويب Firewatch يظهر رسمًا توضيحيًا لمتنزه يطل على واد ذهبي عند الفجر

تتحرك كل طبقة من الأشجار بشكل مستقل [الصورة: كامبو سانتو]

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

09. جيثب 404

التمرير المنظر: لقطة شاشة لـ GitHub

يكسر 404 من GitHub قواعد اختلاف المنظر لإحداث تأثير مربك [الصورة: GitHub]

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

10. جيس وروس

التمرير المنظر: لقطة شاشة توضح صورة لامرأة ترتدي ثوبًا أبيض يتم حملها بسرعة فوق أفق مدينة في الليل

كل رسم توضيحي له إحساس بالعمق [الصورة: جيس وروس]

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

كيفية وضع instagram على بطاقة العمل

11. اجعل أموالك مهمة

مثال على مواقع التمرير ذات المنظر: اجعل أموالك مهمة

إدارة أموالك بالمعلومات والنصائح من Make Your Money Matter [الصورة: Public Service Credit Union]

المال والمال بالكاد هما أكثر المواضيع إثارة للاهتمام. لكن وكالة رقمية مقرها نيويورك بكر هو quids مع هذا الموقع التمرير الديناميكي المنظر اجعل أموالك مهمة لاتحاد ائتمان الخدمة العامة.

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

12. مادويل

التمرير المنظر: مادويل

الدقة القياسية للرسومات على الويب هي
تستخدم وكالة Madwell في نيويورك التمرير المنظر لإضافة إحساس بالعمق [الصورة: مادويل]

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

13. نيويورك تايمز: Tomato Can Blues

أمثلة على مواقع التمرير ذات المنظر: New York Times

تجربة جميلة ستتمتع بها مع مقال نيويورك تايمز التمرير المنظر هذا [صورة:]

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

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

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

14. تساقط الثلوج

مثال على مواقع التمرير ذات المنظر: تساقط الثلوج

أطلقت مقالة 'تساقط الثلج' في نيويورك تايمز جنونًا جديدًا تمامًا لمواقع اختلاف المنظر الثرية [الصورة: نيويورك تايمز]

أحد المواقع الأولى التي دفعت الحدود حقًا إلى ما يمكنك فعله بالمحتوى التحريري الطويل عبر الإنترنت ، New York Times ' تساقط الثلوج يجمع المقال بين مجموعة من العناصر المختلفة ، بما في ذلك التمرير المنظر وفيديو الويب.

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

مقالات ذات صلة: