सीएसएस स्लाइडर

CSS3 के विकास के साथ, लेआउट विकल्प तेजी से बढ़ रहे हैं। शुद्ध सीएसएस में अधिक से अधिक कार्यक्षमता को लागू किया जा सकता है। यह पोस्ट जावास्क्रिप्ट की एक पंक्ति के बिना एक इंटरैक्टिव लूपिंग स्लाइडर विकसित करने की प्रक्रिया को दर्शाता है । स्वचालित घुमाव, एक चिकनी संक्रमण के साथ किसी भी स्लाइड का विकल्प - "शुद्ध" सीएसएस पर । कार्रवाई में उदाहरण

सामान्य जानकारी।

मानक और उपसर्ग

गुण संक्रमण, एनीमेशन और परिवर्तन लंबे समय से एक रूप में या किसी अन्य, सभी लोकप्रिय ब्राउज़रों में लागू किए गए हैं। 6 जून 2012 को, डब्ल्यू 3 सी ने घोषणा की कि विकास के तहत सीएसएस 3.0 मानक का यह हिस्सा नाटकीय रूप से नहीं बदलेगा, और सिफारिश की कि सभी ब्राउज़र आज इसे लागू करते हैं।

फ्रंट-एंड डेवलपर्स के लिए, इसका मतलब है कि एक मानक का उदय जिस पर आप भरोसा कर सकते हैं। अब आपको यह डरने की जरूरत नहीं है कि भविष्य में कोई भी ब्राउज़र अपनी उपसर्ग रहित गैर-मानक संपत्ति को छोड़ देगा - आखिरकार, इसे मानक संपत्ति द्वारा डुप्लिकेट किया जाएगा और यदि आवश्यक हो तो इसे बदल दिया जाएगा।

इंटरनेट एक्सप्लोरर के आउटडेटेड संस्करण, जिसमें जल्द ही संस्करण 9 भी शामिल होगा, किसी भी तरह से ट्रांस्फ़ॉर्मेशन, एनीमेशन और ट्रांसफ़ॉर्म का समर्थन नहीं करते हैं। लेकिन उनका हिस्सा अभी भी 10% से अधिक है। IE7-9 के लिए, js एक "स्टब" है, और स्लाइड के बीच चिकनी स्विचिंग का प्रभाव कुछ भी नहीं है।

CSS और JS क्यों नहीं?

कई कार्य हैं जिन्हें CSS का उपयोग करके हल किया जा सकता है: इंटरैक्टिव गैलरी, बहु-स्तरीय ड्रॉप-डाउन मेनू, भवन और तीन-आयामी चित्र को एनिमेट करना ... जब आप JS पर सब कुछ कर सकते हैं तो CSS का उपयोग क्यों करें, विशेष रूप से तैयार किए गए विकास के द्रव्यमान को देखते हुए? मुख्य तर्क निम्नानुसार हो सकते हैं:

• ज्यादातर मामलों में, सीएसएस प्रभाव तेजी से होते हैं क्योंकि वे विशेष रूप से ब्राउज़र इंजन द्वारा मॉनिटर किए जाते हैं। यह विशेष रूप से मोबाइल उपकरणों पर ध्यान देने योग्य है।
• कार्य को पूरा करने के लिए, जेएस और आम तौर पर किसी भी प्रोग्रामिंग भाषाओं का ज्ञान आवश्यक नहीं है। एक नियम के रूप में, संपादन सीएसएस औसत उपयोगकर्ता के लिए भी उपलब्ध है। इसके अलावा, सीएसएस में "ब्रेकिंग फायरवुड" जेएस की तुलना में बहुत अधिक कठिन है।

कार्यान्वयन

कार्यलय

इसलिए, हमने CSS कक्षाओं के नामकरण के लिए ब्लॉक एलीमेंट मॉडिफायर ( BEM ) पद्धति का उपयोग किया। लब्बोलुआब यह है कि लेआउट स्वतंत्र ब्लॉक के पेज लेआउट पर आधारित है। बीईएम के अनुसार, एक ब्लॉक में तत्व हो सकते हैं, लेकिन केवल ब्लॉक के अंदर।

स्लाइडर वर्ग:

.slider /* ,    */ .slider__radio /*  */ .slider__item /*  */ .slider__img /*    */ .slider__number-list /*     */ .slider__number /*       */ .slider__number-after /*    IE7  IE8,     :after  ::after  */ .slider_count_X /* ,    X */ 

एनीमेशन

तीन स्लाइडों के लिए कीफ़्रेम एनीमेशन अनुक्रम निम्नानुसार है:

 @keyframes slider__item-autoplay_count_3 { 0%{opacity:0;} 10%{opacity:1;} 33% {opacity:1;} 43% {opacity:0;} 100%{opacity:0;} } 

स्लाइडर कार्यान्वयन की ख़ासियत यह है कि सभी स्लाइड और सभी बटन एक ही एनीमेशन असाइन किए गए हैं:

 slider_count_3 .slider__item, slider_count_3 .slider__number-after { -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-autoplay_count_3 15s infinite; animation: slider__item-autoplay_count_3 15s infinite; } 

