यहाँ विचार हिंडोला के बिना एक स्लाइड शो की उपस्थिति बनाने के लिए है। दूसरे शब्दों में, हम छवियों की एक श्रृंखला बना रहे हैं जो बाएँ से दाएँ जाती है और छवियों के अंत तक पहुँच जाने के बाद फिर से दोहराती हैं। चाल यह है कि हम सीएसएस एनिमेशन के साथ एकल पृष्ठभूमि छवि का उपयोग कर रहे हैं (…)
यहाँ विचार हिंडोला के बिना एक स्लाइड शो की उपस्थिति बनाने के लिए है। दूसरे शब्दों में, हम छवियों की एक श्रृंखला बना रहे हैं जो बाएँ से दाएँ जाती है और छवियों के अंत तक पहुँच जाने के बाद फिर से दोहराती हैं।
चाल यह है कि हम सीएसएस एनिमेशन के साथ एकल पृष्ठभूमि छवि का उपयोग कर रहे हैं इसे स्क्रीन पर स्थानांतरित करने और जब यह किया जाता है तब इसे दोहराएं। यह एक छवि गैलरी का भ्रम पैदा करता है जब हम वास्तव में एक छवि का उपयोग कर रहे हैं।
HTML सेट करना
हमारे HTML को किस प्रकार संरचित करने की आवश्यकता है, इसका एक खाका यहां दिया गया है:
दो तत्व हैं जिनके साथ हम काम कर रहे हैं: एक जिसे हम कॉल कर रहे हैं .containerवह व्यूपोर्ट की सटीक चौड़ाई पर फिट बैठता है और दूसरा जिसे हम कॉल कर रहे हैं, .sliding-backgroundउसके पीछे बैठता है .containerऔर इसे ओवरफ्लो करता है। संक्षेप में, हम स्क्रीन पर स्क्रॉल .containerकरते समय इसकी पूरी चौड़ाई को छिपाने के लिए मास्क के रूप में उपयोग कर रहे .sliding-backgroundहैं।
इसका मतलब है कि हमें केवल HTML मार्कअप में दो तत्व बनाने की आवश्यकता है:
तत्वों की स्थिति
चलो आगे बढ़ते हैं और कुछ सीएसएस जोड़ते हैं जो हमारे दो तत्वों को सही ढंग से स्थिति देगा।
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )हमारी संपत्ति .containerका उपयोग करता है जो overflowकुछ भी छिपाएगा जो नेत्रहीन इसके बाहर निहित है। एक तस्वीर पर एक फसल की तरह सोचें। कंटेनर के बाहर अतिरिक्त सामान हो सकता है, लेकिन कंटेनर हमें इसे देखने से रोक रहा है।
यहीं से हमारा .sliding-backgroundखेल चल निकला। यह कुछ हास्यास्पद चौड़ाई पर सेट है जो अधिकांश व्यूपोर्ट को ओवरफ्लो करेगा। और यह चाल है: यह कुछ ऐसा होना चाहिए जो कंटेनर को ओवरफ्लो करेगा। इस मामले में, हम कुछ हद तक मनमाने ढंग से चुनी गई 5076pxचौड़ाई का उपयोग कर रहे हैं जो कि अधिकांश ब्राउज़र व्यूपोर्ट को ओवरफ्लो करना चाहिए।
बैकग्राउंड इमेज बनाना
हमें एक छवि की आवश्यकता है यदि हम स्लाइड शो गैलरी का भ्रम बना रहे हैं, है ना? यह हमारे व्यापार का अगला क्रम है।
याद रखें कि कैसे हमने उल्लेख किया है कि 5076pxस्लाइडिंग पृष्ठभूमि के लिए कुछ मनमाने ढंग से चुनी गई चौड़ाई? खैर, यह मनमाना है, लेकिन इस अर्थ में जानबूझकर कि यह 3 से विभाज्य है, जो एक मिनट के लूप के लिए समय में फिट बैठता है, जो थोड़ी देर बाद आएगा। इसका मतलब है कि हमारी पृष्ठभूमि छवि के लिए कैनवास है 5076 / 3या 1692px। अंत में, हमारी पृष्ठभूमि अनंत लूप में एक मिनट में कुल तीन बार दोहराएगी। जीत के लिए गणित!
500pxऊंचाई सही मायने में मनमाने ढंग से है। जो आप चाहते हैं और जब तक यह पृष्ठभूमि छवि फ़ाइल का वास्तविक आकार भी हो सकता है।
इस अध्याय के प्रारंभ में डेमो के लिए पृष्ठभूमि छवि बनाने के लिए उपयोग की जाने वाली फ़ोटोशॉप फ़ाइल डाउनलोड करने के लिए उपलब्ध है यदि आप एक प्रारंभिक बिंदु की तलाश में हैं।
एक बार छवि सहेज ली गई है (और अनुकूलित!), यह वह है जिसका उपयोग हम CSS में पृष्ठभूमि छवि के रूप में करेंगे:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )वाह् भई वाह! इससे हमें गिन्नॉर्मस इमेज मिलती है जो कंटेनर को ओवरफ्लो करती है और अब इसका उपयोग स्क्रीन ऐड इनफिनिटम पर स्क्रॉल करने के लिए किया जा सकता है।
पृष्ठभूमि एनिमेटेड
ठीक है, चलिए इस बात को आगे बढ़ाते हैं। हम चाहते हैं कि यह एक पाश में बाएं से दाएं तक जाए जो एक सहज प्रभाव बनाने के लिए बार-बार दोहराता है जिससे छवि हमेशा के लिए चली जाती है।
सबसे पहले, आइए CSS एनीमेशन को परिभाषित करते हैं:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )जब हम transformएनीमेशन शुरू करते हैं, तो हम कंटेनर के बाएँ किनारे पर बाईं छवि को रखने के लिए संपत्ति का उपयोग कर रहे हैं :
जब तक एनीमेशन पूरा नहीं हो जाता, तब तक यह हमारी छवि की सही चौड़ाई से मेल खाती राशि द्वारा स्थिति को नकारात्मक (बाएं से दाएं) में बदल देगा। और, चूंकि .sliding-backgroundवास्तविक छवि की चौड़ाई का तीन गुना है, फिर से लूप करने से पहले छवि 0% और 100% के बीच तीन बार दोहराती है।
नोट: कारण हम एक अतिरिक्त का उपयोग कर रहे हैं
background-positionमुख्य रूप से एनिमेशन करने के बजाय सभी पर transformआंदोलन करने के लिए एक एनिमेटेड का उपयोग कर सकते हैं , जो बहुत अधिक प्रदर्शन करने वाला है।
ठीक है, चलो कक्षा slideपर हमारे एनीमेशन को कॉल करके चीजों को गोल करें .sliding-background:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationसंपत्ति का निर्देश .sliding-backgroundउपयोग करने के लिए slideएनीमेशन और एक रेखीय में एक समय में एक मिनट, अनंत लूप के लिए इसे चलाने के लिए।
यह सब एक साथ डालें
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )