कई पृष्ठभूमि छवियों का उपयोग कर पांच शांत होवर प्रभाव

आज हम कई पृष्ठभूमि का उपयोग करने के सभी लाभों को देखते हैं। आइए मूल बातें जानें और सीएसएस के साथ संपत्तियों को मँडरा और transition करते समय शांत प्रभाव पैदा करें।

नीचे पांच अलग-अलग उदाहरण दिए गए हैं जिनका उपयोग करके आप अपने खुद के अद्भुत प्रभाव बना सकते हैं।

क्या होना चाहिए

आइए देखें कि आखिर में क्या होना चाहिए। एक सीएसएस पर विशुद्ध रूप से आप इन प्रभावों को कैसे लागू कर सकते हैं, इसके बारे में सोचें।

प्रदर्शन

एकाधिक पृष्ठभूमि (मल्टीफ़ॉन)

कुछ समय पहले तक, मैंने पृष्ठभूमि के रूप में कई छवियों का उपयोग नहीं किया था। मुझे पता था कि ऐसा अवसर मौजूद था, लेकिन उसे एक दिलचस्प आवेदन नहीं मिला। लंबन विकल्प निश्चित रूप से दिलचस्प है, लेकिन हर कोई पहले से ही थका हुआ है।

नतीजतन, मैंने एक वस्तु पर मँडरा करते समय एक बहु-फोन की अवधारणा का उपयोग करने का निर्णय लिया। यह एक तरह का एनीमेशन निकला। यह एक बहुत ही सरल चाल है, लेकिन मैंने इसे पहले कहीं नहीं देखा, इसलिए मैंने आपको यह दिखाने का फैसला किया कि इसका उपयोग कैसे किया जाए।

वास्तव में, आप एक लाख अलग-अलग उदाहरणों के साथ आ सकते हैं, लेकिन हम प्रभाव के सार को समझने के लिए केवल पांच पर विचार करेंगे।

संकल्पना

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

मल्टी-फोन का उपयोग करते समय, कई एनीमेशन विकल्प दिखाई देते हैं। बहुत प्रयास के बिना, आप पहली नज़र में, केवल CSS transition संपत्ति का उपयोग करके एक जटिल एनीमेशन बना सकते हैं, जो ब्राउज़र वर्तमान में animate संपत्ति की तुलना में बेहतर समर्थन करते हैं।

मान लीजिए कि हम शुरुआती दरवाजों का एक एनीमेशन बनाना चाहते हैं। ऐसा करने के लिए, बस अलग-अलग दिशाओं में दो पृष्ठभूमि छवियों की भरपाई करें:



अब हमें आगे के काम का अंदाजा है। तो चलिए मज़ेदार हिस्से पर चलते हैं - चलिए प्रभाव बनाना शुरू करते हैं।

क्षैतिज रूप से खुलने वाले दरवाजों का एनीमेशन

आइए पिछले आंकड़े में वर्णित प्रभाव बनाने की कोशिश करें। आरंभ करने के लिए, हमें दो पृष्ठभूमि छवियों की आवश्यकता है।

चूँकि हम केवल विचार को ही मानते हैं, इसलिए कोई फर्क नहीं पड़ता कि हम किन छवियों का उपयोग करते हैं। मैंने एक मुफ्त फ़ॉन्ट से एक लकड़ी की बनावट और एक कार आइकन लिया।

मूल मार्कअप

पृष्ठ पर circles वर्ग के साथ एक div block बनाएँ। यह वर्ग बाकी के उदाहरणों पर भी लागू होता है।

