كيفية إنشاء تأثير تحوم الصور في CSS

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

يمكنك إنشاء أنماط مختلفة من الرسوم المتحركة على صورك. يتضمن ذلك ضبابية الخلفية أو تكبيرها ، أو تلاشي النص أو الانزلاق في النص ، وتغيير لون الخلفية.

إنشاء HTML للصور

ابدأ بإنشاء ملف index.html ملف داخل مجلد فارغ على جهاز الكمبيوتر الخاص بك ، ثم افتح الملف باستخدام محرر نصوص. داخل الملف ، قم بإنشاء هيكل HTML وأضف العلامات التالية داخل النص الافتتاحي وعلامات إغلاق النص:

<شعبةفصل="شبكة">
<شعبةفصل="غلاف الصورة">
<IMGفصل="طمس"src=" https://picsum.photos/500?random=1"بديل="">
<شعبةفصل="المحتوى يتلاشى">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. إعلان Soluta
 Sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
شعبة>
شعبة>





instagram viewer

<شعبةفصل="غلاف الصورة">
<IMGفصل="تكبير طمس"src=" https://picsum.photos/500?random=2"بديل="">
<شعبةفصل="المحتوى يتلاشى">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. إعلان Soluta
 Sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
شعبة>
شعبة>
<شعبةفصل="غلاف الصورة">
<IMGفصل="طمس"src=" https://picsum.photos/500?random=3"بديل="">
<شعبةفصل="شريحة المحتوى إلى اليسار">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. إعلان Soluta
 Sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
شعبة>
شعبة>
<شعبةفصل="غلاف الصورة">
<IMGفصل="رمادي"src=" https://picsum.photos/500?random=3"بديل="">
<شعبةفصل="شريحة المحتوى إلى اليسار">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. إعلان Soluta
 Sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
شعبة>
شعبة>
شعبة>

هذه حاوية شبكية بها أربعة أغلفة للصور. عناصر div ذات غلاف الصورة الطبقة بمثابة غلاف للصورة والنص المقابل لها. تحتوي صورة ومحتوى كل قسم على مجموعة فريدة من الفئات المضافة إليه.

داخل ورقة الأنماط ، ستفعل ذلك استهدف هذه العناصر بأسماء فئتها وتطبيق تأثيرات التصميم والرسوم المتحركة المختلفة. لن يظهر النص بشكل افتراضي ؛ ستظهرها فقط عندما تحوم فوق غلاف الصورة ، وستخضع الصورة لتأثيرات مختلفة في هذه العملية.

مضيفا CSS الأساسية

الآن بعد أن أنشأت HTML ، حان الوقت لتصميمه باستخدام CSS. إنشاء style.css ملف ورابط إلى ورقة الأنماط هذه من ملف HTML الخاص بك ، داخل ملف قسم:

<وصلةrel="ورقة الأنماط"href="style.css">

داخل الخاص بك style.css ملف ، أول شيء عليك القيام به هو إعادة تعيين الهامش على الجسم إلى الصفر وتعيين بعض الهامش السفلي:

جسم {
هامِش: 0;
الهامش السفلي: 20rem;
}

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

.شبكة {
عرض: شبكة;
شبكة-قالب-أعمدة: يكرر(احتواء تلقائي, الحد الأدنى - الحد الأقصى(300مقصف, 1الاب));
}

نظرًا لأنك تريد وضع النص بالنسبة إلى الحاوية الخاصة به ، فأنت بحاجة إلى تعيين الموضع بالنسبة إلى غلاف الصورة:

.image-wrapper {
موضع: نسبي;
تجاوز: مختفي;
}

الخطوة التالية هي تصميم الصورة. اعرض الصورة كعنصر كتلة ، واجعلها تمتد بعرض الحاوية بأكملها ، وضعها في وسط الحاوية الخاصة بها:

.image-wrapper > IMG {
عرض: حاجز;
عرض: 100%;
ابعاد متزنة: 1 / 1;
الكائن المناسب: غطاء;
موضع الكائن: مركز;
}

