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

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

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

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

---

---

اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى

إنشاء HTML لـ

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

 <div class="grid"> 
  <div class="image-wrapper"> 
    <img class="blur" src="https://picsum.photos/500?random=1" alt=""> 
 
    <div class="content fade"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="zoom blur" src="https://picsum.photos/500?random=2" alt=""> 
 
    <div class="content fade"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="blur" src="https://picsum.photos/500?random=3" alt=""> 
 
    <div class="content slide-left"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="grey" src="https://picsum.photos/500?random=3" alt=""> 
 
    <div class="content slide-left"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
</div> 

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

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

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

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

 <link rel="stylesheet" href="style.css">

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

---

---

 body { 
  margin: 0; 
  margin-bottom: 20rem; 
}

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

 .grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}

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

---

---

 .image-wrapper { 
  position: relative; 
  overflow: hidden; 
} 

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

 .image-wrapper > img { 
  display: block; 
  width: 100%; 
  aspect-ratio: 1 / 1; 
  object-fit: cover; 
  object-position: center; 
} 

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

 .image-wrapper > .content { 
  position: absolute; 
  inset: 0; 
  font-size: 2rem; 
  padding: 1rem; 
  background: rgba(255, 255, 255, .4); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

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

ضبط الانتقال والنصوص

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

كيفية تنظيف الذاكرة على جهاز الكمبيوتر

 .image-wrapper > img, 
.image-wrapper > .content { 
  transition: 200ms ease-in-out; 
} 

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

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

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

 .image-wrapper > .content.fade { 
  opacity: 0; 
} 
 
.image-wrapper:hover > .content.fade { 
  opacity: 1; 
} 

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

 image-wrapper:hover > img.blur { 
  filter: blur(5px) 
} 

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

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

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

 .image-wrapper > .content.slide-left { 
    transform: translateX(100%) 
} 
 
.image-wrapper:hover > .content.slide-left { 
    transform: translateX(0%) 
} 
 
.image-wrapper:hover > img.grey { 
    filter: greyscale(1) 
} 
 
.image-wrapper:hover > img.blur { 
    filter: blur(5px) 
} 
 
.image-wrapper:hover > img.zoom { 
    transform: scale(1.1) 
} 

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

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

شبكة CSS و Flexbox

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