सभी उदाहरण एक पृष्ठ पर स्थित होंगे, इसलिए मैंने तत्वों को जोड़ने के लिए शैलियों को जोड़ा। लेकिन सबसे महत्वपूर्ण बात यह है कि एक सर्कल आकार बनाने के लिए border-radius संपत्ति का उपयोग करना है।

 .circles { float: left; height: 200px; width: 200px; background-color: #eee; margin: 0 50px 50px 0; /*  */ -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } 

हमारी पृष्ठभूमि की छवियों को एक पंक्ति में रखा जाएगा, यहां उन्हें पट्टिका के उपयोग के साथ दिखाया गया है।

मल्टीफ़न लागू करें

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

CSS में, कई छवियों को काफी सरलता से परिभाषित किया गया है, बस उन्हें अल्पविराम से सूचीबद्ध करें।

 #slidingDoors { /*   */ background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg'); } 

व्यवस्था तार्किक है: पहली छवि शीर्ष पर होगी, अंतिम सबसे नीचे होगी, अर्थात यह अन्य सभी छवियों के साथ ओवरलैप होगी।



background संपत्ति में, आप छवियों के पथ और उनकी स्थिति दोनों को निर्दिष्ट कर सकते हैं। लेकिन बेहतर धारणा के लिए, हम इन विशेषताओं को अलग से सेट करेंगे, अर्थात हम background-position को इंगित करने के लिए background-position संपत्ति का उपयोग करेंगे।

 /*   */ #slidingDoors { background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg'); background-repeat: no-repeat; /*  */ background-position: -100px 0px, 100px 0px, 0px 0px; } 

जाहिर है, दिए गए मानों के समूह दिए गए चित्रों के अनुरूप हैं। प्रत्येक समूह में पहला मान छवि को दाईं ओर ले जाता है यदि संख्या सकारात्मक है, या बाईं ओर यदि संख्या नकारात्मक है। क्रमशः दूसरा मान, छवि को सकारात्मक संख्या के लिए या नकारात्मक के लिए नीचे ले जाता है।

जैसा कि आप देख सकते हैं, मैंने पेड़ के साथ सर्कल को दो भागों में विभाजित किया, और कार को अपरिवर्तित छोड़ दिया।



एक पेड़ की बनावट के साथ तस्वीर की ऐसी स्थिति अजीब लग सकती है, लेकिन एनीमेशन प्रभाव प्राप्त करना आवश्यक है।

एनिमेटेड छवियाँ

अब जब हम एक दूसरे से स्वतंत्र रूप से पृष्ठभूमि छवियों पर काम कर सकते हैं, तो हम transition संपत्ति के लिए एक दिलचस्प प्रभाव प्राप्त कर सकते हैं।

ऐसा करने के लिए, ब्राउज़रों के लिए उपसर्ग निर्दिष्ट करना न भूलें, एनीमेशन का समय 1 सेकंड निर्धारित करें। फिर, hover संपत्ति के लिए धन्यवाद, हम बनावट के एक हिस्से को बाईं ओर और दूसरे भाग को दाईं ओर ले जाते हैं।

 #slidingDoors { /*   */ background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg'); background-repeat: no-repeat; /*  */ background-position: -100px 0px, 100px 0px, 0px 0px; /* */ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #slidingDoors:hover { background-position: -200px 0px, 200px 0px, 0px 0px; } 

इसके साथ ही, हमने पहला उदाहरण लागू किया। जब आप माउस को घुमाते हैं, तो दरवाजे अलग-अलग दिशाओं में खुलेंगे और हम कार को देखेंगे।

ऊर्ध्वाधर रूप से खुलने वाले दरवाजों का एनीमेशन

अब जब हमने पहला उदाहरण देखा है, तो यह आसान हो जाएगा। यहाँ हम एक ही transition और background-image गुणों का उपयोग करते हैं। हम केवल बनावट के हिस्सों की स्थिति बदलते हैं। इस बार, मँडराते समय, वे लंबवत खुलेंगे।

 #slidingDoorsVert { /*   */ background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg'); background-repeat: no-repeat; /*  */ background-position: 0px -100px, 0px 100px, 0px 0px; /* */ -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } #slidingDoorsVert:hover { background-position: 0px -200px, 0px 200px, 0px 0px; } 

भागों का वर्ग पृथक्करण

चलो इसे एक कदम आगे बढ़ाते हैं और एनीमेशन के लिए पहले से ही 5 छवियों का उपयोग करते हैं। हमें इसकी आवश्यकता है, जब आप छवि पर मंडराते हैं, तो इसे 4 भागों में विभाजित किया जाता है और मशीन के साथ चित्र प्रदर्शित किया जाता है।

हम छवि के 4 भागों का निर्माण करते हैं ताकि वे सीधे और क्षैतिज रूप से सर्कल के केंद्र में हों। जब मँडराते हैं, तो वे केंद्र में चले जाएँगे।

 #breakApart { background-image: url('squares.jpg'), url('squares.jpg'), url('squares.jpg'), url('squares.jpg'), url('car.jpg'); background-repeat: no-repeat; background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0px 0px; /* */ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #breakApart:hover { background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0px 0px; } 

भागों का गोल पृथक्करण

एक गोल पृथक्करण के साथ एक ही प्रभाव को दोहराना थोड़ा अधिक कठिन होगा, सबसे पहले, आपको एक पारदर्शी छवि का उपयोग करने की आवश्यकता है, और दूसरी बात, आपको यह सुनिश्चित करने की आवश्यकता है कि वे निर्दिष्ट स्थान में एक दूसरे को ओवरलैप करते हैं। लकड़ी की बनावट के उपयोग के कारण यह समस्या हो सकती है। लेकिन अगर आप शोर के साथ एक सरल बनावट का उपयोग करते हैं, तो कोई समस्या नहीं होनी चाहिए।

रोटेशन और जुदाई

आप ऊपर दिए गए चित्र से इस उदाहरण का सार समझ सकते हैं। इस उदाहरण में, मैंने मशीन को छवि के कुछ हिस्सों को खोलने से पहले मोड़ दिया।

इसमें कुछ बारीकियां शामिल हैं। समस्या यह है कि सभी पृष्ठभूमि छवियों को घुमाया जाता है, जिसमें उनके नीचे मशीन की छवि भी शामिल है। इसे देखते हुए, मैंने कार को पहले से विपरीत दिशा में मोड़ दिया ताकि मोड़ते समय यह वांछित स्थिति में लौट आए।

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

 #twistAndShout { background-image: url('crisscross.jpg'), url('crisscross.jpg'), url('crisscross.jpg'), url('crisscross.jpg'), url('car.jpg'); background-repeat: no-repeat; background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0px 0px; /*  */ -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); /* */ -webkit-transition: background-position .6s ease-in-out, -webkit-transform .3s ease; -moz-transition: background-position .6s ease-in-out, -moz-transform .3s ease; -o-transition: background-position .6s ease-in-out, -o-transform .3s ease; -ms-transition: background-position .6s ease-in-out, -ms-transform .3s ease; transition: background-position .6s ease-in-out, transform .3s ease; } #twistAndShout:hover { background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0px 0px; /**/ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } 

Psywalker ऐड-ऑन
मूल लेख नवंबर 2011 में प्रकाशित किया गया था। संक्रमण और परिवर्तन सहित कई सीएसएस गुणों के लिए उपसर्गों को रद्द करने के बारे में एक संदेश, IE10 में रिलीज़ होने के बाद दिखाई दिया। इसलिए, हमने लेख में कोड के लेखक के संस्करण को छोड़ दिया, लेकिन व्यावहारिक कार्यों के लिए, ध्यान रखें कि -ms- उपसर्ग सबसे लोकप्रिय CSS3 गुणों के लिए है - जैसे कि संक्रमण, परिवर्तन, एनीमेशन, रैखिक-ढाल, आदि। - अब जरूरत नहीं है।