كيفية إنشاء شريط تمرير محتوى CSS3 فقط وظيفي بالكامل

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

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

بعض HTML بسيط لتبدأ به

		

			
			

			

			

			

			

			

			
			

				

					
					

						
صفحة 1

						
Lorem ipsum dolor sit amet ، تناول أيًا كان بلاه.

					

				

				

					
					

						
الصفحة 2

						
Lorem ipsum dolor sit amet ، تناول أيًا كان بلاه.

					

				

				

					
					

						
الصفحة 3

						
Lorem ipsum dolor sit amet ، تناول أيًا كان بلاه.

					

				

				

					
					

						
صفحة 4

						
Lorem ipsum dolor sit amet ، تناول أيًا كان بلاه.

					

				

				

					
					

						
الصفحة 5

						
Lorem ipsum dolor sit amet ، تناول أيًا كان بلاه.

					

				

				

					
					

						
الصفحة 6

						
Lorem ipsum dolor sit amet ، تناول أيًا كان بلاه.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

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

لدينا قسم " content-slider " ، والذي يحتوي على كل المحتوى. سنقوم فقط " margin: 0 auto " وننسى أمره.

ثم لدينا قسمين: قسم " content " و " nav " المجاهدين. محتوى div هو ما يحمل جميع صفحاتنا ، و "nav" ul هو ما يسمح لنا بالوصول إلى صفحات مختلفة.

الآن ، داخل div "المحتوى" مباشرةً ، ستلاحظ 6 أقسام متداخلة: " content-inner-1 " من خلال " content-inner-6 ". هذه الأجزاء الستة ستجعل كل السحر يعمل ، وسأشرح بالضبط كيف في وقت لاحق.

The Magical CSS

 # شريط تمرير المحتوى {
عائلة الخطوط: arial ؛
العرض: 640 بكسل ؛
الهامش: 0 تلقائي ؛
أعلى الهامش: 100 بكسل ؛
}

#المحتوى {
إخفاء الفائض؛
العرض: 640 بكسل ؛
الارتفاع: 480 بكسل ؛
-webkit-box-shadow: 0px 0px 50px 10px # c9c9c9 ؛
-moz-box-shadow: 0px 0px 50px 10px # c9c9c9 ؛
مربع الظل: 0px 0px 50px 10px # c9c9c9 ؛
}

# محتوى داخلي {
العرض: 10000 بكسل ؛
الارتفاع: 480 بكسل ؛
}

.صفحة {
العرض: 640 بكسل ؛
الارتفاع: 480 بكسل ؛
تعويم: اليسار؛
}

كما قلت ، كل ما فعلناه مع div " content-slider " كان توسيطه ونقله 100 بكسل من أعلى الصفحة.

أسلوب div " content " مهم جدًا. قمنا بتعيين "الفائض" على "مخفي" - وهذا يضمن أن الشرائح غير مرئية حتى يتم تحديدها.

الآن ، عنصر div " content-inner " هو ما يحمل جميع الصفحات. هذا هو السبب في أن عرضه يبلغ 10000 بكسل. عادة ، جافا سكريبت ستعطيها العرض الصحيح ، لكن في هذه الحالة ، نحن لا نستخدم جافا سكريبت.

تحتوي الصفحات على عرض وارتفاع ، ويتم تعويمهما إلى اليسار ليكونا جنبًا إلى جنب.

الآن ، لدينا بعض التصميم العام. سنقوم بتصميم نمط " page-info " و " nav ".

 .page-info {
الارتفاع: 90 بكسل ؛
لون الخلفية: rgba (99 ، 99 ، 99 ، 0.6) ؛
الموقف: نسبي ؛
أعلى الهامش: 0 بكسل ؛
أسفل: 103 بكسل ؛
اللون: #dedede ؛
المساحة المتروكة: 20 بكسل ؛
أعلى الحشو: 10 بكسل ؛
}

.page-info h2 {
حجم الخط: 21 بكسل ؛
الهامش السفلي: 10 بكسل ؛
أعلى الهامش: 0 بكسل ؛
اللون: # فافافا.
}

.page-text {
حجم الخط: 15 بكسل ؛
}

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

بعد ذلك ، سنضيف بعض تصميم CSS3 الجميل إلى الأزرار.

 .زر {
تعويم: اليسار؛
الخلفية: #bababa ؛
العرض: 16 بكسل ؛
الارتفاع: 16 بكسل ؛
نصف قطر مجموعة الويب الحدودية: 8 بكسل ؛
-موز حدود نصف قطرها: 8 بكسل ؛
نصف قطر الحدود: 8 بكسل ؛
الهامش الأيسر: 5 بكسل ؛
الهامش الأيمن: 5 بكسل ؛
}

.button: مرر {
-webkit-box-shadow: أقحم 0px 0px 2px 2px # d4d4d4 ؛
-moz-box-shadow: أقحم 0px 0px 2px 2px # d4d4d4 ؛
مربع الظل: أقحم 0px 0px 2px 2px # d4d4d4 ؛
}

