لقد أعاد CSS الحديث تعريف تطوير الويب بوظائفه القوية وقدراته الاستثنائية. CSS هو أداة تناسب الجميع وتوفر خيارات متميزة لجعل صفحات الويب تفاعلية وجذابة للغاية. وسواء كان ذلك المرونة في التصميم، أو التخصيص السريع، أو خيارات التنسيق الممتازة، أو واجهة المستخدم المتقدمة (UI) — فإن CSS يقدم حلولاً متكاملة لجميع احتياجات تطوير وتنسيق الويب. وقبل كل شيء، فإن استخدام CSS و HTML، يمكنك إضافة رسوم متحركة وتأثيرات عن طريق كتابة بضعة أسطر فقط من التعليمات البرمجية، وهو أمر مجهد بخلاف ذلك باستخدام JavaScript.
في هذا الدليل، سنأخذك في جولة عبر خطوات إنشاء تأثير التمرير المتوازي (parallax) باستخدام CSS في Chrome.
المتطلبات الأساسية
لمتابعة هذا البرنامج التعليمي، يجب أن يكون لديك فهم أساسي لـ HTML و CSS.
الخطوة 1: إنشاء مشروع جديد
لنبدأ بإنشاء مجلد وملفات مشروع جديد باستخدام واجهة سطر الأوامر. افتح الطرفية واكتب الأمر التالي لإنشاء مجلد مشروع جديد:
|
1 |
mkdir css-parallax |
استخدم الأمر cd لتغيير الدليل إلى مجلد css-parallax :
|
1 |
cd css-parallax |
بعد ذلك، أنشئ ملف HTML في مجلد css-parallax حيث سنضع جميع أكواد HTML. سمِّ الملف index.html وافتحه باستخدام الأمر nano :
|
1 |
nano index.html |
بمجرد أن يصبح ملف index.html جاهزًا، دعنا ننتقل للأمام ونقوم ببناء هيكل صفحة الويب عن طريق إضافة أكواد HTML التمهيدية.
الخطوة 2: هيكل HTML الأساسي
في هذه الخطوة، سنقوم بتصميم صفحة الويب الخاصة بنا عن طريق إضافة أكواد HTML . أضف أسطر الكود التالية في ملف index.html :
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>تأثير التمرير المتوازي باستخدام CSS</title> </head> <body></body> </html> |
بعد إعداد الهيكل الأساسي لصفحات الويب الخاصة بنا، قم بإنشاء ثلاث فئات أقسام – اثنتان لصور الخلفية وواحدة للخلفية العادية الثابتة. بعد ذلك، أضف أسطر الكود التالية في علامة <body> :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body ... <main class"wrapper"=> <section class"section parallax bg1"=> <h1>قبل تأثير التمرير المتوازي<h1/> <section/> <section class"section static"=> <h1>مرحبًا بك في التمرير المتوازي<h1/> <section/> <section class"section parallax bg2"=> <h1>بعد تأثير التمرير المتوازي<h1/> <section/> <main/>< ... body/>
إدراج أكواد HTML في علامة
|
<body> يكمل الإعداد الأساسي لملف html الخاص بنا.. في الخطوات القادمة، سنقدم CSS ونحدد خيارات التنسيق لكل منها.الخطوة 3: مقدمة إلى CSS
دعنا ننسق الموقع عن طريق إضافة ملف CSS وإنشاء تأثير البارالاكس. أولاً، أنشئ ملف CSS في مجلد
cssparallax-parallax المجلد الذي سنضع فيه جميع أكواد CSS المطلوبة لإنشاء تأثير التمرير المتوازي (parallax). بعد ذلك، أدخل ملف styles.css في مجلد css-parallax الخاص بك باستخدام الأمر nano :
|
1 |
nano styles.css |
سنقوم بتنسيق صفحة الويب الخاصة بنا بدءًا من فئة .wrapper . تقوم فئة .wrapper بتعيين خصائص المنظور والتمرير للصفحة بأكملها. ابدأ بفئة wrapper وحدد ارتفاعها، والتمرير (overflow)، والمنظور (perspective). اضبط ارتفاع wrapper على قيمة ثابتة ليعمل تأثير التمرير المتوازي. في هذا الدليل، قمنا بتعيين قيمة منفذ العرض باستخدام 100vh للحصول على الارتفاع الكامل لمنفذ عرض الشاشة. يمكنك تعديل قيمة vh بناءً على احتياجات مشروعك. بعد ذلك، قم بتعطيل شريط التمرير الأفقي للشاشة عن طريق تعيين الخاصية overflow-x كـ hidden. أيضًا، حدد قيمة الخاصية perspective لتكون 3px. دعنا نضيف أسطر الكود التالية في فئة ملف styles.css :
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
الخطوة 4: إضافة تنسيق لفئة .section
بجانب فئة wrapper، أضف التنسيقات إلى فئة .section . تحدد فئة .section خصائص الحجم والعرض والنص للأقسام الرئيسية. اضبط الموضع (position) كـ relative لمحاذاة الموضع النسبي للعنصر الابن .parallax::after والعنصر الأب .section. احتفظ بـ view-height(vh) كـ 100 للحصول على الارتفاع الكامل لمنفذ عرض الشاشة. قم بإضافة وتعديل وتنسيق المعلمات الأخرى وفقًا لاحتياجاتك.
داخل ملف styles.css أضف الكود التالي بجانب فئة wrapper:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
بعد ذلك، سنضيف عنصرًا زائفًا (pseudo-element) ونقوم بتنسيقه لإنشاء تأثير التمرير المتوازي وتفعيله.
الخطوة 5: إضافة تنسيقات لفئة .parallax
في هذه الخطوة، سنضيف عنصرًا زائفًا على .parallax. سيكون هذا العنصر الزائف هو الابن الأخير للعنصر وسيقوم بإضافة عنصر زائف ::after إلى صورة الخلفية المسؤولة عن بدء تأثير التمرير المتوازي. في النصف الأول من الكود، يتم إعداد مواصفات العرض الأساسية وموضع العنصر الزائف. في النصف الثاني، سنضيف خاصية transform باستخدام دالة CSS translateZ() ونبقيها كـ (-1px). بالإضافة إلى ذلك، أضف z-index للتحكم في التراكم الرأسي.
أضف الكود التالي أسفل فئة .section :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000; } .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
الخطوة 6: إضافة الصور والخلفية لكل قسم
دعنا نضيف خصائص CSS النهائية في صور الخلفية ولون الخلفية للقسم الثابت. ابدأ بإضافة لون خلفية ثابت إلى قسم .static . اضبط لون الخلفية كـ aqua وأضف الكود التالي بعد فئة .parallax::after :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
تضيف الفئة .static خلفية إلى القسم الثابت الذي لا يحتوي على صورة. القسمان الآخران اللذان يحتويان على الفئة .parallax لديهما فئات فريدة مخصصة لاحتواء صور الخلفية. أضف عناوين URL لصور الخلفية في .bg1 و .bg2 على التوالي.
في هذا البرنامج التعليمي، نستخدم صورًا عشوائية من Unsplash. يمكنك أيضًا استخدام صور من مواقع ويب أخرى مثل Pixapay, Placekitten، و Pexels، على سبيل المثال لا الحصر، وتخصيصها كما تريد. أضف الكود التالي إلى الفئة .static :
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
الخطوة 7: ربط CSS بـ HTML
الآن بعد أن أضفنا كل الكود الخاص بتأثير التمرير المتوازي (parallax)، فلنقم بربط ملف styles.css بملف index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>تأثير تمرير البارالاكس باستخدام CSS</title> </head> ... |
افتح ملف index.html الذي قمنا بإنشائه في الخطوة 2 وفي متصفح Chrome:
الخاتمة
في هذا البرنامج التعليمي، مررنا بخطوات إعداد صفحة ويب صالحة للعمل باستخدام إعداد أساسي. هناك الكثير من الخيارات المثيرة للاهتمام وخيارات التخصيص الأخرى التي يمكنك تجربتها. يمكنك محاولة إضافة تأثيرات الظل، وتعديل تمرير الصور، وتعديلات أخرى لجعل تعلمك ممتعًا ومثيرًا.
لمزيد من التعمق في مواضيع تطوير الويب، تحقق من هذه الموارد من مدونتنا:
- دليل حول إضافة JavaScript إلى HTML
- العمل مع JavaScript: ما هي الكائنات (Objects)
- ما هو jQuery وكيف يمكنك استخدامه
برمجة ممتعة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.