مدخلأمثلة التمرير المنظر. صفحة هبوط عالمية مع تأثير اختلاف المنظر
مع ظهور HTML5 واعتماده على نطاق واسع (معيار جديد لهيكلة المحتوى وتقديمه شبكة الانترنت) و CSS3 (نسخة محسنة من لغة الوصف مظهر خارجيكائنات) أصبح من الممكن إنشاء عناصر تصميم أكثر تشويقًا ولا تُنسى للجميع ، دون استثناء ، صفحات الإنترنت ، بما في ذلك ، بالطبع ، الصفحات المقصودة.
التمرير المنظر (من التمرير المنظر باللغة الإنجليزية - في تصميم الويب: تقنية خاصة تستخدم بشكل أساسي في رسومات الحاسوب، عندما تتحرك صور الخلفية في المنظور بشكل أبطأ من العناصر الموجودة في المقدمة) هي إحدى التقنيات المتقدمة تصميم الويب الحديث. لكن استخدامها المفرط يمكن أن يقلل من قابلية استخدام الموقع ويؤدي إلى انخفاض في معدل التحويل.
لقد أعددنا لك اليوم مجموعة فريدة من مواقع المنظر وننصحك بالتعرف على أمثلة من أكثر الصفحات المقصودة نجاحًا باستخدام هذا التأثير. يبدو بعضها كأنها أعمال فنية ، والبعض الآخر يفاجأ بتنسيق غير عادي ، لكن جميعها تستحق اهتمامك. دعنا نلقي نظرة على اختلاف المنظر وما هو عليه بالأمثلة.
1. تصميم مسطح مقابل الواقعية
الجانب الذي أنت على؟
مع تسجيل الشركات العملاقة مثل Microsoft و Google و Apple ، أصبح (التصميم المسطح) في غمضة عين هو الأكثر نجاحًا في الموسم وموضوعًا لمئات الأخبار والمدونات. كان يُنظر إليه على أنه نوع من الاختراق في مجال تصميم الويب ، وعلى الأرجح كان كذلك بالفعل. قررت الوكالة التفاعلية السليمة أن تلفت انتباه عملائها إلى هذه المرحلة غير العادية في تطوير التصميم الافتراضي وأعدت رحلة تفاعلية ، زودتها بعنوان "Flat Design vs. Realism". كل هذا تم إنشاؤه ، بالطبع ، ليس بدون مساعدة من تأثير جديد.
يوضح المدير الإبداعي للوكالة ، أليخاندرو لازوس ، أن الشيء الأكثر تافهة هو الجمع بين لعبة HTML5 والتمرير المنظر.
"أردنا أن تحدث كل الإجراءات بشكل مستمر وأن يتمكن المستخدمون من الانتقال من البداية إلى النهاية دون توقف. للقيام بذلك ، استخدمنا تقنية ajax ، والتي سمحت لنا بتمرير البيانات عبر عنوان url وتحديث البيانات في الخلفية ، مما يوفر للمستخدم الصفحة المناسبة دون تأخير. "
2. سوني
لم ترَ شيئًا كهذا من قبل!
ربما لا يعرف أحد في العالم كيفية تقديم منتجاته بالطريقة التي تعمل بها Sony. الصفحة المقصودة المقدمة هي جزء من حملة Sony "Be Moved" ، والتي تنص على ما يلي:
"كان يُطلق علينا ذات مرة اسم خنازير غينيا ، لأن جميع الابتكارات التي نقدمها تم تبنيها على الفور من قبل الشركات المنافسة. لقد أرادوا إيذاءنا ، لكننا اعتبرنا ذلك مجاملة. دائمًا ما يكون التعاون بين الفنانين والمهندسين بمثابة تجربة ، ولكن عندها فقط يمكنك أن تأمل في اتخاذ خطوة للأمام غدًا ".
3. كوستا كوفي
اختارت Graphite Digital الرسوم التوضيحية التي تمثل منتجات الشركة بشكل أكثر وضوحًا.
هذا النداء المثير للإعجاب هو من بنات أفكار وكالة جرافيت ديجيتال التي يقع مقرها في برايتون. في الماضي القريب ، تم تكليف الوكالة بمهمة تقديم منتج كوستا كوفي بطريقة مشرقة ومثيرة للاهتمام.
نتيجة العمل تستحق كل الثناء. يبدو الهبوط فاخرًا. إنه مليء بجميع أنواع العناصر التفاعلية والرسوم التوضيحية المتحركة.
4 طريق سريع واحد
اتضح أن الوزن الكبير للصور يمثل مشكلة كبيرة للمطورين
هذا الموقع المصغر المذهل ، الذي طورته شركة Shout Digital ومقرها نيوكاسل لوكالة سفر Exsus (شركة متخصصة في الإجازات الفاخرة وشهر العسل) هو مثال رائع آخر على هذا الموضوع. تستحوذ الرسوم المتحركة ذات الطراز القديم على انتباهك على الفور ولا تتركها حتى نهاية الاعتمادات.
قم بقيادة سيارة كاديلاك إلدورادو الكلاسيكية عام 1959 لزيارة جميع المواقع الشهيرة على طول ساحل كاليفورنيا. للوهلة الأولى ، تبدو جميع التأثيرات بسيطة ، ولكن بمجرد أن تبدأ في التمرير ، سيفتح السحر الحقيقي أمامك.
5. جعل أموالك مهمة
إدارة أموالك بالطريقة التي توصي بها "اجعل أموالك مهمة"
يحظى موضوع المال والتمويل الشخصي باهتمام الكثيرين ، لذلك فضلت وكالة نيويورك الرقمية Firstborn ، عند إعداد طلب لاتحاد ائتماني ، تنسيقًا مبتكرًا على التنسيق التقليدي.
تهدف إلى رفع مستوى الوعي الجمهور المستهدفحول مزايا الاتحاد الائتماني (وعيوب البنوك) ، أنشأ المسوقون هبوطًا مذهلاً يشرح بطريقة سهلة الوصول ومثيرة للاهتمام كيفية عمل الاتحاد الائتماني ، ومكان العثور على مكاتب المنظمة ، وأكثر من ذلك بكثير. بالإضافة إلى ذلك ، توجد هنا آلة حاسبة من شأنها أن تحسب الربح الذي تحصل عليه البنوك من استثماراتك.
6. سايكلمون
ستعرض لك الصفحة المقصودة جميع أنواع الدراجات الموجودة
يقول الحكماء الصينيون: "أنت ما تأكله". للمصممين وعشاق الدراجات رومان بورديو وتوماس بوماريل ، هذا القول المأثور هو "أنت ما تركب". سوف يفاجئك موقعهم المشترك في التأليف ليس فقط بالتمرير الجديد ، ولكن أيضًا بحس كبير من الفكاهة والرسوم التوضيحية من الدرجة الأولى.
يبدو أن المطورين لم يفوتوا نوعًا واحدًا من الدراجات وحاولوا تقديمها بطريقة تجعل كل زائر حريصًا على شراء واحدة لنفسه والانضمام إلى ثقافة فرعية بملايين الدولارات.
7 لكزس
يمكنك تجربة السيارة أثناء البقاء في المنزل على كرسيك المريح
بفضل هذا الموقع يمكنك المحاولة موديل جديدمن مجموعة لكزس دون مغادرة المنزل. تم تطوير الفيديو التفاعلي من قبل وكالة الاستشارات الرقمية Amaze ، وسيزودك بمعلومات كاملة ومرئية للغاية عن الجزء الداخلي والخارجي لـ Lexus IS. تأثير الوجود مضمون.
لتحقيق هذه النتيجة ، كان على فريق التسويق التقاط السيارة مقابل مجموعة متنوعة من المناظر الطبيعية ومسح المناطق المحيطة في كل نقطة رئيسية. بفضل تقنية HTML5 ، تعمل الصفحة المقصودة على كل من أجهزة الكمبيوتر والهواتف الذكية ، مما يجعل الترويج للسيارة أكثر نجاحًا من أي وقت مضى.
يقول ويندي ستونفيلد ، المدير التجاري لشركة Amaze: "لقد مكننا استخدام HTML5 من تحقيق العديد من الأهداف. أولاً ، هذا عرض مرئي للسيارة وخصائصها الوظيفية. ثانيًا ، إنها تفاعلية لا يمكن لأحد أن يفعل بدونها مشروع حديث: في هذه الحالة نسمح للمستخدمين باختيار لون السيارة من الداخل والخارج. عند إنشاء مقاطع فيديو ، ركزنا على العارض المتطور - ومع التقنيات الموجودة اليوم ، أصبح هذا أكثر من ممكن. أظهرنا لكزس IS على حقيقتها ".
8. الحياة في حذائي
الحياة في حذائي (من اللغة الإنجليزية - من خلال عيون شخص آخر) هو مشروع طموح هدفه الرئيسي هو القضاء على الخوف والتحيز ضد المصابين بفيروس نقص المناعة البشرية وزيادة وعي جيل الشباب بفيروس نقص المناعة البشرية والإيدز. تم تكليف وكالة Traffic ومقرها لندن بتصميم صفحة مقصودة يمكنها جذب انتباه وثقة الجمهور الشاب ، وقد قاموا بعمل رائع.
تم تنفيذ خط Rounded Medium المميز الخاص بـ Houshka مع دعم بناء جملة الخط ، مما يجعل الصفحة تبدو أكثر حيوية وإثارة للاهتمام. عناصر زخرفية أخرى ، إلى جانب استخدام اللون الأصفر ، جعلت المورد ممتعًا من الناحية الجمالية.
9. الوحش
الصفحة المقصودة الجديدة للمغني الشعبي الشهير تقرأ الشعر وترفقه بصور لا تصدق
للترويج للألبوم الجديد للمغنية الشعبية الشهيرة Laura Marling (Laura Marling) "A Creature I Don" t Know "(من اللغة الإنجليزية - مخلوق غير مألوف بالنسبة لي) ، طورت وكالة Studio Juice الرقمية ومقرها لندن صفحة مقصودة مذهلة يقرأ الشعر ويرافقه برسوم توضيحية رائعة ورسوم متحركة معبرة.
لإنشاء مثل هذه المعجزة ، تم استخدام عناصر وسمات دلالية جديدة ، وبفضلها تتم مزامنة الرسوم المتحركة مع المسار الصوتي ، وتتوافق سرعتها مع المعلمات المحددة مسبقًا.
10. المعمل
شرعت مؤسسة Alzheimer's Research ، المؤسسة الرائدة في المملكة المتحدة لدراسة مرض الزهايمر ، في إيصال أعمالها ونتائجها بطريقة جذابة وسهلة المنال. لهذا ، تم إنشاء المورد The Lab.
في الصفحة ، يحصل كل مستخدم على فرصة التعرف على المعامل والعيادات التابعة للمؤسسة ، وتوضح النصائح المنبثقة في شكل موجز ما هو معروض على الشاشة. إذا قمت بالنقر فوق أي منها ، فستحصل على معلومات أكثر تفصيلاً. يتم تحقيق العرض التوضيحي لكيفية قيام العلماء بإحياء نظرياتهم وإعطاء الأمل لملايين الأشخاص بأفضل طريقة ممكنة.
11. لماذا يتوق دماغك إلى الرسوم البيانية
الرسوم البيانية حول الرسوم البيانية!
ظهرت استوديوهات NeoMam بصفحة هبوط رائعة للتمرير المنظر تسلط الضوء على المزايا الرئيسية للرسوم البيانية كوسيلة لعرض المعلومات.
"Parallax Scrolling هو أصعب شيء كان على مطورينا تنفيذه ،" يشاركنا تجربته Danny Ashton ، مدير الشركة. "لقد اعتبروا جميع المكتبات المتاحة عادية ، لذلك أنشأوا المكتبات الخاصة بهم بدلاً من ذلك."
12.5 ميغاوتشي
الميزة الرئيسية لهذا المورد هي أن كل صفحة من صفحاته تتمتع بآلية التمرير الخاصة بها. كل! هذا أسلوب مضحك للغاية وناجح للغاية ، مما يثبت أيضًا أن هذه التقنية تتيح لك ابتكار أشكال بارعة لعرض المعلومات.
13. معرض أتلانتس العالمي
لا يعمل التمرير غير المعتاد هنا للترفيه بقدر ما يعمل على الحبكة.
تم تصميم هذا الرسم البياني عبر الإنترنت بواسطة فرانك شيميرو ، الذي استخدم التمرير المنظر ليس فقط لتقديم المعلومات بطريقة أفضل ، ولكن أيضًا لتحريكها وتناسبها في مخطط معين. الأكروبات!
14. كل قطرة أخيرة
تعرف على مشكلة نقص المياه النظيفة العالمية!
صمم استوديو الرسوم المتحركة Nice & Serious هذه الصفحة المقصودة لجذب انتباه الجمهور إلى مشكلة ندرة المياه النظيفة على هذا الكوكب. أين نصرف الماء؟ أين يمكننا حفظه؟ كيف افعلها؟ ستعرف كل شيء عن هذه المشكلة. كل شيء حتى آخر قطرة.
15. كلمة حية
تم تكليف الوكالة الرقمية القبلية بتحديث الموقع الإلكتروني لوكالة ترجمة Living Word وجعلها غنية بالمعلومات ومثيرة للاهتمام. يمكنك الإعجاب بالنتيجة بنفسك ، لكن دعنا نقول على الفور أن البريطانيين لم يأتوا بأي شيء غير عادي ، لكنهم فعلوا كل شيء بدقة ونظيفة.
16. مادويل
يضيف التمرير المنظر عمقًا إلى صفحة مادويل المقصودة
تستخدم وكالة Madwell لتطوير المشاريع ومقرها نيويورك صفحة مقصودة لعرض محفظتها. يُعد التمرير المنظر شيئًا من تسليط الضوء على الإجراء الذي قاموا به: يضيف التأثير ثلاثي الأبعاد الناتج عمقًا إلى إنشائهم.
17. The Jacksonville Downtown Art Walk
The Jacksonville Downtown Art Walk هو احتفال ثقافي وفني تقليدي شهري في جاكسونفيل ، فلوريدا. يمتد المهرجان على 15 مبنى ويتكون من عشرات المعارض والمتاحف والحانات. كل هذا مصحوب بممثلي الشوارع والموسيقيين. الموقع الجميل الذي يحكي عن هذا الحدث قادر على إضفاء جو بهيج على منزلك.
18. فون دتش
تحكي ماركة الأزياء Von Dutch من صفحات موقعها على الإنترنت القصة المذهلة لحياة مؤسسها. مما لا شك فيه ، من أجل أن تكون في الاتجاه ، تم استخدام نوع جديد من التمرير للموقع. أثناء التمرير عبر الصفحة ، تطفو الصور والأيقونات لأعلى ولأسفل ، مما يجعلك تشعر وكأن شخصًا ما سكب الماء على شاشتك أثناء غيابك.
19. فنابي
Fanabee هي صفحة مقصودة تم إنشاؤها ليس فقط لأولئك الذين يحبون الموسيقى ، ولكن أيضًا لأولئك الذين يجمعونها. باستخدام هذه الخدمة ، يمكنك نشر قائمة بما قمت بجمعه (أقراص مضغوطة ، ملصقات ، قمصان ، إلخ) والعثور على ما فاتك.
20 بيجو هايبرد 4
يجب تقديم التقنيات الجديدة بطريقة جديدة ، أليس كذلك؟
يتيح الكتاب الهزلي عبر الإنترنت ، الذي تم إعداده بتكليف من شركة بيجو العملاقة للسيارات ، للشركة القيام بأمرين في وقت واحد: أولاً ، يقدم بشكل فعال انتباه الجمهور المستهدف آلية جديدة Peugeot Hybrid4 ، وثانيًا ، تعمل على صورة المنتج والشركة نفسها: الانضمام إلى Peugeot ، وتجربة الأشكال بجرأة وعدم نسيان شخصيتها ، سيصبح الآن أكثر شهرة.
21- الحلول الثقافية
الحلول الثقافية هي وكالة استشارية ، كما يوحي اسمها ، تتعامل مع القضايا المتعلقة بالفنون. شعار الشركة عبارة عن دوائر متعددة الألوان متراكبة على بعضها البعض. هذا هو السبب في الصفحة الرئيسيةالموقع ، يتم لعب هذه الدوائر بمساعدة تأثير اختلاف المنظر. الدوائر تتحرك مع سرعة مختلفةويضيف العمق والحجم. اتضح أنه بيان موجز ، ولكنه رحيب للغاية وأنيق.
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 الجديدة. تجمع الصفحة المقصودة بين التمرير المذهل للمنظر والصور التعبيرية التي تقدم المنتج بشكل مثالي.
30. جايسون كيني أوبي
الصفحة المقصودة لراكب الدراجة الأولمبي ثلاث مرات وبطل العالم مرتين جيسون كيني
في وقت سابق من هذا العام ، قامت وكالة التسويق Fiasco Design ومقرها بريستول بتصميم هذا المنتج الرائع الصفحة المقصودةلراكب الدراجات الأولمبية ثلاث مرات وبطل العالم مرتين جيسون كيني. صرح المؤسس المشارك للوكالة بن ستيرز: "بناءً على الاختصاصات ، قررنا إنشاء موقع ويب من صفحة واحدة عامود استعراضواختلاف المنظر.
31. لا مولاد
سيسمح لك شريط التنقل بالتنقل بسرعة وسهولة إلى المنطقة المطلوبةالصفحات
من بين العدد المتزايد الصفحات المقصودة، والتي تستخدم موضع شريط التمرير لبدء الرسوم المتحركة ، و مؤثرات صوتية، فإن إنشاء الوكالة الفرنسية La Moulade يبرز بمؤشر غير عادي للغاية لموقعك على الصفحة. إنه موجود في الجزء العلوي ويتيح لك الوصول إلى أي جزء من الموقع أيضًا.
32. المشي الميت
أصعب شيء هو الجمع بين إنجازات جميع التقنيات معًا
"بادئ ذي بدء ، نحن أنفسنا معجبين بهذا العرض" ، هكذا قال المصمم الرئيسي غافن بيك ، وهو يشارك انطباعاته عن العمل في المشروع. "كانت خططنا هي إنشاء موقع ويب يتوافق مع العالم" يمشى كالميتأي محبي المسلسل سيقدرون ويستكشفون. لتحقيق أهدافنا ، استخدمنا تطورات جديدة مثل 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 Store Landing Pages
إذا كنت تتذكر القديم ألعاب الكمبيوتر، بحيث الشخصية الرئيسيةانتقلت عبر مجموعة متنوعة من الأبراج المحصنة أو الأدغال ثنائية الأبعاد ، ثم لديك فكرة عن تأثير المنظر الاصطناعي. لإضافة الواقعية (إذا كان بإمكانك التحدث عن هذا في لعبة ثنائية الأبعاد) ، بدأ مطور لعبة Moon Patrol عام 1982 ، ثم عمالقة كبار مثل Nintendo و Konami ، في تحريك طبقة الخلفية بسرعة أقل من حركات البطل . بهذه الطريقة ، تمت محاكاة تأثير "العمق" المتأصل في الحركة الحقيقية.
مون باترول هو أول تطبيق حاسوبي لاختلاف المنظر:
عندما تقود سيارة ، تتحرك الأشياء القريبة والبعيدة بصريًا بسرعات مختلفة نظرًا لأنها تأتي من زوايا رؤية مختلفة. وهذا ما يسمى بتأثير المنظر.
على الرغم من بساطته النسبية ، فإن المنظر يجعل أي صورة متحركة أكثر إثارة وجمالًا ، كما لو كانت تضيف بُعدًا ثالثًا ، وبالتالي فإن استخدامها في تصميم الويب كان مجرد مسألة وقت. ماذا يفعل المستخدم عندما يتصفح الموقع؟ يتصفحها (مخطوطات) - أي أنه يؤدي بعضًا منها الحركة التي يمكن استخدامها لاختلاف المنظر.
كانت أول شركة تستخدم هذا التأثير الرائع هي شركة Nike - على الرغم من بعض الثقل ، فقد صدمت الشركة الرياضية الجميع بحداثتها. كانت ثقيلة بسبب حقيقة أن المنظر تم إنشاؤه هناك باستخدام جافا سكريبت.
مع ظهور تقنيات مثل CSS3و HTML5، أصبح من الممكن إجراء اختلاف المنظر تقريبًا دون أي صعوبة ، مع عدم التحميل الزائد للصفحة بشفرة مرهقة. الإضافات الأكثر استخدامًا مسجو المغلق. يتم توزيع العناصر الموجودة على الصفحة في طبقات ، ويقوم العنصر الأخير بالفعل بتعيين رد الفعل المطلوب على إزاحة التمرير.
نظرًا لأنه يمكن تنظيم تمرير الصفحة في اتجاهات مختلفة ، يمكن تقسيم مواقع التمرير المنظر إلى عدة أنواع.
أنواع المواقع مع التمرير المنظر
1. المنظر العمودي التمرير
أكثر أنواع المواقع شيوعًا ، حيث يتم تحقيق اختلاف المنظر عن طريق التحرك على طول المحور X. هذه الطريقة سهلة الاستخدام لمستخدمي أجهزة الكمبيوتر الشخصية وأجهزة Mac ، ومع ذلك ، فإن المنظر الرأسي ، على الرغم من أنه يعطي بعض العمق و "ينشط" الصفحة ، لا يفعل ذلك بنفس المدى والأفقي. لماذا ا؟ فكر في المستوى الذي اعتاد الشخص على الانتقال إليه ، وما نوع اختلاف المنظر الذي يجب أن يكون أقوى فيه للمساعدة في تقدير المسافات بين الأشياء؟ لذلك
2. المنظر الأفقي التمرير
يسمح لك بعمل تأثير ثلاثي الأبعاد كامل على الموقع دون استخدام نماذج ثلاثية الأبعاد. مرة أخرى ، قدمت Nintendo مثالًا رائعًا على هذا التصميم - لاحظ أن المحتوى الرئيسي لا يتحرك في المقدمة. تنتمي اللقطة الأقرب إلى طبقة ذات عناصر صغيرة تتحرك بسرعة أكبر بكثير من سرعة التمرير ، مما يضيف تأثير "خارج الشاشة". ومع ذلك ، يجدر النظر في أن التمرير في الموقع في اتجاه أفقي أسهل على الأجهزة اللوحية ، وليس أجهزة الكمبيوتر. لكن ليس الجميع متصفح الجواليمكنه سحب كود jQuery المعقد ، لذلك بالنسبة لمنصات الهواتف المحمولة ، لا يزال من المستحسن عمل نسخة مبسطة بدون اختلاف المنظر.
3. 2D المنظر
يعد تنفيذ هذا التأثير أسهل ، وفي نفس الوقت ، سيعمل حتى بدون أي تمرير أو قلب. كيف؟ من بين أشياء أخرى كثيرة ، تحتوي القشرة المرئية لدينا على "خطأ" آخر: فنحن ندرك الأشياء الباهتة على أنها "خارج نطاق التركيز" ، وبالتالي فهي أبعد أو أقرب إلى المشاهد. بمعرفة ذلك وتطبيق التعتيم على بعض العناصر ، على سبيل المثال ، في الخلفية ، يمكنك إنشاء وهم ثلاثي الأبعاد حتى في موقع ذي شاشة واحدة.
مثال على كيفية محاكاة اختلاف المنظر:
ومع ذلك ، يكفي نظرية ، دعونا نرى ما هو مع الأمثلة.
أفضل أمثلة الصفحة الواحدة مع تأثير اختلاف المنظر
1. "الطريق من Laurentis"
يعد موقع مشروع اجتماعي لتطوير بلدة Laurentiis في هولندا مثالًا رئيسيًا على كيفية تضمين تأثير اختلاف المنظر في محتوى آخر لافت للنظر. في نفس الوقت مع تحريك الطبقات المختلفة أفقيًا ، يمكنك أيضًا العثور على عناصر متحركة (فراشات) ورسومات وأنماط ألوان تتحرك في علاقة معقدة مع الصور الأخرى. نقدر مجموعة متنوعة من الاكتشافات الإبداعية من المصممين.
2. مشروبات ليبتون الغازية
مثال جيد على كيفية استخدام اختلاف المنظر في الاعتدال للفت الانتباه إلى أهم شيء. في الجزء العلوي من هذه الصفحة المقصودة ، بدلاً من اختلاف المنظر ، يتم استخدام شريحة متحركة ، ثم يظهر تعليق يتحرك أسرع قليلاً من بقية الصفحة - وهذا هو اقتراح القيمة الرئيسي. أخيرًا ، ترى دائريًا باستخدام المنظر الأفقي ، يعرض كوكتيلات مختلفة بناءً على شاي ليبتون.
3. تصميم الاستوديو القس
يعيدنا استوديو التصميم التفاعلي إلى أصول اختلاف اختلاف الحواسيب - إلى عصر الألعاب ذات الثمانية بتات. في هذه الحالة ، المنظر لا "يسحب البطانية فوق نفسه" ، كما يحدث مع المصممين المتحمسين الذين يعتمدون على أي ميزة واحدة. لا - التأثير ينعش العناصر الأخرى فقط.ومع ذلك ، لا يمكن أن يكون استوديو التصميم الجيد غير ذلك.
4. موقع فيلم Art of Flight
لا يتناسب تصميم هذا الموقع مع تصنيفنا الدقيق لتمرير المنظر ، لأنه أثناء تحركه ، فإنه يحدث منعطفًا حادًا - تقريبًا مثل أبطال هذا الفيلم الرياضي في أعمالهم المثيرة التي لا يمكن تصورها. ومن قال أن هذا غير ممكن؟
5. صفحة سبوتيفي المقصودة
مثال ممتاز لتصميم وجد بالفعل العديد من المقلدين. يتحقق المنظر من خلال تحريك شرائح عرض الصفحة الكاملة بسرعات مختلفة. أنيق وفعال.
6. بطاقة عمل تفاعلية iutopi
ما الذي يمكن أن يكون أفضل لبطاقة أعمال استوديو الويب من المؤثرات الخاصة لالتقاط الأنفاس؟ يغمرك iutopi studio في محيط كرتوني مليء بالمخلوقات الجميلة والعناصر المختلفة التي تتحرك في زوايا اختلاف المنظر.
7. خدمة اجتماعية Hashtago
وفي هذا المثال ، تم دمج المنظر الرأسي وثنائي الأبعاد بنجاح - الخلفية لا تتحرك ويتم إلغاء تركيزها من أجل تحويل الانتباه قدر الإمكان إلى المقدمة المتحركة ، والتي تحتوي على معلومات أساسية للزوار.
في الختام ، دعنا نقول - بغض النظر عن مدى جاذبية التأثير الذي تستخدمه ، لا تنس الهدف الرئيسي للصفحة المقصودة المكونة من صفحة واحدة - لتحقيق التحويل. إذا لم يتخذ المستخدم الإجراء المطلوب ، فإن جهودك في التفاعل لا قيمة لها. ومع ذلك ، فإن التأثيرات البراقة تجعل الناس يتذكرون موقع الويب والعلامة التجارية الخاصة بك ، والتي يمكن أن تكون مفيدة في وقت لاحق من زاوية اختلاف اختلاف المنظر.
| 29.09.2014
مساء الخير أيها القراء الأعزاء! تصنيفنا اليوم ، الذي يتكون من 10 أماكن ، مخصص للمواقع غير العادية. تشترك المواقع في قائمة أفضل 10 مواقع في شيء واحد - تأثير اختلاف المنظر.
خاصة بالنسبة لأولئك الذين لا يعرفون حتى الآن ما هو ، سنتحدث بإيجاز عن هذا التأثير ، الذي بدأ بالفعل في اكتساب الزخم بشكل مكثف وأصبح أكثر شيوعًا في مجال تصميم الويب.
لذا ، فإن تأثير المنظر ، أو التمرير المنظر ، هو تقنية خاصة تتحرك فيها الكائنات في الخلفية بشكل أبطأ في المنظور من الكائنات الموجودة في المقدمة. نتيجة لذلك ، يتم إنشاء تأثير ثلاثي الأبعاد ، يظهر شعور بالفضاء ثلاثي الأبعاد. يعد التمرير المنظر طريقة رائعة لإضفاء الإثارة على موقع من صفحة واحدة ، أو إنشاء رسم بياني ، أو سرد قصة ، أو عرض محفظة. ويمكن تسمية بعض أعمال المصممين المعاصرين أعمالًا فنية بثقة تامة ... ومع ذلك ، من الأفضل أن ترى مرة واحدة بدلاً من أن تسمع مائة مرة - تحقق من أفضل 10 مواقع لدينا وانظر بنفسك!
ملحوظة:يمكن أن تكون بعض المواقع ذات التمرير المنظر كثيفة الاستخدام للموارد بسبب العديد من التأثيرات ، لذلك يستمر "التباطؤ" أجهزة كمبيوتر معينةوالأجهزة المحمولة.
انتزاع والذهاب
يحتل موقع Grab & Go المرتبة العاشرة في ترتيبنا ، حيث يتم استخدام تأثير المنظر كزخرفة وتحريك للصورة. عند تحريك المؤشر ، يمكنك مشاهدة كيفية تحرك المنازل والأشجار في الخلفية في نفس الوقت. موافق ، بسبب هذا التمييز ، هناك فرصة أن يتذكر الزائر الموقع بشكل أفضل.
الأيدي الرقمية
في المرتبة رقم 9 ، تستخدم DigitalHands أيضًا تأثير اختلاف المنظر لجعلها تبرز بشكل جميل وأن يتذكرها الزوار. حرك مؤشر الماوس واستمتع بالتأثير الخاص.
مادويل
تعرض وكالة Madwell الإبداعية ومقرها نيويورك محفظتها على الصفحة الرئيسية للموقع ، مستفيدة بذكاء من تأثير اختلاف المنظر. لا يترك شعور ثلاثي الأبعاد المستخدم أثناء وقت التمرير بأكمله.
اوكلي
أي منتج يحتاج إلى العرض التقديمي الصحيح. يستخدم موقع متجر Oakley التمرير المنظر لعرض فوائد نظارات Airbrake MX. لقد اتضح أنه مثير للإعجاب وغني بالمعلومات ، حيث يمكن عرض المنتجات ودراستها من جميع الجوانب ، ببساطة عن طريق استخدام التمرير.
اجعل أموالك مهمة
قلة من الناس لا يهتمون بالتمويل الشخصي. يكشف موقع Make Your Money Matter ، الذي احتل المرتبة السادسة في تصنيفنا ، في شكل يسهل الوصول إليه للمشاهدين عن مزايا الاتحاد الائتماني ويتحدث عن عيوب البنوك. يمكنك هنا استخدام آلة حاسبة توضح مقدار الربح الذي تحصل عليه البنوك من استثمارات العملاء ، وكذلك العثور على فروع تعاونيات الائتمان عن طريق الرمز البريدي.
إبرة الفضاء
هل ترغب في استكشاف سياتل من ارتفاع 184 مترًا؟ يأخذك موقع سبيس نيدل في جولة افتراضية لأكثر معالم المدينة شهرة ، سبيس نيدل ، والتي تعني "إبرة الفضاء" باللغة الإنجليزية. يبلغ ارتفاع البرج 184 مترًا وعرضه 42 مترًا ووزنه 9550 طنًا ، ويمكن لهذا البرج أن يتحمل الأعاصير التي تصل سرعتها إلى 320 كيلومترًا في الساعة والزلازل حتى 9.1. بالإضافة إلى ذلك ، يحتوي البرج على 25 صنارة مانعة للصواعق. الميزة المميزة لـ Space Needle هي سطح المراقبة على ارتفاع 159 مترًا ، ومطعم SkyCity ومحل الهدايا. من قمته ، يمكنك رؤية وسط مدينة سياتل وجبل رينييه وجبال كاسكيد وخليج إليوت والجزر المحيطة.
بيجو هايبرد 4 - رواية مصورة
قدمت أكبر شركة صناعة سيارات فرنسية ، بيجو ، نظام الدفع الهجين Hybrid4 بطريقة غير عادية إلى حد ما. يفتح كتاب هزلي مثير أمام أعيننا (والذي ، بالمناسبة ، يمكن ضبطه على التشغيل التلقائي) ، حيث تتمثل مهمة الشخصية الرئيسية في الحصول على بيانات سرية والمغادرة دون الوقوع في مشاكل. لإكمال العملية بنجاح ، أجبرت على التبديل بين أربعة أوضاع قيادة مختلفة تحاكي تقنية Peugeot Hybrid4 - الاداء العاليوديناميكية (رياضية) ، دفع رباعي وأقصى جر (دفع رباعي) ، توازن بين الأداء والاقتصاد (تلقائي) ، تشغيل هادئ (ZEV).
الموتى السائرون
لذلك ، وصلنا إلى المركز الثالث في قائمة أفضل المواقع لدينا ، والتي ذهبت إلى مشروع The Walking Dead. تم إنشاء الموقع ، الذي كان في الأساس محل اهتمام العديد من محبي سلسلة Walking Dead ، باستخدام HTML5 و CSS3 و JavaScript وبالطبع تأثير اختلاف المنظر. لقد قام المطورون بعمل رائع في جعل كل هذه التقنيات تعمل معًا وعلى جميع الأنظمة الأساسية. للوصول إلى الموقع والبدء في التمرير ، يرى المستخدم كتابًا فكاهيًا حول كيفية تحويل الممثلين إلى كائنات زومبي.
مشروع فريد من نوعه لا يضاهى ، جزء من حملة "Be Moved" من Sony يثير الإعجاب بحجمه وديناميكياته وتفكيره بأدق التفاصيل. ربما لن تجد عرضًا تقديميًا أفضل للمنتج من عروض Sony. لا حاجة للكلمات - فقط قم بالتمرير لأسفل واستمتع!
شقة مقابل. الواقعية
وأخيرًا ، وصلنا إلى المركز الأول في تصنيفنا ، وهو تصنيف Flat vs. الواقعية هي من بنات أفكار وكالة inTacto التفاعلية. مشروع السنة الجديدة هذا مع رسومات مذهلة (ومرافقة موسيقية!) هي لعبة صغيرة من نوع القتال مع خلفية مثيرة للاهتمام ، حيث يواجه ممثلو نوعين من التصميم - الواقعية والمسطحة. مع التركيز على الحلقات الرئيسية في أواخر عام 2013 - أوائل عام 2014 ، لم يفشل المبدعون: بعد الإصدار ، تسبب هذا العمل الرائع على الفور في ضجة كبيرة وأصبح موضوعًا شائعًا للنقاش في المدونات والأخبار.
تمكن مطورو الموقع من الجمع بين التمرير المنظر واللعبة على HTML5. "أردنا التأكد من أنه أثناء التمرير في الموقع من البداية إلى النهاية ، تتم جميع الإجراءات بسلاسة ودون تأخير. للقيام بذلك ، استخدمنا AJAX ، والذي سمح لنا بتحديث البيانات في الخلفية "، أوضح المدير الإبداعي للوكالة أليخاندرو لازوس. تم تقديم المشروع للجمهور في نهاية عام 2013 ، قبل حلول العام الجديد. احصل على استعداد للتمرير ، ستجد الكثير من المرح!
إن وصف فيزياء الإدراك البصري هو تمرين لا طائل من ورائه - تتحرك نظرة الشخص من الصورة اعتمادًا على موضع المشاهد ، الذي يشاهد هذه الصورة نفسها من نقاط مكانية مختلفة. حاول أن تعطيه شرحًا واضحًا بكلمات يسهل الوصول إليها. تحدث نفس القصة مع اختلاف المنظر - لن يفسر وصف خصائص الوهم البصري أي شيء ، ولكن دعنا نحاول. يتم التعبير عن التأثير في تغيير في الترتيب المكاني لجسم قريب ، يتميز بإزاحته غير المتكافئة بالنسبة إلى معلم إحداثيات أبعد ، يُدرك بشكل شخصي على هذا النحو من موقع المشاهد. شيء من هذا القبيل! العين الثالثة ، بعد إزالة الشاكرات واستعادة الهالة ، تدخن بعصبية على الهامش.
دعونا نرتبها بالترتيب - من الأفضل أن تفهم مرة واحدة بدلاً من أن تكون في الظلام مائة مرة.
المنظر في الحياة وعلى بيع الصفحة المقصودة
لا شيء يمكن تفسيره بالأمثلة ، لكن كل شيء يمكن توضيحه. تخيل نفسك في سيارة متحركة. تومض معالم الطريق خلف الزجاج الجانبي - أعمدة الكيلومترات والأشجار والمباني. كل واحد منهم على مسافة مختلفة من السيارة وبالتالي يختفي من مجال رؤيتك بسرعات مختلفة. تتحرك الكائنات القريبة من الطريق بصريًا بشكل أسرع ، بينما تتحرك الكائنات البعيدة بشكل أبطأ. في الوقت نفسه ، لا تتحرك الغابة الواقعة على خط الأفق عمليًا. كل شيء حول هذا في شرح فيزياء المنظر ، يمكنك وضع حد له.
فيما يتعلق بتصميم الموقع (على سبيل المثال ، صفحة مقصودة للبيع) ، يبدو كل شيء متماثلًا تمامًا. فقط الحجم يتحقق بالوسائل التصور البياني- الظلال والأحجام والرؤية. تتحرك العناصر الأقرب بصريًا إلى المستخدم بشكل أسرع من تلك الموجودة على مسافة. يتم تحقيق ذلك بمساعدة الطبقات المتراكبة للبنية الرسومية ، ولكل منها خصائص فردية. يتم تطبيق التأثير في نسختين.
- تبدأ حركة اختلاف المنظر عن طريق تحريك مؤشر الماوس. في هذه الحالة المضمنة في الخلفية كائنات رسوميةيبدأون في "الرقص" - لعمل حركات مبرمجة ، وتقديم خلفية متنوعة ضخمة.
- يحدث تأثير اختلاف المنظر عند التمرير - التمرير العمودي لصفحة الموقع. في هذه الحالة ، يتدربون على تقديم الرسومات التي تظهر عند الانتقال إلى كل شاشة هبوط جديدة. يضيء التصور الرتابة الميكانيكية للعملية ويؤكد اكتمال التحولات.
يدعم المنظر مفهوم الموقع
يعد إدخال تأثير اختلاف المنظر على الصفحة المقصودة طريقة لزيادة المظهر المرئي للمورد وتمييزه عن عدد من عروض الإنترنت المنافسة. على الجانب الآخر، حل برمجييبطئ وقت تحميل الصفحة ، ويتفاعل بشكل متقلب مع منصات المحمولونتيجة لذلك ، يستجيب بشكل سلبي للترويج للموقع. سواء أعجبك ذلك أم لا ، يعد الترتيب في البحث جانبًا مهمًا من عمل صفحة البيع.
ومع ذلك ، دعونا لا نتسرع في الاستنتاجات ، ولكن ننظر إلى مفهوم حل التصميم المطبق على موقعك. المنظر ليس غاية في حد ذاته ، ولكنه إضافة يجب أن تتناسب عضويا مع الخطوط العريضة الأسلوبية للمورد. بناءً على هذا المبدأ فقط ، ستتمكن من تحديد ما إذا كانت هناك حاجة إلى اختلاف المنظر على الصفحة المقصودة أم أن تنفيذه سيؤدي إلى تشتيت انتباه الزائرين ، وإحداث خلل في توازن الهيكل ، وكسر التصور العام للصورة بأكملها.
مع ظهور وانتشار استخدام HTML5 (معيار جديد لهيكلة وتقديم المحتوى على شبكة الويب العالمية) و CSS3 (نسخة محسّنة من اللغة لوصف مظهر الكائنات) ، أصبح من الممكن إنشاء تصميم أكثر تشويقًا ولا يُنسى عناصر للجميع ، دون استثناء ، صفحات الإنترنت ، بما في ذلك ، بطبيعة الحال ، الهبوط.
الجانب الذي أنت على؟
مع تقديم شركات عملاقة مثل Microsoft و Google و Apple ، أصبح التصميم المسطح (التصميم المسطح) في غمضة عين من أشهر الأحداث في الموسم وموضوعًا لمئات الأخبار والمدونات. كان يُنظر إليه على أنه نوع من الاختراق في مجال تصميم الويب ، وعلى الأرجح كان كذلك بالفعل. قررت الوكالة التفاعلية السليمة أن تلفت انتباه عملائها إلى هذه المرحلة غير العادية في تطوير التصميم الافتراضي وأعدت رحلة تفاعلية ، زودتها بعنوان "Flat Design vs. Realism". تم إنشاء كل هذا ، بالطبع ، ليس بدون مساعدة من تأثير التمرير المنظر.
يوضح المدير الإبداعي للوكالة ، أليخاندرو لازوس ، أن الشيء الأكثر تافهة هو الجمع بين لعبة HTML5 والتمرير المنظر.
"أردنا أن تحدث كل الإجراءات بشكل مستمر وأن يتمكن المستخدمون من الانتقال من البداية إلى النهاية دون توقف. للقيام بذلك ، استخدمنا تقنية ajax ، والتي سمحت لنا بتمرير البيانات عبر عنوان url وتحديث البيانات في الخلفية ، مما يوفر للمستخدم الصفحة المناسبة دون تأخير. "
Parallax Scrolling from Sony Corporation: لم ترَ شيئًا كهذا من قبل!
ربما لا يعرف أحد في العالم كيفية تقديم منتجاته بالطريقة التي تعمل بها Sony. تعد هذه الصفحة المقصودة جزءًا من حملة Sony "Be Moved" ، والتي تنص على ما يلي:
"كان يُطلق علينا ذات مرة اسم خنازير غينيا ، لأن جميع الابتكارات التي نقدمها تم تبنيها على الفور من قبل الشركات المنافسة. لقد أرادوا إيذاءنا ، لكننا اعتبرنا ذلك مجاملة. العمل المشترك للفنانين والمهندسين هو دائمًا تجربة ، ولكن في هذه الحالة فقط يمكنك أن تأمل في أن تخطو خطوة إلى الأمام غدًا ".
اختارت Graphite Digital الرسوم التوضيحية التي تمثل منتجات الشركة بشكل أكثر وضوحًا.
هذا النداء المثير للإعجاب هو من بنات أفكار وكالة جرافيت ديجيتال التي يقع مقرها في برايتون. في الماضي القريب ، تم تكليف الوكالة بمهمة تقديم منتج كوستا كوفي بطريقة مشرقة ومثيرة للاهتمام.
نتيجة العمل تستحق كل الثناء. تبدو الصفحة المقصودة فاخرة ومليئة تمامًا بجميع أنواع العناصر التفاعلية والرسوم التوضيحية المتحركة.
تبين أن الوزن الكبير للصور هو أكبر مشكلة للمطورين
هذا الموقع المصغر المذهل ، الذي طورته شركة Shout Digital ومقرها نيوكاسل لوكالة سفر Exsus (شركة متخصصة في الإجازات الفاخرة وشهر العسل) هو مثال رائع آخر على هذا الموضوع. تجذب الرسوم المتحركة ذات الطراز القديم انتباهك على الفور ولا تتركها حتى نهاية الاعتمادات.
بقيادة سيارة كاديلاك إلدورادو الكلاسيكية لعام 1959 ، ستزور جميع الأماكن الشهيرة على ساحل كاليفورنيا. للوهلة الأولى ، تبدو جميع التأثيرات بسيطة ، ولكن بمجرد أن تبدأ في التمرير ، سيفتح السحر الحقيقي أمامك.
إدارة أموالك بالطريقة التي توصي بها "اجعل أموالك مهمة"
يحظى موضوع المال والتمويل الشخصي باهتمام الكثيرين ، لذلك فضلت وكالة نيويورك الرقمية Firstborn ، عند إعداد طلب لاتحاد ائتماني ، التنسيق المبتكر على التنسيق التقليدي.
بهدف زيادة الوعي بفوائد الاتحاد الائتماني (وعيوب البنوك) للجمهور المستهدف ، أنشأ المسوقون صفحة مقصودة مذهلة بطريقة سهلة الوصول ومثيرة للاهتمام تشرح كيفية عمل الاتحاد الائتماني ، وأين تجد مكاتب وأكثر من ذلك بكثير. بالإضافة إلى ذلك ، توجد هنا آلة حاسبة من شأنها أن تحسب الربح الذي تحصل عليه البنوك من استثماراتك.
ستعرض لك الصفحة المقصودة جميع أنواع الدراجات الموجودة
يقول الحكماء الصينيون: "أنت ما تأكله". حسنًا ، للمصممين ومحبي الدراجات العظماء رومان بورديو وتوماس بوماريل ، تبدو هذه الحكمة المعروفة مثل "أنت ما تركب". سوف يفاجئك موقعهم المشترك في التأليف ليس فقط بتأثير التمرير المنظر الجديد ، ولكن أيضًا بحس كبير من الفكاهة والرسوم التوضيحية من الدرجة الأولى.
يبدو أن المطورين لم يفوتوا نوعًا واحدًا من الدراجات وحاولوا تعليمهم بطريقة تجعل كل زائر حريصًا على شراء واحدة لنفسه والانضمام إلى ثقافة فرعية بملايين الدولارات.
يمكنك تجربة السيارة أثناء البقاء في المنزل على كرسيك المريح
بفضل هذا الموقع ، يمكنك تجربة طراز جديد من خط Lexus دون مغادرة منزلك. تم تطوير الفيديو التفاعلي من قبل وكالة الاستشارات الرقمية Amaze ، وسيزودك بمعلومات كاملة ومرئية للغاية عن الجزء الداخلي والخارجي لـ Lexus IS. تأثير الوجود مضمون.
لتحقيق هذه النتيجة ، كان على فريق التسويق التقاط السيارة مقابل مجموعة متنوعة من المناظر الطبيعية ومسح المناطق المحيطة في كل نقطة رئيسية. بفضل تقنية HTML5 ، تعمل الصفحة المقصودة على كل من أجهزة الكمبيوتر والهواتف الذكية ، مما يجعل الترويج للسيارة أكثر نجاحًا من أي وقت مضى.
يقول ويندي ستونفيلد ، المدير التجاري لشركة Amaze: "لقد مكننا استخدام HTML5 من تحقيق العديد من الأهداف. أولاً ، هذا عرض مرئي للسيارة ، ميزاتها الوظيفية. ثانيًا ، هذه لحظة تفاعلية لا يمكن لأي مشروع حديث أن يفعلها بدونها: في حالتنا ، نسمح للمستخدمين باختيار لون المقصورة الداخلية وجسم السيارة. في إنشاء مقاطع الفيديو ، ركزنا على العارض المتطور - ومع التقنيات الموجودة اليوم ، أصبح هذا أكثر من الممكن. أظهرنا لكزس IS على حقيقتها ".
الحياة في حذائي (من اللغة الإنجليزية - من خلال عيون شخص آخر) هو مشروع طموح هدفه الرئيسي هو القضاء على الخوف والتحيز ضد المصابين بفيروس نقص المناعة البشرية وزيادة وعي جيل الشباب بفيروس نقص المناعة البشرية والإيدز. تم تكليف وكالة Traffic ومقرها لندن بتصميم صفحة مقصودة يمكنها جذب انتباه وثقة الجمهور الشاب ، وقد قاموا بعمل رائع.
تم تنفيذ خط Rounded Medium المميز الخاص بـ Houshka مع دعم بناء جملة الخط ، مما يجعل الصفحة تبدو أكثر حيوية وإثارة للاهتمام. عناصر زخرفية أخرى ، إلى جانب استخدام اللون الأصفر ، جعلت المورد ممتعًا من الناحية الجمالية.
الصفحة المقصودة الجديدة للمغني الشعبي الشهير تقرأ الشعر وترفقه بصور لا تصدق
للترويج للألبوم الجديد للمغنية الشعبية الشهيرة Laura Marling (Laura Marling) "A Creature I Don't Know" (من اللغة الإنجليزية - مخلوق لا أعرفه) ، طورت وكالة Studio Juice الرقمية ومقرها لندن الصفحة المقصودة التي تقرأ الشعر ، مصحوبة برسوم توضيحية رائعة ورسوم متحركة معبرة.
لإنشاء مثل هذه المعجزة ، تم استخدام عناصر وسمات دلالية جديدة ، وبفضلها تتم مزامنة الرسوم المتحركة مع المسار الصوتي ، وتتوافق سرعتها مع المعلمات المحددة مسبقًا.
شرعت مؤسسة Alzheimer's Research ، المؤسسة الرائدة في المملكة المتحدة لدراسة مرض الزهايمر ، في إيصال أعمالها ونتائجها بطريقة جذابة وسهلة المنال. لهذا ، تم إنشاء المورد The Lab.
في الصفحة ، يحصل كل مستخدم على فرصة التعرف على المعامل والعيادات التابعة للمؤسسة ، وتوضح النصائح المنبثقة في شكل موجز ما هو معروض على الشاشة. إذا قمت بالنقر فوق أي منها ، فستحصل على معلومات أكثر تفصيلاً. يتم تحقيق العرض التوضيحي لكيفية قيام العلماء بإحياء نظرياتهم وإعطاء الأمل لملايين الأشخاص بأفضل طريقة ممكنة.
الرسوم البيانية حول الرسوم البيانية!
ظهرت استوديوهات NeoMam بصفحة هبوط رائعة للتمرير المنظر تسلط الضوء على المزايا الرئيسية للرسوم البيانية كوسيلة لعرض المعلومات.
"Parallax Scrolling هو أصعب شيء اضطر مطورونا إلى تنفيذه ،" يشارك داني أشتون ، مدير الشركة. "لقد اعتبروا جميع المكتبات المتاحة عادية ، لذلك أنشأوا المكتبات الخاصة بهم بدلاً من ذلك."
الميزة الرئيسية لهذا المورد هي أن كل صفحة من صفحاته تتمتع بآلية التمرير الخاصة بها. كل! هذا أسلوب مضحك للغاية وناجح جدًا لفكرة التمرير المنظر ، والذي يثبت أيضًا أن هذه التقنية تسمح لك بابتكار أشكال بارعة لعرض المعلومات.
لا يعمل التمرير المنظر هنا للترفيه بقدر ما يعمل في الحبكة.
تم تصميم هذا الرسم البياني عبر الإنترنت بواسطة فرانك شيميرو ، الذي استخدم التمرير المنظر ليس فقط لتقديم المعلومات بطريقة أفضل ، ولكن أيضًا لتحريكها وتناسبها في مخطط معين. الأكروبات!
تعرف على مشكلة نقص المياه النظيفة العالمية!
صمم استوديو الرسوم المتحركة Nice & Serious هذه الصفحة المقصودة لتمرير المنظر لجذب انتباه الجمهور إلى مشكلة ندرة المياه النظيفة على هذا الكوكب. أين نصرف الماء؟ أين يمكننا حفظه؟ كيف افعلها؟ ستعرف كل شيء عن هذه المشكلة. كل شيء حتى آخر قطرة.
تم تكليف الوكالة الرقمية القبلية بتحديث الموقع الإلكتروني لوكالة ترجمة Living Word وجعلها غنية بالمعلومات ومثيرة للاهتمام. يمكنك الإعجاب بالنتيجة بنفسك ، لكن دعنا نقول على الفور أن البريطانيين لم يأتوا بأي شيء غير عادي ، لكنهم فعلوا كل شيء بدقة ونظيفة.
يضيف التمرير المنظر عمقًا إلى صفحة مادويل المقصودة
تستخدم وكالة Madwell لتطوير المشاريع ومقرها نيويورك صفحة مقصودة لعرض محفظتها. يُعد التمرير المنظر شيئًا من تسليط الضوء على الإجراء الذي قاموا به: يضيف التأثير ثلاثي الأبعاد الناتج عمقًا إلى إنشائهم.
The Jacksonville Downtown Art Walk هو احتفال ثقافي وفني تقليدي شهري في جاكسونفيل ، فلوريدا. يمتد المهرجان على 15 مبنى ويتكون من عشرات المعارض والمتاحف والحانات. كل هذا مصحوب بممثلي الشوارع والموسيقيين. يمكن أن يجلب الموقع الجميل الذي يحتوي على تأثير اختلاف الألوان المائية الذي يخبرنا عن هذا الحدث مزاجًا بهيجًا لمنزلك.
تحكي ماركة الأزياء Von Dutch من صفحات موقعها على الإنترنت القصة المذهلة لحياة مؤسسها. مما لا شك فيه ، من أجل أن تكون في الاتجاه ، تم استخدام تأثير التمرير المنظر الجديد. أثناء التمرير عبر الصفحة ، تطفو الصور والأيقونات لأعلى ولأسفل ، مما يجعلك تشعر وكأن شخصًا ما سكب الماء على شاشتك أثناء غيابك.
Fanabee هي صفحة مقصودة تم إنشاؤها ليس فقط لأولئك الذين يحبون الموسيقى ، ولكن أيضًا لأولئك الذين يجمعونها. باستخدام هذه الخدمة ، يمكنك نشر قائمة بما قمت بجمعه (أقراص مضغوطة ، ملصقات ، قمصان ، إلخ) والعثور على ما فاتك.
يجب تقديم التقنيات الجديدة بطريقة جديدة ، أليس كذلك؟
يسمح الكوميدي الهزلي على الإنترنت ، بتكليف من شركة بيجو العملاقة للسيارات (بيجو) ، للشركة بأداء مهمتين في وقت واحد: أولاً ، يعرض بشكل فعال آلية Peugeot Hybrid4 الجديدة على انتباه الجمهور المستهدف ، وثانيًا ، يعمل على صورة المنتج والشركة نفسها: الانضمام إلى بيجو ، والتجربة الجريئة للتنسيقات وعدم نسيان شخصيتها الفردية ، سيصبح الآن أكثر شهرة.
الحلول الثقافية هي وكالة استشارية ، كما يوحي اسمها ، تتعامل مع القضايا المتعلقة بالفنون. شعار الشركة عبارة عن دوائر متعددة الألوان متراكبة على بعضها البعض. هذا هو السبب في أن هذه الدوائر في الصفحة الرئيسية للموقع يتم لعبها بمساعدة تأثير اختلاف المنظر. تتحرك الدوائر بسرعات مختلفة وهذا يضيف عمقًا وحجمًا. اتضح أنه بيان موجز ، ولكنه رحيب للغاية وأنيق.
لا ينسى مطورو موقع jQuery Conference الشيء الرئيسي: فهم يحافظون على التوازن الصحيح بين المعلوماتية والإثارة.
الموقع ، الذي تم إنشاؤه خصيصًا لمؤتمر jQuery ، له تأثير اختلاف طفيف ، ولكن يتم تنفيذه بالخيال. أثناء التمرير عبر الصفحة ، تقوم بتشغيل سلسلة من الرسوم المتحركة المختلفة: دراجة تمر من اليسار إلى اليمين ، أو قطيع من طيور النورس يطارد سمكة قرش. بشكل عام ، إنها أصلية وليست محملة بالتأثيرات: بعد كل شيء ، الشيء الرئيسي ليس فقط المفاجأة ، ولكن أيضًا أن يتم سماعك.
تخبر وكالة Creative Shape على صفحتها المقصودة بشكل موجز إلى حد ما عن المراحل الرئيسية لنشاطها. تضيف الرسوم المتحركة الرؤية ، جنبًا إلى جنب مع التمرير المنظر ، كل ذلك يضيف تأثيرًا مرئيًا لطيفًا.
من أجل تعريف الجمهور المستهدف بسلسلة ألعاب ماريو كارت الجديدة ، طورت شركة يابانية مشهورة صفحة مقصودة تتحدث عن اللعبة ، باستخدام تأثير التمرير المنظر ، في شكل رحلة صغيرة عبر عالمها. ينسخ تصميم الصفحة المقصودة ونظام الألوان الخاص بها أسلوب اللعبة ، وعلى طول الطريق ستلتقي بشخصيات مألوفة منذ الطفولة.
فقط قم بفك الغطاء ويبدأ العمل
Activate Drinks هو موزع للمشروبات المدعمة وقد طور موردًا شاملاً للترويج لمنتجاتهم. أولاً ، تقوم بفك غطاء الزجاجة (تمرير الصفحة ، بالطبع) ، ثم تدخل في دوامة من الفقاعات سريعة الحركة. تخلق ثلاثة مستويات لوضع الفقاعات ، إلى جانب تأثير اختلاف المنظر ، تأثيرًا ثلاثي الأبعاد وشعورًا بأن البقع ستطير قريبًا من الشاشة.
لا يستخدم التمرير المنظر ليس فقط لتعزيز الجانب الجمالي للحملة ، ولكن أيضًا ، في حالة حكومة الولايات المتحدة ، لوضع لهجات دلالية وعاطفية على الصفحة. قد تلاحظ أن كل المحتوى يتم تمريره بشكل أسرع من الصور أدناه. يتم ذلك عن قصد لإبقاء انتباه القارئ على هذه الرسوم التوضيحية ، والتي لها تأثير على مشاعر الزوار.
صنع موقع الموسيقى الشهير Pitchfork اسمًا لنفسه من خلال مشروع Cover Stories الطموح. اكتسب مورد الإنترنت بعض ميزات مجلة لامعة مطبوعة ، لكن استخدام تأثير المنظر ومقاطع الفيديو التفاعلية والمقابلات والصور الفريدة جعلها لا تشبه أي شيء آخر. صور شخصية متحركة ونصوص مفعم بالحيوية وموسيقى تصويرية متطابقة تمامًا - بليغة ومصقولة للغاية.
آسر بساطتها من الفرنسيين من Soleil Noir
هذه الصفحة المقصودة الغريبة ، التي صممتها الوكالة الفرنسية Soleil Noir ، هي في الأساس ليست أكثر من بطاقة العام الجديد. هنا لن تجد أي شيء معقد: التمرير المنظر الذي لا يسبب الدوخة ، والبساطة في الرسوم التوضيحية ، والعبارات المقتضبة - لكن هذه البساطة آسرة.
يجمع أوكلي بين التمرير المذهل والتصوير التعبيري
تعتبر Oakley موردًا معروفًا للنظارات الواقية والنظارات الواقية ، وقد تم تصميم هذا المورد خصيصًا للترويج لنظارات Airbrake MX الجديدة. تجمع الصفحة المقصودة بين التمرير المذهل للمنظر والتصوير التعبيري الذي يقدم المنتج بشكل مثالي.
الصفحة المقصودة لراكب الدراجة الأولمبي ثلاث مرات وبطل العالم مرتين جيسون كيني
في وقت سابق من هذا العام ، صممت وكالة التسويق Fiasco Design ومقرها بريستول هذه الصفحة الرائعة لراكب الدراجات الأولمبي ثلاث مرات وبطل العالم مرتين جيسون كيني. صرح المؤسس المشارك للوكالة Ben Steers: "بناءً على الاختصاصات ، قررنا إنشاء موقع ويب من صفحة واحدة مع التمرير العمودي وتأثير المنظر."
سيسمح لك شريط التنقل بالانتقال بسرعة وسهولة إلى المنطقة المطلوبة من الصفحة
من بين العدد المتزايد من الصفحات المقصودة التي تستخدم موضع شريط التمرير لتشغيل الرسوم المتحركة والمؤثرات الصوتية ، يبرز إنشاء الوكالة الفرنسية La Moulade بمؤشر غير معتاد للغاية لموقعك على الصفحة. إنه موجود في الجزء العلوي ويتيح لك الوصول إلى أي جزء من الموقع أيضًا.
أصعب شيء هو الجمع بين إنجازات جميع التقنيات معًا
يقول المصمم الرئيسي Gavin Beck: "أولاً وقبل كل شيء ، نحن معجبون بهذا العرض". - كانت خطتنا هي إنشاء موقع ويب يطابق عالم The Walking Dead ، والذي سيقدره عشاق المسلسل ويستكشفونه. لتحقيق أهدافنا ، احتجنا إلى استخدام تطورات جديدة مثل HTML5 و CSS3 و JavaScript / jQuery و Web Audio / HTML5 Audio وبالطبع التمرير المنظر. كان التحدي الأكبر هو جعل كل هذه التقنيات تعمل معًا وتكون متاحة على جميع أنواع الأنظمة الأساسية ".
ربما هذا هو مستقبل الصحافة على الإنترنت؟
في عصر لا يثقل فيه الناس أنفسهم بقراءة الصحف والمجلات ، يتساءل الكثير من الصحفيين عن كيفية جذب انتباه الجمهور إلى الكلمة المطبوعة؟ اقترحت صحيفة The New York Times الأمريكية أحد الخيارات للتغلب على الأزمة ، والتي طورت شكلاً جديدًا لتقديم مقالات وقصص المجلات - موقع من صفحة واحدة تم إنشاؤه باستخدام أحدث التطورات في تصميم الويب ورسمه أتيلا فوتاكي.
بمجرد أن تبدأ في التمرير في الصفحة ، ستبدأ الرسوم التوضيحية في التحرك وتغمرك في الإجراء الموصوف.
لا شيء معقد ، على ما يبدو ، لكنه يبدو مسليًا للغاية
بغض النظر عما إذا كانت مؤسسة الرعاية الصحية عامة أو خاصة ، فإن قادة هذه المنظمات قلقون بشكل متزايد بشأن الحجم المتزايد لمدفوعات التعويضات. يكشف الرسم البياني المقدم هذه المشكلة بالضبط ، لكن تأثير التمرير المنظر يلفت الانتباه إلى نفسه.
بمجرد أن تبدأ في التمرير لأسفل الصفحة المقصودة ، سيظهر عامل رعاية صحية على الشاشة ، يسير في الردهة ويدفع نقالة أمامه. ينتقل من قسم إلى قسم ، كل منها يمثل سنة محددة في تاريخ نظام الصحة الوطني في المملكة المتحدة. ستشارك النوافذ المنبثقة معك معلومات حول أكبر مدفوعات التعويضات في هذه السنوات. لا شيء معقد ، على ما يبدو ، لكنه يبدو مسليًا للغاية.
يشارك موظف في الوكالة التي طورت هذا الهبوط انطباعه عن العمل: "لإنشاء هذا الموقع ، طبقنا تقنيات جديدة في HTML5 و CSS3 و JavaScript. نظرًا لأن الرسوم المتحركة هي العنصر الأساسي هنا ، فقد استخدمنا بشكل أساسي مكتبات الرسوم المتحركة "skrollr". تم رسم كل عنصر يدويًا وتمت إضافة اللمسات الأخيرة بدعم CSS3 ".
اللعبة المثالية للتمرير اللانهائي وتأثير المنظر
يعد هذا المورد ، الذي أنشأته الوكالة النرويجية Unfold ، مثالاً على مزيج من تأثيرات التمرير اللانهائي والتمرير المنظر. سيخبرك شريط التنقل المخفي في الزاوية اليمنى العليا دائمًا بمكانك على الموقع ويسمح لك بالانتقال بسرعة إلى المنطقة التي تهمك ، وإذا قمت بالتمرير في الموقع حتى النهاية ، ستلاحظ ذلك سوف يتحرك شريط التمرير لأعلى تلقائيًا ، وسوف تستمر في تمرير الموقع مرة أخرى ، من البداية.
لإنشاء هذا الهبوط ، استخدم المطورون المكون الإضافي skrollr.js ، والذي بفضله تمكن الزائرون من "تمرير" الأحداث على الصفحة. سمح ذلك بنمذجة عالية السرعة ، مما أتاح مزيدًا من الوقت لتسهيل التحولات وبناء واجهة مستخدم قوية. تم استخدام تقنية CSS 3D لإنشاء الرسوم المتحركة.
استنتاج
العالم لا يقف ساكنا ، وكل يوم هناك أعمال فنية جديدة في مجال تصميم المواقع. هل ستكون من بين هؤلاء الأبطال؟ من السهل أن تستفيد من هذه التقنيات الرائعة. لكن لا تنس الشيء الرئيسي: أي تأثير يتم تنفيذه يجب أن يساعد في زيادة التحويلات! وإلا ، فأنت لست بحاجة إليه.