शुद्ध CSS में एक एनिमेटेड स्लाइड शो बनाएँ।

शुभ दिन, दोस्तों!

जेएस से थक गए, सीएसएस पर स्विच करें!

कार्य

CSS का उपयोग करके एक एनिमेटेड स्लाइड शो बनाएं। स्लाइडशो का उपयोग किया जा सकता है, उदाहरण के लिए, प्रोजेक्टर के माध्यम से स्क्रीन पर फ़ोटो प्रदर्शित करने के लिए विशेष अवसरों में। लूपिंग के माध्यम से, प्रदर्शित तस्वीरें एक गंभीर भाषण के लिए पृष्ठभूमि के रूप में काम कर सकती हैं।

संभव समाधान

स्लाइड शो के लिए हम अजीब "मैक्रो फोटो" Pawell 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% चौथा हिस्सा है, इसलिए तस्वीरें थोड़ी ओवरलैप हो जाएंगी। चूंकि हम "फीका इन-फेड आउट" प्रभाव लागू कर रहे हैं, अर्थात्। हम पारदर्शिता के साथ काम करते हैं, यह वही है जो हमें चाहिए।

"फ़िल्टर: ग्रेस्केल" का उपयोग करते हुए, हम प्रदर्शित (प्रक्षालित) फोटो के रंग को संतृप्त करते हैं, "ट्रांसफ़ॉर्म: स्केल" का उपयोग करते हुए, हम आउटपुट को थोड़ा आगे बढ़ाते हैं और जब रिप्लेसमेंट करते हैं, तो "फ़िल्टर: ब्लर" की जगह फोटो को धुंधला कर देते हैं।

अगला, हम व्यक्तिगत फ़ोटो के साथ काम करते हैं:

 .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 सेकंड)। एक परिवर्तन के लिए, हम "ट्रांसफॉर्म: ट्रांसलेट रोट" का उपयोग करके प्रत्येक तस्वीर को बदलते और घुमाते हैं (मानों को अनुभवपूर्वक चुना गया था)।

हमने फोटो खत्म की। अब हस्ताक्षर करने के लिए नीचे आते हैं।

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; } 

कृपया ध्यान दें कि कैप्शन की एनीमेशन देरी संबंधित फोटो वैल्यू से 1 सेकंड अधिक है। यह किसी विशेष फोटो की उपस्थिति और परिवर्तन के बाद कैप्शन प्रदर्शित करने के लिए किया जाता है।

वह सब है। मेरी राय में, यह सरल, लेकिन दिलचस्प निकला।

इसका परिणाम यहां देखा जा सकता है ।

आपका ध्यान के लिए धन्यवाद। ऑल द बेस्ट।