10 أمثلة مثيرة لشاشات البداية في تصميم الويب

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

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

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

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

الاستفادة من ملء الشاشة

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

SmokeT بواسطة تيد أركوري

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

.

صفحة البداية بواسطة تيموثي جيبلين

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

الرسوم المتحركة على شاشة البداية بواسطة Hitesh Sahu

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

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

حلول كلاسيكية

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

شاشة سبلاش من آدم بلوم

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

تشغيل بواسطة Nirajan

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

ماي سبلاش من ويليامز

يعد My Splash by Williams مثالًا تمثيليًا آخر لشاشة البداية الكلاسيكية. المفهوم له مرحلتان. في البداية ، تكشف الرسوم المتحركة عن توقيع المؤلف بوتيرة معتدلة ومريحة. بعد ذلك ، تظهر شاشة سوداء. هذا حل أنيق وأنيق وعملي يناسب العديد من المشاريع.

شاشة البداية المتحركة من قبل دميترو لفيفسكي

شاشة الرسوم المتحركة من Dmytro Lvivsky هي نقطة انطلاق مثالية لإنشاء الحل الخاص بك. تحتوي الرسوم المتحركة التي تدعمها JavaScript على العديد من الشاشات وانتقال تقليدي بين كل واحدة منها. يعتمد الأخير على تأثير حيث تقود الدائرة المسرحية.

شاهد شاشة البداية المتحركة بالقلم Dmytro Lvivsky (UnforbiddenYet) على CodePen.

يتلاشى بسيط CSS3 بواسطة جايلز بابوورث

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

واضع المزاج

توضح الأمثلة التالية أنه يمكن أيضًا استخدام شاشة البداية لتعيين نغمة موقع ويب من البداية.

وحدة التحكم في تحميل الرسوم المتحركة بواسطة Andrew Tunnecliffe

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

الأرقام المتساقطة بواسطة Thibault Jan Beyer

إذا كان لديك مشروع قائم على الإحصائيات أو البيانات في الاعتبار ، فإن Falling Numbers من Thibault Jan Beyer هو بداية جيدة لتجربة سرد القصص. تبدأ الرسوم المتحركة بأرقام متساقطة تصل في النهاية إلى الأرض وتفتح الشاشة الرئيسية. لها سحر هندسي غني ببعض التوابل الرقمية.

اخيرا وليس اخرا

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

شاشة مارفل سبلاش من مات فاينشتاين

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

كيف تصنع سبلاش

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

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