المنظر العمودي التمرير.

كل عام نشهد ظهور واختفاء اتجاهات مختلفة في تصميم الويب. وأحيانًا يحدث أن تبدأ "شريحة" معينة بعد فترة في استخدامها في كل مكان مرة أخرى.

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

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

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

التمرير المنظر - يا له من وحش؟

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

المصطلح يأتي من اليونانية "Parallaxis" والتي تعني "التغيير". اليوم ، هذا الاتجاه يعيد شق طريقه في عالم تصميم الويب.

يمكن أن يكون التمرير المنظر إما قياسيًا أو رأسيًا أو أفقيًا وباتجاه متغير.

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

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

أين تقدم؟

يبدو التمرير المنظر رائعًا على المواقع ذات المحتوى القليل. يعد هذا حلاً مثاليًا لمواقع الويب المكونة من صفحة واحدة ومواقع بطاقات العمل.

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

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

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

بعض الأمثلة

الآن دعنا ننتقل من النظرية إلى الممارسة ، وننظر في العديد من المواقع التي تستخدم Parallax Scrolling. ربما ستجد في هذه المجموعة الإلهام أو تجد بعض الأفكار الأصلية.

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

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

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

مرحبا بكم في ميلان! انغمس في عالم الفن الإيطالي!

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

يمكنك أيضًا الاطلاع على القائمة أدناه ، وسيعرض لك الموقع نفسه المكان الصحيح.

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

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

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

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

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

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

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

1. تصميم مسطح مقابل الواقعية

الجانب الذي أنت على؟

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

يوضح المدير الإبداعي للوكالة ، أليخاندرو لازوس ، أن الأمر الأكثر صعوبة هو الجمع بين لعبة HTML5 مع التمرير المنظر.

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

2. سوني

أبدا رأيتم أي شيء من هذا القبيل!

ربما لا يعرف أحد في العالم كيفية تقديم منتجاته بالطريقة التي تقدمها Sony. هذه الصفحة المقصودة هي جزء من حملة Sony "Be Moved" ، والتي يقولون عنها ما يلي:

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

3. كوستا كوفي

اختارت Graphite Digital الرسوم التوضيحية التي تمثل منتجات الشركة بشكل أكثر وضوحًا

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

نتيجة العمل تستحق كل الثناء. تبدو الصفحة المقصودة رائعة. إنه مليء بجميع أنواع العناصر التفاعلية والرسوم التوضيحية المتحركة.

4. الطريق السريع واحد

تبين أن وزن الصورة الكبير يمثل مشكلة كبيرة للمطورين

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

قم بقيادة سيارة كاديلاك إلدورادو الكلاسيكية لعام 1959 لزيارة جميع سواحل كاليفورنيا الشهيرة. للوهلة الأولى ، تبدو جميع التأثيرات بسيطة ، ولكن بمجرد أن تبدأ في التمرير ، سينفتح السحر الحقيقي أمامك.

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

إدارة أموالك بالطريقة التي ينصح بها "اجعل أموالك مهمة"

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

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

6. سايكلمون

ستعرض لك الصفحة المقصودة جميع أنواع الدراجات الموجودة

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

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

7. لكزس

يمكنك تجربة السيارة أثناء البقاء في المنزل على كرسيك المريح

بفضل هذا الموقع يمكنك المحاولة موديل جديدمن تشكيلة لكزس دون مغادرة منزلك. سيوفر لك الفيديو التفاعلي الذي طورته وكالة الاستشارات الرقمية Amaze معلومات كاملة ومرئية للغاية عن المقصورة الداخلية والخارجية لسيارة Lexus IS. تأثير الوجود مضمون.

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

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

8. الحياة في حذائي

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

تم تنفيذ خط Houshka Rounded Medium الخاص بالشركة مع دعم بناء جملة خط الوجه ، مما يجعل الصفحة تبدو أكثر حيوية وإثارة للاهتمام. عناصر زخرفية أخرى إلى جانب استخدام اللون الأصفر جعلت المورد ممتعًا من الناحية الجمالية.

9. الوحش

الصفحة المقصودة الجديدة للمغني الشعبي الشهير تلاوة الشعر وترافقه بصور لا تصدق

للترويج لألبوم Laura Marling الجديد A Creature I Don "t Know" ، طورت الوكالة الرقمية Studio Juice ومقرها لندن صفحة مقصودة مذهلة تقرأ الشعر مصحوبًا برسوم توضيحية رائعة ورسوم متحركة معبرة.

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

10. المعمل

