21 من أفضل الأمثلة على JavaScript

صفحة 1 من 2: صفحة 1

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

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

01. النسيج

يعد علم النسيج طريقة رائعة لاستكشاف 14 مليار سنة من الأشياء



يعد علم النسيج طريقة رائعة لاستكشاف 14 مليار سنة من الأشياء

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

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

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

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

02. فيليبو بيلو

اختار Adoratorio استخدام CSS3 و Javascript بدلاً من WebGL لإعطاء إحساس بالعمق

اختار Adoratorio استخدام CSS3 و Javascript بدلاً من WebGL لإعطاء إحساس بالعمق

تم تصميم هذه الحافظة عبر الإنترنت التي تعرض موهبة الفنان الإيطالي ثلاثي الأبعاد فيليبو بيلو وتصميمها وتطويرها داخليًا في أدوراتوريو بواسطة Enea Rossi و Alessandro Rigobello. تم منح الفريق الحرية الكاملة في كيفية تصميمه.

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

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

03. سانت لويس براونز

أمثلة على JavaScript: سانت لويس براونز

تم تصميم موقع سانت لويس براونز مثل كتاب قديم

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

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

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

تم إنشاء الموقع باستخدام Node.js و Express framework للسماح بالتحديث السلس والتدفق بين المحتوى.

04. استوديو عمل الساق

أمثلة على JavaScript: Leg Work

يستخدم موقع Leg Work Studio الرسوم المتحركة التفاعلية لإضفاء الحيوية على التجربة

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

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

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

05. كود أسيوط

أمثلة JavaScript: Code Conf

صورة بمقياس فوتوشوب لتناسب القماش
موقع Code Conf's تحت عنوان ناشفيل

يتخطى موقع CodeConf موقع الويب القياسي الخاص بالمؤتمر. عُقد المؤتمر في ناشفيل ، تينيسي ، وكل شيء عن هذا التصميم يكرّم هذا الموقع.

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

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

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

06. تصميم IBM

أمثلة على JavaScript: تصميم IBM

موقع IBM Design مستوحى من العالم المادي بدلاً من العالم الرقمي

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

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

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

لماذا تعتبر الرسوم المتحركة مهمة للغاية بالنسبة إلى لغة التصميم الخاصة بشركة IBM؟ يقول هيوز: 'مثلما تساعدك لغة جسد الشخص على قراءة المحادثة ، تنقل الرسوم المتحركة المعلومات الهامة التي تساعد المستخدمين على فهم كيفية التنقل في منتجاتنا واستخدامها'.

07. ماسي توبونجاتو

أمثلة على JavaScript: Masi Tupungato

موقع بقيادة الصور لمشروع صناعة النبيذ الإيطالي Masi Tupungato

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

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

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

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

08. tota11y

أمثلة JavaScript: tota11y

tota11y يجعل إمكانية الوصول أبسط

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

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

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

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

09. تعرف على مرض الذئبة

أمثلة على JavaScript: تعرف على الذئبة

يستكشف موقع Know Lupus الحالة بطريقة ممتعة وغنية بالمعلومات

مؤسسة Lupus الأمريكية (LFA) هي منظمة وطنية تعمل على حل لغز مرض الذئبة. يزدهر دخلت في شراكة مع LFA في مشروع توعية عام مجاني لمساعدة الجمهور العام على فهم المرض.

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

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

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

10. القارب

أمثلة على JavaScript: The Boat

القارب ، رواية مصورة على الإنترنت

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

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

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

تبدو اللوحات الرسومية مثل رسومات اليوميات - ملحة وغير كاملة وعاطفية للغاية. يثبت هذا الموقع مدى قوة وجاذبية سرد القصص عبر الإنترنت في اليد اليمنى.

أحد عشر. Run4Tiger

أمثلة على JavaScript: Run4Tiger

هل يمكنك الجري بقدر النمر؟ اكتشف مع هذا الموقع والتطبيق قيد التشغيل

مقرها موسكو الأولاد الجياع صمم موقع حملة وقف العرض هذا لصالح World Wildlife Fund Russia لزيادة الوعي العام بحملته Save The Tiger. لماذا تسابق مع أصدقائك بينما يمكنك تسابق نمر آمور المتتبع بنظام GPS؟

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

إنه مفهوم رائع ، وهناك تصميم رائع يتوافق معه. تعكس لوحة الألوان الحادة باللونين الأسود والأصفر - الجريئة بشكل غير معهود لتطبيق خيري - مدى إلحاح مبادرة Save The Tiger.

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

الصفحة التالية: أفضل 10 أمثلة أخرى لجافا سكريبت لإلهامك ...

  • 1
  • اثنين

الصفحه الحاليه: صفحة 1

الصفحة التالية الصفحة 2