.button: نشط {
-webkit-box-shadow: داخلي 0px 0px 2px 2px # 7a7a7a ؛
-moz-box-shadow: أقحم 0px 0px 2px 2px # 7a7a7a ؛
مربع الظل: أقحم 0px 0px 2px 2px # 7a7a7a ؛
}

.button a {
العرض محجوب؛
العرض: 16 بكسل ؛
الارتفاع: 16 بكسل ؛
}

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

أخيرًا ، سنضيف المكون السحري إلى المزيج. قبل ذلك ، سأشرح كيف سيعمل كل هذا.

باستخدام CSS3 :target pseudo-selector ، يمكننا تصميم العناصر الموجودة في عنوان url. علي سبيل المثال:

 #مثال {
الرؤية: مخفي
}

#example: الهدف {
الرؤية: مرئي
}

الآن ، إذا كنا في عنوان url مثل "http://www.example.com/index.html #example ، فسيتم تطبيق أنماط": target "أعلاه. في هذه الحالة ، سيكون "المثال" div مرئيًا.

باستخدام هذا المفهوم ، يمكننا تقليد وظيفة النقر فوق جافا سكريبت. إذا نقر المستخدم على ارتباط يشير إلى "http://www.example.com/index.html#example" ، فسيتم تطبيق الأنماط على "مثال".

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

ها هو الكود:

 # content-inner-1: الهدف # المحتوى الداخلي {
-webkit- الانتقال: كل 400ms سهلة ؛
-موز-الانتقال: سهولة كل 400 مللي ثانية ؛
-o-Transition: كل 400ms سهلة ؛
الانتقال: كل 400 مللي ثانية سهلة ؛
الهامش الأيسر: 0 بكسل ؛
}

# content-inner-2: الهدف # المحتوى الداخلي {
-webkit- الانتقال: كل 400ms سهلة ؛
-موز-الانتقال: سهولة 400 مللي ثانية ؛
-o-Transition: كل 400ms سهلة ؛
الانتقال: كل 400 مللي ثانية سهلة ؛
الهامش الأيسر: -640 بكسل ؛
}

# content-inner-3: الهدف # المحتوى الداخلي {
-webkit- الانتقال: كل 400ms سهلة ؛
-موز-الانتقال: سهولة 400 مللي ثانية ؛
-o-Transition: كل 400ms سهلة ؛
الانتقال: كل 400 مللي ثانية سهلة ؛
الهامش الأيسر: -1280 بكسل ؛
}

# content-inner-4: الهدف # المحتوى الداخلي {
-webkit- الانتقال: كل 400ms سهلة ؛
-موز-الانتقال: سهولة كل 400 مللي ثانية ؛
-o-Transition: كل 400ms سهلة ؛
الانتقال: كل 400 مللي ثانية سهلة ؛
الهامش الأيسر: -1920 بكسل ؛
}

# content-inner-5: الهدف # المحتوى الداخلي {
-webkit- الانتقال: كل 400ms سهلة ؛
-موز-الانتقال: سهولة 400 مللي ثانية ؛
-o-Transition: كل 400ms سهلة ؛
الانتقال: كل 400 مللي ثانية سهلة ؛
الهامش الأيسر: -2560 بكسل ؛
}

# content-inner-6: الهدف # المحتوى الداخلي {
-webkit- الانتقال: كل 400ms سهلة ؛
-موز-الانتقال: سهولة 400 مللي ثانية ؛
-o-Transition: كل 400ms سهلة ؛
الانتقال: كل 400 مللي ثانية سهلة ؛
الهامش الأيسر: -3200 بكسل ؛
}

خاتمة

لدينا 6 أقسام div " content-inner-[number] " ، وكل عنصر div يتوافق مع صفحة. 6 صفحات هي 6 divs.

عنصر div "المحتوى الداخلي" هو عنصر ثانوي لكل عنصر div " content-inner-[number] " ، لذلك عندما يكون أي من عناصر div " content-inner-[number] " :targeted ، يمكننا تصميم " content-inner "div وفقًا لذلك.

نظرًا لأن عرض كل صفحة يبلغ 640 بكسل ، فإننا نقوم ببساطة بتعيين الهامش الأيسر لعنصر div " content-inner " على مضاعف 640.

لجعل أنماط " :target " هذه تعمل ، يجب أن يكون لدينا روابط تشير إليها. ومن ثم ، فإن " nav " ul أسفل الصفحات.

من أجل تحريك " content-inner " فعليًا ، نمنحه خصائص الرسوم المتحركة المعتادة لـ CSS3 ، مع بادئات البائع بالطبع.

حسنًا ، إليكم الأمر: شريط تمرير محتوى كامل الوظائف ، وإن كان غير دلالي.