تلتزم Alzheimer's Research ، الوكالة الرائدة في المملكة المتحدة لمكافحة مرض الزهايمر ، بإيصال عملها ونتائجها بطريقة ممتعة وسهلة المنال. لهذا الغرض ، تم إنشاء مورد المعمل.

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

11. لماذا يتوق دماغك إلى الرسوم البيانية

الرسوم البيانية حول الرسوم البيانية!

تميزت استوديوهات NeoMam بصفحة هبوط ممتازة للتمرير المنظر تسلط الضوء على المزايا الرئيسية للرسوم البيانية كوسيلة لعرض المعلومات.

يقول Danny Ashton ، مدير الشركة: "Parallax Scrolling هو أصعب شيء يتعين على مطورينا تنفيذه". "لقد اعتقدوا أن جميع المكتبات المتاحة كانت تافهة ، لذا قاموا ببناء المكتبات الخاصة بهم بدلاً من ذلك."

12.5 ميغاوتشي

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

13. معرض أتلانتس العالمي

لا يعمل التمرير غير المعتاد هنا للترفيه بقدر ما يعمل في الحبكة.

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

14. كل قطرة أخيرة

تعرف على مشكلة نقص المياه النظيفة العالمية!

صمم استوديو الرسوم المتحركة Nice & Serious هذه الصفحة المقصودة لزيادة الوعي العام بمشكلة ندرة المياه النظيفة على هذا الكوكب. أين نصرف الماء؟ أين يمكننا حفظه؟ كيف افعلها؟ سوف تتعلم كل شيء عن هذه المشكلة. كل قطرة أخيرة.

15. كلمة حية

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

16. مادويل

يضيف التمرير المنظر عمقًا إلى صفحات مادويل المقصودة

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

17. The Jacksonville Downtown Art Walk

The Jacksonville Downtown Art Walk هو حدث فني وثقافي شهري تقليدي في جاكسونفيل ، فلوريدا. يمتد المهرجان على 15 مبنى ويتكون من عشرات المعارض والمتاحف والحانات. كل هذا يرافقه ممثلو الشوارع والموسيقيون. يمكن أن يجلب موقع ويب جميل حول هذا الحدث مزاجًا ممتعًا إلى منزلك.

18. فون دتش

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

19. فنابي

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

20. بيجو هايبرد 4

يجب تقديم التقنيات الجديدة بطريقة جديدة ، أليس كذلك؟

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

21. الحلول الثقافية

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

22. jQuery المؤتمر

لا ينسى مطورو موقع jQuery Conference الشيء الرئيسي: إنهم يحافظون على التوازن الصحيح بين محتوى المعلومات والبراعة.

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

23. الشكل

تتحدث وكالة Creative Shape على صفحتها المقصودة بشكل مقتضب إلى حد ما عن المراحل الرئيسية لأنشطتها. تضيف المرئيات والرسوم المتحركة الرائعة الوضوح.

24. نينتندو

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

25. تفعيل المشروبات

فقط قم بفك الغطاء وسيبدأ الإجراء

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

26. الجدول الزمني للبيت الأبيض للعراق

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

27. قصص غلاف Pitchfork

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

28. سولي نوير 2012 | نحن نؤمن ...

آسر بساطتها من الفرنسيين من Soleil Noir

هذه الصفحة المقصودة الملتوية التي صممها الفرنسيون من Soleil Noir هي في الأساس بطاقة رأس السنة الجديدة. لن تجد أي شيء معقد هنا: تمرير المنظر المذهل ، والبساطة في الرسوم التوضيحية ، والعبارات المقتضبة - لكن هذه البساطة تأسر.

29. أوكلي

يجمع أوكلي بين التمرير المذهل مع اختلاف المنظر والتصوير التعبيري

تعتبر Oakley موردًا شهيرًا للنظارات الواقية والنظارات الواقية ، وقد تم تطوير هذا المورد خصيصًا للترويج لطراز Airbrake MX goggle الجديد. تجمع الصفحة المقصودة بين التمرير المذهل المنظر والصور التعبيرية التي تقدم المنتج بشكل مثالي.

30. جايسون كيني أوبي

الصفحة المقصودة لبطل أولمبي ثلاث مرات وبطل العالم مرتين في سباقات الدراجات جايسون كيني

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

31. لا مولاد

سيسمح لك شريط التنقل بالتنقل بسرعة وسهولة إلى المنطقة المطلوبةالصفحات

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

32. المشي الميت

أصعب شيء هو الجمع بين إنجازات جميع التقنيات.