यह दृष्टिकोण आपको कोड की मात्रा को गंभीरता से कम करने की अनुमति देता है, क्योंकि सभी एनिमेशन को अभी भी उनके उपसर्ग संस्करणों (@ -webkit-keyframes, @ -moz-keyframes और @ -o-keyframes) द्वारा डुप्लिकेट किया जाना है, और नियमों के प्रत्येक "स्टैक" को प्रत्येक के लिए अलग से वर्णित किया जाना चाहिए। आवश्यक (ग्राहक द्वारा) स्लाइड की संख्या। यदि हम प्रत्येक स्लाइड के लिए एनीमेशन का अलग से वर्णन करते हैं, तो कोड की मात्रा दसियों किलोबाइट हो सकती है।

इससे बचने के लिए, लेकिन एक एनीमेशन का उपयोग करके सभी स्लाइड और बटन को क्रमिक रूप से चेतन करें, यह स्लाइड के प्रत्येक जोड़ी के लिए समय में एनीमेशन की शुरुआत के ऑफसेट को सेट करने के लिए पर्याप्त है: बटन

 .slider__item:nth-of-type(2), .slider__number:nth-of-type(2) > .slider__number-after { -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; } .slider__item:nth-of-type(3), .slider__number:nth-of-type(3) > .slider__number-after { -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; } ... 

पहली जोड़ी के लिए, डिफ़ॉल्ट मान रहता है - शून्य ऑफसेट।

यह भी महत्वपूर्ण है कि ऑफसेट स्लाइड की संख्या पर निर्भर नहीं करता है, और उनकी अधिकतम संख्या के लिए एक बार वर्णित किया जा सकता है।

नतीजतन, स्लाइड के बीच चिकनी एनिमेटेड संक्रमण इस तरह दिखता है:

होवर ने विराम दिया

मामले के लिए जब उपयोगकर्ता स्क्रीन पर स्लाइड में देरी करना चाहता है, लेकिन रोटेशन को बंद नहीं करना चाहता है, तो आप स्लाइड पर होवर करने के लिए पॉज़ मोड का उपयोग कर सकते हैं:

 .slider:hover .slider__item, .slider:hover .slider__number-after { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } 

क्लिक पर स्विचिंग

सीएसएस "घटनाओं" की एक संख्या है जो एक html तत्व की स्थिति को स्विच करती है। यदि हम माउस क्लिक के बारे में बात करते हैं, तो यह छद्म वर्गों की उपस्थिति है: पृष्ठ तत्वों में से एक में फ़ोकस ,: लक्ष्य, या: चेक किया गया। फोकस: छद्म वर्ग एक समय में प्रति पृष्ठ अधिकतम एक तत्व हो सकता है; : लक्ष्य छद्म वर्ग ब्राउज़र इतिहास को रोक देता है और "ए" टैग की उपस्थिति की आवश्यकता होती है; : चेक किया हुआ छद्म वर्ग पृष्ठ छोड़ने से पहले राज्य को याद करता है, प्लस, रेडियो बटन के मामले में, यह एक असतत स्विच है जब किसी विशिष्ट समूह के केवल एक तत्व को चुना जा सकता है - आपको क्या चाहिए।

 .slider__radio {   } .slider__radio:checked {  } 

स्तर 4 से नीचे के चयनकर्ताओं में, आप + और ~ पड़ोसी चयनकर्ताओं का उपयोग करके केवल एक रेडियो बटन के साथ संयोजन में एक मनमाना तत्व (उदाहरण के लिए, एक स्लाइड की अस्पष्टता) की स्थिति को स्विच कर सकते हैं। आप पड़ोसी की शैली और पड़ोसी की शैली दोनों को बदल सकते हैं, लेकिन किसी भी स्थिति में, पड़ोसी को रेडियो बटन के बाद होना चाहिए।

 /*      « » */ .slider__radio:nth-of-type(1) ~ .slider__item:nth-of-type(1) { opacity: 0.0; } /*      «» */ .slider__radio:nth-of-type(1):checked ~ .slider__item:nth-of-type(1) { opacity: 1.0; } 

स्लाइड की अपारदर्शिता स्विच का उपयोग किया गया था - एक कंटेनर जिसमें एक तस्वीर होती है। यह तस्वीर के गुणों को बदलने की तुलना में अधिक सार्वभौमिक तरीका है, क्योंकि डिव कंटेनर में, खाली img तत्व के विपरीत, आप कोई भी अतिरिक्त जानकारी डाल सकते हैं (उदाहरण के लिए, स्लाइड का नाम, या संबंधित विवरण, लिंक सहित)।
स्लाइड्स के लिए, संक्रमण गुण इंगित किए जाते हैं जो उनके बीच स्विचिंग को सुचारू बनाते हैं।

 .slider__item { -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } 

स्लाइड का चयन करते समय रोटेशन बंद करें

