شاشة سبلاش Splash أهلا بكم من جديد في دورة نوليدج سيتي في أوراق الأنماط المتتالية أنا كليف بروزو وفي هذا الدرس، سوف نلقي نظرة على شيء يسمى Splash Screen الآن قد ترى أن باقي الدرس الرابع فارغ سنصل إلى ذلك بعد قليل ولكن دعونا نلقي نظرة على ما يدخل في إنشاء شاشة سبلاش بالنظر إلى Atom ومنصة التطوير لدينا لدينا مستند HTML أساسي يحتوي على المعلومات العامة التي تشير إلى أعلى إلى ملف splash.css ولدينا غلافان واحد يسمى الحاوية container والآخر يسمى المحتوى content وهذان الاثنان سيتعاملان مع الطريقة التي يظهر بها النص على الشاشة كما ترون تم تعيين نصنا بالكامل على حجم H2 heading2 ولكل عنصر من هذه العناصر، قمت بتطبيق فئة أو كلاس منفصل، حسنًا، أنا أسميهم قواعد عن كيفية عرض كل سطر من هذا النص وبشكل أساسي، ما لدينا هنا هو تعليمات عن كيفية لعب اللعبة نحن بحاجة لمنح المستخدم نوعًا من المعرفة عندما يبدأون في اللعبة حتى يعرفوا ماذا يفعلون إذن لدي 11 قاعدة مختلفة حسنًا، الأخيرة ليست قاعدة بالضبط فالأخيرة تشير بالفعل إلى بداية اللعبة وتشرح كل قاعدة جزءًا مختلفًا عن طريقة لعب اللعبة دعنا نلقي نظرة على CSS وسنركز على النظر في جميع أرقام القواعد المختلفة في CSS لدينا، بدءًا من السطر 10 يمكنك أن ترى أن لدي حاويتي container الذي يضع مركزًا ثابتًا ويضع كل شيء بحيث يكون في الزاوية العلوية اليسرى أستخدم 100٪ من عرض وارتفاع الشاشة وتنتقل هذه الحاوية إلى أقصى حد في الخلفية وما أفعله هنا هو أنني أصنع خلفية متدرجة الراديو radio gradient ومرة أخرى، هذا يسمح لي بدلاً من الحصول على لون واحد بسيط فأنا أريد القليل من اللون ليأتي من المنتصف نحو الحواف وسترى كيف يبدو ذلك فبدلاً من الخلفية الزرقاء العادية سنحصل على وسط أبيض ناعم وتنمو للخارج ويحدث لها تشويش أو تمويه أثناء انتقالها إلى الخارج جزء المحتوى له نفس الشيء باستثناء الفهرس Z الذي يتغير وما يفعله ذلك هو أنني قمت بتعيينه على عدد كبير جدًا يجب أن تكون 1000 كافية وهذا يضمن عرض المحتوى سوف يذهب فوق كل ما هو موجود في الحاوية وهي الخلفية تبدأ قواعدي الخاصة بـ H2 في السطر 30 وأقوم بتعيين حجم الخط العام إلى خمسة أضعاف عرض العرض وأريد التأكد من أنه يملأ الشاشة أنا قمت بتوسيط النص أقوم بتحويل أي شيء إلى أحرف كبيرة أجعل اللون شفافا وأنشأت رسمًا متحركًا يسمى blur fade in and fade out ستستغرق هذه الرسوم المتحركة ثلاث ثوانٍ وكل من هذه H2 سيكون لها هذه الصفات المرتبطة بها ولهذا السبب صنعت تلك الحاوية الخاصة لذلك ثم أبدأ في إعداد كل قاعدة على حدة وأنشئ حجم خط مختلفًا لكل قاعدة وسبب اختلاف أحجام الخطوط أبدأ بسبعة هنا، وأبدأ بخمسة سيعتمد ذلك على مقدار النص الذي سأعرضه سيكون للقواعد الأقصر خط أكبر وكلما زاد عدد الكلمات الموجودة في القاعدة كلما كانت ستحتوي على خط أصغر قليلاً للتأكد من ملاءمتها للشاشة المفتاح هنا هو تأخير الرسوم المتحركة وما أحاول تحقيقه هو إعداد سلسلة من الثواني لأحدد متى يجب أن تظهر هذه الأشياء لذا في البداية ما يحدث هو أن القاعدة الأولى تبدأ من صفر ثانية لا يوجد تأخير للرسوم المتحركة عندما يبدأ هذا، تظهر القاعدة الأولى بالفعل تقول هذه القاعدة أن هذه هي knowledge City هذه هي القاعدة الأولى لذلك سيظهر ذلك على الشاشة على الفور ثم ستبقى هناك لمدة خمس ثوان لأن تأخير القاعدة الثانية خمس ثوان حتى يتسنى للمستخدم قراءة القواعد الآن كل من تأخيرات الرسوم المتحركة هذه سيكون لديها عدد مختلف من الثواني للانتظار بحيث يكون لدى المستخدم الوقت لقراءة ما هي القاعدة وكلما زاد عدد الكلمات الموجودة في القاعدة كلما كانت الرسوم المتحركة أطول عادة، 10 ثوان طويلة بما يكفي وكما ترى، فالكثير منها تستغرق 10 ثوانٍ القاعدة رقم ثلاثة هي تسعة عندما نصل إلى القاعدة رقم تسعة بالأسفل هنا في السطر 79 هذه 15 ثانية، وهذا عدد كبير من النصوص ونريد منح المستخدم فرصة لقراءة كل النص الموجود هناك القاعدة رقم تسعة، كما تبين لا تظهر حتى الدقيقة 10 في بداية هذه الشاشة ويمكنك أن ترى أن التأخير 70 ثانية لذلك فهذه طريقة لترميز جميع القواعد شاشة تلو الأخرى ولكن فقط باستخدام شاشة واحدة باستخدام CSS
