في هذا البرنامج التعليمي ، نلقي نظرة على تأثير التمرير المنظر الجميل بأبسط الطرق ، مع الخلفيات الثابتة ومحتوى التمرير.

قم بتنزيل ملفات المصدر شاهد العرض التوضيحي

مقدمة مختصرة

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

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

الترميز والبنية

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

  

    
هادئ
  



  

    
لوريم إيبسوم دولر
    
Lorem ipsum dolor sit amet، consectetur adipisicing elit ...
  



  

    
ترتفع
  



  

    
لوريم إيبسوم دولر
    
Lorem ipsum dolor sit amet، consectetur adipisicing elit ...
  



  

    
هدوء
  



  

    
لوريم إيبسوم دولر
    
Lorem ipsum dolor sit amet، consectetur adipisicing elit ...
  

سيحتوي كل section به فئة من parallax على صور الخلفية ونص العنوان ، بينما سيكون كل section به فئة من content عبارة عن أقسام بسيطة تحتوي على محتوى. فئة container عبارة عن div مائع بأقصى عرض ، مما يجعل استجابة كل ذلك بسيطة للغاية. الآن ، دعنا نتعمق في CSS.

التصميم والعمل مع CSS

النقطة الأولى التي يجب ملاحظتها هي أن جميع صور الخلفية الخاصة بي يبلغ width 1600 بكسل height 600 بكسل. يسمح لي ذلك بتعيين أقسام المنظر الخاصة بي على ارتفاع ثابت يبلغ 600 بكسل. هناك ما هو أكثر من ذلك بقليل على الرغم من ذلك. نظرًا لأنني لا أريد تكرار الخلفيات (أنا أستخدم صورًا كبيرة وجريئة) ، لا يمكنني دائمًا أن أتوقع أن يكون المستخدمون بأقصى عرض (مما سيسمح لصور الخلفية أن تكون في وضع العرض الكامل). لحسن الحظ بالنسبة لنا ، يمكننا استخدام خاصية background-size في CSS وتعيينها على cover . هذا يفرض على صورة الخلفية أن تشغل المساحة الإجمالية المتاحة من خلال توسيعها بشكل متناسب. يجب أن تكون مسبوقة للحصول على أقصى قدر من الدعم على الرغم من ذلك ، لذا ضع في اعتبارك ذلك.

جيد حتى الآن ، باستثناء أهم شيء. نحتاج إلى أن تظل صورة الخلفية الخاصة بنا ثابتة في مكانها أثناء تمرير المحتوى الخاص بنا بعد ذلك. مرة أخرى ، تجعل CSS الحياة سهلة بالنسبة لنا. نحن نستخدم خاصية background-attachment وقمنا بتعيينها على fixed . بسيط! إليك ما يبدو عليه CSS ، مع بعض الأمثلة على استعلامات الوسائط:

 / * ================================================= ============
  الهيكل الأساسي
==================================================== ========== * /
.حاوية {
  أقصى عرض: 960 بكسل ؛
  الهامش: 0 تلقائي ؛
}
/ * ================================================= ============
  الأقسام
==================================================== ========== * /
section.module: last-child {
  الهامش السفلي: 0 ؛
}
section.module h2 {
  الهامش السفلي: 40 بكسل ؛
  عائلة الخطوط: "Roboto Slab" ، serif ؛
  حجم الخط: 30 بكسل ؛
}
section.module p {
  الهامش السفلي: 40 بكسل ؛
  حجم الخط: 16 بكسل ؛
  وزن الخط: 300 ؛
}
section.module p: last-child {
  الهامش السفلي: 0 ؛
}
section.module.content {
  الحشو: 40 بكسل 0 ؛
}
section.module.parallax {
  الارتفاع: 600 بكسل ؛
  موضع الخلفية: 50٪ 50٪ ؛
  تكرار الخلفية: لا تكرار ؛
  مرفق الخلفية: ثابت ؛
  حجم الخلفية: غطاء ؛
}
section.module.parallax h1 {
  اللون: rgba (255 ، 255 ، 255 ، 0.8) ؛
  حجم الخط: 48 بكسل ؛
  ارتفاع الخط: 600 بكسل ؛
  وزن الخط: 700 ؛
  محاذاة النص: مركز ؛
  تحويل النص: الأحرف الكبيرة ؛
  ظل النص: 0 0 10 بكسل rgba (0 ، 0 ، 0 ، 0.2) ؛
}
section.module.parallax-1 {
  صورة الخلفية: url ("../ img / demo / _small / 1.jpg")؛
}
section.module.parallax-2 {
  صورة الخلفية: url ("../ img / demo / _small / 2.jpg")؛
}
section.module.parallax-3 {
  صورة الخلفية: url ("../ img / demo / _small / 3.jpg")؛
}

media all and (min-width: 600px) {
  section.module h2 {
    حجم الخط: 42 بكسل ؛
  }
  section.module p {
    حجم الخط: 20 بكسل ؛
  }
  section.module.parallax h1 {
    حجم الخط: 96 بكسل ؛
  }
}
media all and (min-width: 960px) {
  section.module.parallax h1 {
    حجم الخط: 160 بكسل ؛
  }
}

دعم المتصفح ومعلومات الملكية

دعم المتصفح بشكل عام رائع حقًا. لن يدعم IE8 والإصدارات الأقل خاصية background-size ، ولكن يجب أن يعتني ذلك بأسلوب شرطي بسيط. بصرف النظر عن ذلك ، يتم دعم كل شيء ولن تواجه أي مشاكل. لمزيد من المعلومات حول خصائص CSS المستخدمة في هذا البرنامج التعليمي ، تحقق من MDN:

• موقف الخلفية - مرجع MDN
• حجم الخلفية - مرجع MDN
• مرفق الخلفية - مرجع MDN

يتم إحتوائه

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