من الطرق الرائعة لجذب انتباه الزائر إلى موقع الويب الخاص بك هو "شاشة البداية" أو "شاشة مقدمة". ومع ذلك ، يصعب صنع واحدة ناجحة لسبب واحد بسيط: شاشات البداية تثير غضب المستخدمين بسهولة.
يمكن أن تعمل شاشات Splash إذا ظهرت بسرعة ويمكن فصلها بسهولة. يمكن أن تكون مدهشة بصريًا وجميلة ، وتجعل المستخدم يريد التمرير لمعرفة المزيد. هذا النمط من مقدمات العمل بشكل جيد للغاية على مواقع التمرير صفحة واحدة. أو "نمط البانر" لتصميم الويب الذي أصبح موضة مع اتجاه التصميم المسطح. كما يمكن أن يكون من المفيد جدًا تقديم أسلوب "الفيديو الخلفي" الجميل للمقدمة والذي يعتبر أيضًا أمرًا شائعًا في الوقت الحالي.
ما أريد أن أريكه اليوم هو طريقة أساسية لتحقيق هذا التأثير ، والتي يمكنك تعديلها بسهولة لجعل مقدمات لطيفة المظهر لتجارب الويب.
إذا كنت ترغب في معرفة ما نبنيه ، هناك عرض تجريبي هنا. ويمكنك تحميل جميع الملفات المصدر هنا.
الترميز
سنحاول الحفاظ على الترميز لهذا الأمر البسيط للغاية. وبهذه الطريقة يمكن تنفيذها بالفعل على المواقع الموجودة مسبقًا بالإضافة إلى المشاريع الجديدة.
إذن ، ما نريد أن نحققه هو قسمين. واحد مع فئة من دفقة وآخر مع فئة من المجمع . (قد تكون فئة المجمّع موجودة بالفعل بطريقة ما إذا كنت تقوم بتنفيذ ذلك على موقع موجود مسبقًا ، لذلك قد تحتاج إلى تغيير اسم الفئة هذا).
هذا هو. هذا كل ما نحتاجه. ولكن من الواضح أننا سنضيف في بعض المحتويات والألقاب الوهمية بحيث يكون لدينا شيء للنظر في عرضنا التجريبي. وسنحتاج أيضًا إلى نوع من الأسهم لإضافته إلى شاشة البداية لنظهر للمستخدم أنه يستطيع التمرير لأسفل (حيث ستكون هذه هي طريقتنا لجعل شاشة المقدمة تختفي وتجلب المحتوى الرئيسي).
إذاً ، هنا هو الترميز البسيط الذي يجري داخل علامة الجسم لدينا:
Lorem ipsum dolor sit amet، consectetur adipisicing elit. Dolor، velit sapiente facere tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias at nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero pariatur mollitia eveniet molestias debitis quia! Natus، minima، error، porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Error، soluta autem consequatur mollitia dolorem sequi iusto dolore fuga facilis esse illum accusamus ratione earum semi ipsa doloribus odio. Architecto، natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem
لذلك دعونا نشرح ما يجري هنا بتفاصيل أكثر: نبدأ بقسم البداية لدينا. في داخل ذلك لدينا عنوان ، ومؤشر التمرير الخاص بنا (الذي هنا هو صورة سهم ، ولكن يمكن أن يكون أي شيء تريده واضحًا). ثم نغلق هذا div ، وفتح آخر مع فئة من الالتفاف . في الداخل لدينا بعض محتوى الموقع العام الذي سيكون مختلفًا لكل حالة ، ولكن هنا سنبقيه بسيطًا: عنوان ، وبعض التنقل ، ومنطقة محتوى رئيسية وتذييل. بعد ذلك ، يتم تضمين jQuery من Google API حيث سنستخدمه للوظائف ، وأخيرًا نربطه بملف .js آخر هو منطقتنا والذي سنكتب فيه jQuery code الخاص بنا.
قد تلاحظ أيضًا تلاشي اسم الفئة في منطقة شاشة البداية. سنستخدم هذا الصف لإضافة بعض الرسوم المتحركة الجميلة CSS3 إلى عناصر معينة وجعل المقدمة أكثر قوة. من الواضح أنك إذا نظرت إلى النتائج الآن ، فلن يكون هناك أي شيء فعليًا ، فنحن بحاجة إلى تصميم كل شيء الآن. من الذي نتحدث عنه دعونا الحصول على CSS ...
تصميم
دعونا نحاول مرة أخرى أن نبقي الأنماط بسيطة ومفيدة. هذا هو كل شيء CSS عادي. أولا وقبل كل شيء ، دعونا نبدأ مع اسم فئة .fade-in. (يجب الإعلان عن هذا أعلى ملف CSS الخاص بنا ، حتى نتمكن من الإعلان عن أوقات تأخير الرسوم المتحركة المختلفة على العناصر الأخرى أدناه.)
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.3s;-moz-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;animation-delay: 0.5s;}
نحن نعلن الإطارات الرئيسية أولاً ونطلق على الرسوم المتحركة الخاصة بنا fadeIn. ينتقل من عتامة 0 إلى 1. ثم نستهدف اسم الفئة مباشرة ، ونحدد أنه يحتوي على 0 عتامة. واستدعاء أيون الرسوم المتحركة التي حددناها للتو ، وجعلها تدوم 0.3 ثانية وتعطيها تأخيرًا قدره 0.5 ثانية.
الآن دعونا ننظر إلى CSS اللازمة لصفحة البداية الخاصة بنا:
.splash { background: url('../img/splash-bg.jpg') center center;background-size: cover;background-attachment: fixed;position: fixed;top: 0;right: 0;bottom: 0;left: 0;min-height: 360px;z-index: 999;text-align: center;}
نحن نتصل في صورة خلفية (هنا هي مجرد صورة سوداء وبيضاء في أحد الشوارع) ، والتي نركزها ، مع التأكد أيضًا من أنها تغطي الشاشة بأكملها مهما كان حجمها ، وجعلها مرفقة — مما يعني أنها '' لن تتحرك على التمرير. ثم نعطيه موضعًا "ثابتًا" ، ونحدد أنه يجب أن يكون على مسافة 0 من الأعلى ، اليمين ، الأسفل واليمين ، وبالتالي يملأ نافذة المتصفح بالكامل. سنقوم بعد ذلك بإعطائه الحد الأدنى من الارتفاع لأن ما سنضعه في الداخل سيكون في وضع تام. تأكد من أنه يحتوي على فهرسة z عالية حيث نريد أن يظهر فوق باقي محتوى الصفحة (التي سيتم وضعها الآن تحت شاشة البداية مباشرة ، حيث أن لها موقع ثابت).
هناك تذهب ، وهذا هو كل الأنماط التي هي في الواقع اللازمة لجعل شاشة البداية تظهر في المكان المناسب على الصفحة. ملء الشاشة وفوق كل المحتوى الآخر ، دون تغيير تدفق الصفحة على الإطلاق. حتى الآن سأعطيك بسرعة بقية CSS ، التي تضع العنوان في المكان المناسب ، أضف سهمًا رائعًا لأسفل للإشارة إلى ضرورة قيام المستخدم بالتمرير. وأخيرًا بعض الأنماط الأساسية للصفحة ، وبعض استعلامات الوسائط:
html, body { width: 100%;height: 100%;}body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }.wrapper {max-width: 1000px;width: 90%;margin: 0 auto;}.splash-title {color: white;font-size: 3em;margin-top: 100px;text-shadow: 0 2px 10px #000;-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}a.splash-arrow {color: white;font-size: 1.2em;position: absolute;bottom: 55px;left: 50%;margin-left: -25px;padding: 10px;width: 50px;height: 50px;font-weight: bold;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;border: 3px solid white;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}a.splash-arrow:hover {text-decoration: none;bottom: 50px;}@media all and (max-width: 690px) {header h1 { width: 100%; text-align: center; }header nav { float: none; display: inline-block; margin: 0 auto; }.splash-title {font-size: 2em;}}@media all and (max-width: 480px) {.splash-title {font-size: 1.5em;}}
حتى هنا لدينا أنماط عامة للجسم ، بعض الحشو العلوي على العنوان ، حيث نقوم أيضا بتأخير الخبو في الرسوم المتحركة بنصف ثانية أخرى. لذلك لديها مدخل خاص بها. يتم وضع رابط السهم بشكل مطلق ، ليكون دائمًا في منتصف وأسفل الشاشة. لديه تأخير آخر نصف ثانية لتظهر نهائيا على الشاشة. نضيف بعض انتقالات CSS3 بحيث يتم تغيير موضع الإعلان في الحالة: حالة التحويم. أخيرًا ، لدينا بعض التغييرات الصغيرة في استعلام الوسائط لجعلها تبدو أجمل قليلاً على الشاشات الصغيرة. لكن من الواضح أن هذه الأنماط ستتغير وفقًا لتصميمك.
مسج
لذا كما أعلنا في وقت سابق ، سنقوم بعمل ملف اسمه main.js في دليل js . في الداخل سنكتب jQuery الذي يجعل شاشة البداية تختفي عند التمرير ، أو عندما تنقر على رابط السهم. ها هو:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} )؛} $ ( ". دفقة السهم") انقر (وظيفة () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} ، 800)؛})؛})؛})؛ $ (إطار) .scroll (وظيفة () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} "المجمع"؛، 100) $ () تأخير (100) .animate ({ "التعتيم": "1.0"}، 800)؛})؛})؛
بادئ ذي بدء ، نقوم بتغليف أول عدد قليل من البيانات داخل دالة جاهزة للوثيقة ، واتخاذ إجراء فقط عندما يتم تحميل الصفحة بالكامل. حتى نبدأ ندقق لنرى ما إذا كانت شاشة البداية الخاصة بنا مرئية. إذا كان الأمر كذلك ، فإننا نجعل الغلاف غير مرئي (لذلك ليس لدينا أي محتوى فلاش أثناء تحميل صورة الخلفية ، وأيضًا لإجراء تدرج نهائي في الرسم المتحرك بمجرد وصولنا إلى الصفحة). ثم نقوم بإضافة وظيفة إلى معالج النقر على السهم. لذلك إذا قام المستخدم بالنقر فوقها ، تنزلق شاشة البداية (وبالتالي تختفي) ثم نقوم بتحريك عتامة الغلاف مرة أخرى إلى 1.
هذه الكتلة الصغيرة من الكود هي (تقريبًا) هي نفسها التي سنستخدمها بعد ذلك في وظيفة .scroll $ (نافذة) . لذا عندما يمرر المستخدم ، ننزلق إلى البداية ، ثم تحرك هذه المرة إلى أعلى الصفحة (بحيث لا يبدأ المستخدم بنصف الصفحة) ويحفز عتامة عنصر الالتفاف. نضيف أيضا في هذا الخط $ (نافذة) .off ("scroll") ؛ التي تمنع النافذة من التمرير فعليًا عندما لا نريدها. عندما يقوم المستخدم بالتمرير لأول مرة ، نرغب في تعيين الرسم المتحرك فقط ، وعدم التمرير الفعلي للصفحة. ولكن بمجرد ذهاب المقدمة ، سيتم تمرير الصفحة بشكل طبيعي.
استنتاج
لذا يوجد لديك ، حل بسيط للغاية (خفيف الوزن) ولكنه أنيق لتتم إضافة شاشة مقدمة إلى أعلى موقعك ، وتختفي عند التمرير ، أو عندما ينقر المستخدم على عنصر محدد. لا تتردد في أخذ هذا الرمز واستخدامه وتعديله ليناسب احتياجاتك.
كما ذكرت في البداية ، يمكن استخدام هذه التقنية بأي عدد من الطرق المختلفة ، لذلك كن مبدعًا!