जब उपयोगकर्ता किसी भी स्लाइड का चयन करता है, तो सभी स्लाइड और बटन के एनीमेशन को रोकना आवश्यक है। यह इस तथ्य के कारण है कि एक चल रहे एनीमेशन के संपत्ति मूल्यों की प्राथमिकता हमेशा समान गुणों के अन्य सभी मूल्यों से अधिक होती है (आप इनलाइन गुणों के साथ भी अंतर कर सकते हैं!

चूंकि प्रत्येक स्लाइड में एक एनीमेशन होता है, इसलिए संरचना में समान है, और आपको सभी स्लाइड्स के एनीमेशन को बंद करने की आवश्यकता है (अन्यथा तीन स्लाइड एक चिकनी संक्रमण में भाग लेंगे), सभी रेडियो बटन को पहली स्लाइड से पहले रखा जाना चाहिए।

 <input class="slider__radio" id="1" type="radio"> <input class="slider__radio" id="2" type="radio"> <input class="slider__radio" id="3" type="radio"> ... <div class="slider__item">...</div> 

इसके अलावा, सभी बटन (रेडियो बटन लेबल) को एक अलग ब्लॉक में रखा जाना चाहिए और रेडियो बटन के बाद रखा जाना चाहिए, अन्यथा स्लाइड की एक मनमानी संख्या के लिए सार्वभौमिक लेबल स्थिति के साथ समस्याएं पैदा हो सकती हैं।

किसी भी स्लाइड का चयन करते समय सभी स्लाइड और बटन के एनीमेशन को रोकने के लिए, निम्नानुसार सेट करें:

 .slider__radio:checked ~ .slider__item, .slider__radio:checked ~ .slider__number-list > .slider__number-after { opacity: 0.0; -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none; } 

स्लाइड्स की संख्या के विपरीत

किसी भी संख्या में स्लाइड के लिए एक सार्वभौमिक स्लाइडर बनाना असंभव है, क्योंकि प्रत्येक नंबर के लिए सीएसएस एनीमेशन नियमों के अपने "स्टैक" की आवश्यकता होती है। प्रत्येक ऐसे "स्टैक" (यदि वर्णित हो) को स्लाइडर ब्लॉक संशोधक के माध्यम से जोड़ा जा सकता है:

 .slider_count_X 

जहां X स्लाइड की संख्या है।

कुछ पुराने ब्राउज़रों का समर्थन करने के लिए, पहली स्लाइड एनिमेटेड नहीं है। इस कारण से, पहली छवि के कंटेनर में हमेशा 1.0 की अपारदर्शिता होती है। एक समस्या है: जब आप सुचारू रूप से अन्य दो स्लाइडों को एक साथ स्विच करते हैं, तो पहले एक के माध्यम से चमकता है (यह स्लाइडर ब्लॉक के माता-पिता की पृष्ठभूमि हो सकती है)। पारभासी प्रभाव को हटाने के लिए, चयनित एक को छोड़कर सभी स्लाइड के लिए एक संक्रमण-विलंब निर्धारित किया जाता है; चयनित एक के लिए, z-index अन्य सभी से अधिक निर्धारित है:

 .slider__item { opacity: 1.0; position: relative; -moz-transition: opacity 0.0s linear 0.2s; -webkit-transition: opacity 0.0s linear 0.2s; -o-transition: opacity 0.0s linear 0.2s; transition: opacity 0.0s linear 0.2s; } .slider__radio:nth-of-type(1):checked ~ .slider__item:nth-of-type(1), .slider__radio:nth-of-type(2):checked ~ .slider__item:nth-of-type(2), .slider__radio:nth-of-type(3):checked ~ .slider__item:nth-of-type(3), .slider__radio:nth-of-type(4):checked ~ .slider__item:nth-of-type(4), .slider__radio:nth-of-type(5):checked ~ .slider__item:nth-of-type(5){ -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; z-index: 6; } 

ताकि स्लाइड साइट के अन्य तत्वों के साथ संघर्ष न करें (उदाहरण के लिए, ड्रॉप-डाउन मेनू को 6-से कम या इसके बराबर के जेड-इंडेक्स के साथ ओवरलैप न करें), हम दृश्यता जेड-इंडेक्स के लिए आवश्यक न्यूनतम सेट करके ब्लॉक के लिए अपना स्वयं का स्टैकिंग संदर्भ बनाते हैं:

 .slider { z-index: 0; } 

इतना

पहले से ही आज, प्रोग्रामिंग कौशल और विशेष पुस्तकालयों के बिना, इसके अंतिम मानकीकरण तक, सीएसएस 3.0 आपको जटिल और दिलचस्प कार्यों को लागू करने की अनुमति देता है। इस समय वर्णित इंटरेक्टिव स्लाइडर, 80% रनट उपयोगकर्ताओं के लिए पूरी तरह कार्यात्मक है। अधिकांश शेष उपयोगकर्ताओं के लिए, अर्थात् IE7-9 ब्राउज़र के उपयोगकर्ताओं के लिए, आप js "स्टब" का उपयोग कर सकते हैं, जो स्लाइडर की मुख्य कार्यक्षमता को लागू करता है।

एक काम करने वाला उदाहरण यहाँ देखा जा सकता है ।