"بادئ ذي بدء ، نحن أنفسنا معجبين بهذا العرض ،" يشارك المصمم الرئيسي Gavin Beck انطباعاته عن العمل في المشروع. - كانت خططنا هي إنشاء موقع ويب يتناسب مع العالم " يمشى كالميت"أن عشاق العرض سيقدرون ويدرسون. لتحقيق أهدافنا ، استخدمنا تطورات جديدة مثل HTML5 و CSS3 و JavaScript / jQuery و Web Audio / HTML5 Audio وبالطبع التمرير المنظر. كان التحدي الأكبر هو جعل كل هذه التقنيات تعمل معًا وتكون متاحة على جميع أنواع المنصات ".

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

هل يمكن أن يكون هذا هو مستقبل الصحافة على الإنترنت؟

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

بمجرد أن تبدأ في التمرير في الصفحة ، ستتحرك الرسوم التوضيحية وتغمرك في الإجراء الموصوف.

34. مدفوعات الخدمات الصحية

لا شيء معقد ، على ما يبدو ، لكنه يبدو مسليًا للغاية

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

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

يشارك موظف في الوكالة التي طورت هذه الصفحة المقصودة انطباعاته عن العمل: "لإنشاء هذا الموقع ، طبقنا تقنيات جديدة في HTML5 و CSS3 و JavaScript. نظرًا لأن الرسوم المتحركة عنصر أساسي ، فقد استخدمنا بشكل أساسي مكتبات الرسوم المتحركة "skrollr". لقد رسمنا كل عنصر يدويًا وأضفنا اللمسات النهائية بدعم CSS3 ".

35. نحن تتكشف

لعبة مثالية أنواع مختلفةالتمرير

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

36. تحدي الادخار

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

البرنامج الإضافي Stellar.js

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

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

استنتاج

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

منصة LPgenerator ، بشكل أكثر دقة ، محررنا المرئي ، يدعم تأثيرات المنظر ؛ انظر بنفسك مع القوالب الموجودة في الصفحات المقصودة لمتجر LP

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

لماذا بدأت الحديث عن الألعاب القديمة في مقالة تطوير الويب؟ أبسط إجابة قد تكون "لأنها رائعة ،" ولكن لا. Parallax Scrolling هو مفهوم تصميم رائع يشق طريقه إلى عالم تصميم الويب. كانت Nike من بين أول من استخدم هذه التقنية بنجاح كبير عندما وظفت عمالقة التسويق Weiden و Kennedy لتصميم موقع Nike Better World الأصلي. تم تحديث موقع Nike Better World منذ ذلك الحين واستبداله بموقع جديد ، ولكن هناك موقع آخر مشابه تمامًا لما بدا عليه تصميم Nike الأول ، وهو موقع Activate الرياضي للمشروبات.

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

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

أول شيء ستلاحظه هو اتجاه تمرير الصفحة - فهو ليس عموديًا ، ولكن كما ذكر أعلاه ، ولكنه أفقي في البداية. بالتأكيد ، إنه رائع ، لكنه ليس مفهومًا جديدًا أيضًا. ستلاحظ أيضًا تأثير اختلاف المنظر مع ديناصور Yoshi وأصدافه في الخلفية ، Mario و Luigi في المقدمة والمحتوى الرئيسي يتحرك بسرعات مختلفة أثناء التمرير. ولكن بمجرد وصولك إلى صفحتي #highlights و #attack ، لم يعد مسار الإزاحة أفقيًا تمامًا. الشيء نفسه ينطبق على التنقل بين صفحات #rediscover و #snes. لا تحتفظ الصور بمعدلات الإزاحة المختلفة فحسب ، بل تتغير أيضًا اتجاه عاممن الأفقي إلى العمودي.

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

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

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

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

أمثلة على مواقع اختلاف المنظر

مرحبا بالجميع. سأخبرك اليوم عن نص صغير لإنشاء تأثير اختلاف بسيط.

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

ما هو تأثير اختلاف المنظر على الموقع

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

كيفية عمل تأثير اختلاف المنظر على موقع على شبكة الإنترنت

لذلك ، أولاً وقبل كل شيء ، نقوم بتضمين مكتبة jquery. كالعادة بين علامات الرأس:

الآن ، تحتاج إلى تنزيل الاتصال النصي البسيط Parallax Scrolling. أوصي باستخدام الإصدار المضغوط فورًا بتنسيق إعدادات إضافيةلست بحاجة إلى القيام بذلك داخل البرنامج النصي:

الآن ، دعنا نتعرف على ما يجب كتابته على صفحة html حتى يعمل تأثير اختلاف المنظر.

اختلاف المنظر = "التمرير"

Data-image-src = "path to image / bg.png"

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

حول هذا ، من حيث المبدأ ، يمكنك الانتهاء ، ولكن بضع كلمات أخرى:

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

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