بالنسبة للنص ، ضعه في المنتصف وأعطِ لون خلفية رمادي فاتح شفاف:

.image-wrapper > .محتوى {
موضع: مطلق;
أقحم: 0;
حجم الخط: 2rem;
حشوة: 1rem;
خلفية: rgba(255, 255, 255, .4);
عرض: ثني;
محاذاة العناصر: مركز;
تبرير المحتوى: مركز;
}

احفظ ملف CSS وافتحه index.html في متصفحك. يجب أن تجد صفحة مشابهة لتلك الموجودة في الصورة أدناه.

ضبط الانتقال على الصور والنصوص

الآن بعد أن طبقت الأنماط الأساسية على الصور ، فإن الخطوة التالية هي إضافة بعض الرسوم المتحركة إليها. ابدأ بإضافة انتقال إلى كل من الصور والنص المقابل لها:

.image-wrapper > IMG,
.image-wrapper > .محتوى {
انتقال: 200آنسةسهولة في الخروج;
}

هذا يعني أن جميع تأثيرات الانتقال (مثل التلاشي والتكبير والتمويه) ستستمر 200 مللي ثانية ولها نفس منحنى التوقيت.

التلاشي والتشويش للرسوم المتحركة

نمط الرسوم المتحركة الأول يتلاشى في النص. عندما تقوم بالتمرير فوق غلاف صورة معين ، فإن المحتوى الذي يحتوي على الامتداد يختفي سيكون للفئة هذا التأثير (الرسوم المتحركة المتلاشية والتلاشية) المطبقة عليها. يمكنك تحقيق ذلك عن طريق تعيين العتامة على صفر وتغييرها إلى واحدة عند تحريك الماوس فوق غلاف صورة معين:

.image-wrapper > .محتوى.يختفي {
العتامة: 0;
}
.image-wrapper:يحوم > .محتوى.يختفي {
العتامة: 1;
}

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

غلاف الصورة:يحوم > IMG.blur {
منقي: طمس(5مقصف)
}

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

إضافة تأثيرات أخرى

التأثيرات الأخرى هي تحريك النص من اليسار ، تكبير الصورة ، وإضافة تدرج الرمادي إلى الصورة. إليك الكود لتحقيق التأثيرات الثلاثة:

.image-wrapper > .محتوى.slide-left {
تحول: ترجمة س(100%)
}
.image-wrapper:يحوم > .محتوى.slide-left {
تحول: ترجمة س(0%)
}
.image-wrapper:يحوم > IMG.رمادي {
منقي: تدرج الرمادي(1)
}
.image-wrapper:يحوم > IMG.blur {
منقي: طمس(5مقصف)
}
.image-wrapper:يحوم > IMG.تكبير {
تحول: حجم(1.1)
}

احفظ الملف ، ثم انتقل إلى المتصفح الخاص بك وقم بالمرور فوق كل صورة. يجب أن ترى التأثيرات المختلفة في العمل.

لإكمال تأثيرات الانزلاق ، يمكنك إنشاء ثلاثة أغلفة أخرى للصور ، كل منها يحتوي على صورة ونص. كل جزء من النص سيكون له اسم الفصل ينزلق للأعلى, تنزلق، أو طفيف الحق. ثم تقوم بتمرير القيمة الصحيحة في بكسل أو م أو ريم، داخل تحول() وظيفة لإنشاء جميع التأثيرات الثلاثة.

شبكة CSS و Flexbox

CSS Grid و Flexbox هما ميزتان تسمحان لك بإنشاء تخطيطات رائعة لموقع الويب الخاص بك. يمكنك إنشاء أي تخطيط تريده بسهولة وتخصيص الصفوف والأعمدة حسب ذوقك. ستكون الأعمدة أيضًا سريعة الاستجابة بشكل افتراضي. سيساعدك تعلم متى تستخدم أحدهما على الآخر في أن تصبح مطور CSS أعلى بنسبة واحد بالمائة.