إنشاء عرض شرائح متحرك في CSS خالص.

يوم جيد يا اصدقاء!

تعبت من JS ، قم بالتبديل إلى CSS!

مهمة

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

حل ممكن

بالنسبة لعرض الشرائح ، سوف نلتقط "صورة الماكرو" الغريبة Paweł Czerwiński (إنها رائعة).

لذلك دعونا نذهب.

سوف تبدو علاماتنا على النحو التالي:

<div class="slideshow"> <img src="https://thebestcode.ru/media/animatedSlideshow/1.jpg" alt="#" class="i_1"> <p class="p_1">a-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/2.jpg" alt="#" class="i_2"> <p class="p_2">b-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/3.jpg" alt="#" class="i_3"> <p class="p_3">c-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/4.jpg" alt="#" class="i_4"> <p class="p_4">d-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/5.jpg" alt="#" class="i_5"> <p class="p_5">e-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/6.jpg" alt="#" class="i_6"> <p class="p_6">f-slide</p> </div> 

ما الذي نلاحظه هنا؟

يتم لف الصور في فئة عرض الشرائح ، والتي تستخدم لمحاذاة العناصر أفقياً وعمودياً.

يحتوي .slideshow على الأنماط التالية:

 .slideshow { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } 

لدينا 6 صور يتم تعيين كل صورة للفئة "i_number من الصور". تحت كل صورة هناك توقيع مع فئة "p_number من الصورة".

يحتوي Img على الأنماط التالية:

 img { position: absolute; max-width: 90vw; max-height: 80vh; opacity: 0; animation: slideshow 36s ease-in-out infinite; } 

يعتمد وقت الرسوم المتحركة على عدد الصور ووقت عرض كل صورة. في هذه الحالة: 6 صور لمدة 6 ثوان لكل منهما.

دعنا ننتقل إلى الرسوم المتحركة:

 @keyframes slideshow { from { opacity: 0; filter: grayscale(100%); } 5% { opacity: 1; filter: grayscale(50%); } 10% { opacity: 1; filter: grayscale(0); transform: scale(1.1); } 15% { opacity: 1; filter: blur(0); } 20% { opacity: 0; filter: blur(2px); transform: scale(0.9); } 25% { opacity: 0; } } 

نحن نستخدم فقط 25 ٪ من الرسوم المتحركة ، ولكن في ست خطوات. 25 ٪ هو الجزء الرابع ، وبالتالي فإن الصور سوف تتداخل قليلا. نظرًا لأننا ننفذ تأثير "fade in-fade out" ، أي نحن نعمل بشفافية ، وهذا هو بالضبط ما نحتاجه.

باستخدام "filter: grayscale" ، نقوم بتشبع لون الصورة المعروضة (المبيضة) ، وباستخدام "convert: scale" ، نقوم بقياس الصورة للأمام قليلاً عند الإخراج والعودة قليلاً عند الاستبدال ، باستخدام "filter: blur" ، نقوم بتمويه الصورة التي تم استبدالها.

بعد ذلك ، نعمل مع الصور الفردية:

 .slideshow .i_1 { animation-delay: 6s; transform: translateX(-100px) rotate(-3deg); } .slideshow .i_2 { animation-delay: 12s; transform: translateX(100px) rotate(3deg); } .slideshow .i_3 { animation-delay: 18s; transform: translateY(-100px) rotate(3deg); } .slideshow .i_4 { animation-delay: 24s; transform: translateY(100px) rotate(-3deg); } .slideshow .i_5 { animation-delay: 30s; transform: rotate(-6deg); } .slideshow .i_6 { animation-delay: 36s; transform: rotate(6deg); } 

قمنا بتعيين تأخير الرسوم المتحركة لكل صورة (6 ثوانٍ من أول و 6 ثوانٍ من كل صورة لاحقة). لإجراء تغيير ، نقوم بتغيير كل صورة وتدويرها باستخدام "convert: translate rotate" (تم تحديد القيم بشكل تجريبي).

انتهينا من الصورة. الآن دعونا ننكب على التواقيع.

P لديه الأنماط التالية:

 p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #e4e4e4; text-shadow: 0 0 1px #000; text-transform: uppercase; font-size: 2.8em; opacity: 0; animation: title 36s linear infinite; } 

يتوافق وقت الرسوم المتحركة للتسميات التوضيحية مع وقت الرسوم المتحركة للصور.

تبدو الرسوم المتحركة للتوقيع أسهل كثيرًا:

 @keyframes title { from { opacity: 0; } 5% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } } 

نعرض أيضًا توقيع منفصل باستخدام تأخير الرسوم المتحركة:

 .slideshow .p_1 { animation-delay: 7s; } .slideshow .p_2 { animation-delay: 13s; } .slideshow .p_3 { animation-delay: 19s; } .slideshow .p_4 { animation-delay: 25s; } .slideshow .p_5 { animation-delay: 31s; } .slideshow .p_6 { animation-delay: 37s; } 

يرجى ملاحظة أن تأخير الرسوم المتحركة للتعليقات التوضيحية هو ثانية واحدة أكثر من قيم الصورة المقابلة. يتم ذلك لعرض التسميات التوضيحية بعد ظهور صورة معينة وتحويلها.

هذا كل شيء. في رأيي ، اتضح أنه بسيط ولكنه مثير للاهتمام.

يمكن رؤية النتيجة هنا .

شكرا لاهتمامكم كل التوفيق.