एनिमेटेड बैकग्राउंड स्ट्राइप्स दैट ट्रांजिशन ऑन होवर

आप कितनी बार CSS के लिए पहुँचते हैं background-size संपत्ति? यदि आप मेरे जैसे हैं - और शायद बहुत से अन्य फ्रंट-एंड लोग - तो यह आमतौर पर तब होता है जब आप background-size: cover संपूर्ण तत्व के स्थान को भरने के लिए एक छवि।

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

पृष्ठभूमि के आकार की तुलना में वहाँ बहुत कुछ चल रहा है, लेकिन यही वह चाल थी जिसकी मुझे धारियों को बदलने के लिए आवश्यकता थी। मैंने सोचा था कि मैं आपको दिखाऊंगा कि मैं वहां कैसे पहुंचा, न केवल इसलिए कि मुझे लगता है कि यह वास्तव में एक अच्छा दृश्य प्रभाव है, बल्कि इसलिए कि मुझे ग्रेडिएंट्स और ब्लेंड मोड्स के साथ रचनात्मक होने की आवश्यकता है जो मुझे लगता है कि आप आनंद ले सकते हैं।

आइए चीजों को सरल रखने के लिए एक बहुत ही बुनियादी सेटअप के साथ शुरुआत करें। मैं सिंगल की बात कर रहा हूं

HTML में जिसे हरे वर्ग के रूप में स्टाइल किया गया है:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

पृष्ठभूमि धारियों की स्थापना

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

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

मैंने क्षैतिज पट्टियां बनाईं, लेकिन हम यहां जिस दृष्टिकोण को कवर कर रहे हैं, उसके साथ हम लंबवत भी जा सकते हैं। और हम कस्टम गुणों के साथ इसे थोड़ा सरल कर सकते हैं:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

तो, --gt मूल्य ढाल है और --n एक स्थिरांक है जिसका उपयोग हम धारियों को नीचे की ओर धकेलने के लिए कर रहे हैं ताकि वे लंबवत रूप से ऑफसेट हो जाएं। और आपने देखा होगा कि मैंने एक सही ग्रेडिएंट सेट नहीं किया है, बल्कि इसमें ठोस काली धारियाँ सेट की हैं linear-gradient() कार्य - यह जानबूझकर किया गया है और हम इसे थोड़ा सा समझेंगे कि मैंने ऐसा क्यों किया।

आगे बढ़ने से पहले एक और चीज जो हमें करनी चाहिए वह है अपनी पृष्ठभूमि को दोहराने से रोकना; अन्यथा, वे टाइल लगा देंगे और पूरे स्थान को भर देंगे:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

हम सेट कर सकते थे background-repeat में background आशुलिपि, लेकिन चीजों को पढ़ने में आसान रखने के लिए मैंने इसे यहाँ तोड़ने का फैसला किया।

धारियों को ऑफसेट करना

हमारे पास तकनीकी रूप से पट्टियां हैं, लेकिन यह बताना काफी कठिन है क्योंकि उनके बीच कोई रिक्ति नहीं है और वे पूरे कंटेनर को कवर करते हैं। यह ऐसा है जैसे हमारे पास एक ठोस काला वर्ग है।

यह वह जगह है जहाँ हमें इसका उपयोग करने को मिलता है background-size संपत्ति। हम पट्टियों की ऊंचाई और चौड़ाई दोनों सेट करना चाहते हैं और संपत्ति दो-मान सिंटैक्स का समर्थन करती है जो हमें बिल्कुल ऐसा करने की अनुमति देती है। और, हम उन आकारों को अल्पविराम से अलग करके उसी तरह से अलग कर सकते हैं जैसे हमने किया था background.

आइए पहले चौड़ाई निर्धारित करके सरल शुरुआत करें। के लिए सिंगल-वैल्यू सिंटैक्स का उपयोग करना background-size चौड़ाई सेट करता है और ऊंचाई को डिफॉल्ट करता है auto. मैं यहां पूरी तरह से मनमाने मूल्यों का उपयोग कर रहा हूं, इसलिए उन मूल्यों को सेट करें जो आपके डिजाइन के लिए सबसे अच्छा काम करते हैं:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

यदि आप उन्हीं मूल्यों का उपयोग कर रहे हैं जो मैं हूं, तो आपको यह मिलेगा:

क्या बिल्कुल ऐसा नहीं लगता कि हम सभी धारियों के लिए चौड़ाई निर्धारित करते हैं, है ना? ऐसा इसलिए है auto एकल-मान सिंटैक्स का ऊंचाई व्यवहार। दूसरी पट्टी अपने से नीचे की अन्य पट्टी से चौड़ी है, और यह उन्हें ढक रही है। हमें ऊंचाई तय करनी चाहिए ताकि हम अपना काम देख सकें। वे सभी समान ऊंचाई के होने चाहिए और हम वास्तव में अपने का पुन: उपयोग कर सकते हैं --n चर, फिर से, चीजों को सरल रखने के लिए:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

आह, बहुत बेहतर!

धारियों के बीच अंतराल जोड़ना

यह एक पूरी तरह से वैकल्पिक कदम है यदि आपके डिजाइन को पट्टियों के बीच अंतराल की आवश्यकता नहीं है, लेकिन मेरा किया है और यह अत्यधिक जटिल नहीं है। हम प्रत्येक पट्टी की ऊंचाई बदलते हैं background-size एक छोटा सा, मूल्य कम करना ताकि वे पूर्ण ऊर्ध्वाधर स्थान को भरने से कम हो जाएं।

हम अपना उपयोग जारी रख सकते हैं --n चर, लेकिन एक छोटी राशि घटाना, कहते हैं 5px, का उपयोग करते हुए calc() हम जो चाहते हैं उसे पाने के लिए।

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

यह बहुत अधिक दोहराव है जिसे हम दूसरे चर के साथ समाप्त कर सकते हैं:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

मास्किंग और सम्मिश्रण

अब की अदला-बदली करते हैं palegreen सफेद रंग के लिए हम इस बिंदु तक दृश्य उद्देश्यों के लिए पृष्ठभूमि रंग का उपयोग कर रहे हैं।

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

इस तरह का एक काला और सफेद पैटर्न मास्किंग और सम्मिश्रण के लिए एकदम सही है। ऐसा करने के लिए, हम सबसे पहले अपने

एक नए मूल कंटेनर में और दूसरा परिचय दें

इसके नीचे:

हम यहां थोड़ा CSS री-फैक्टरिंग करने जा रहे हैं। अब हमारे पास एक नया पैरेंट कंटेनर है, हम फिक्स्ड पास कर सकते हैं width और height गुण हम अपने पर उपयोग कर रहे थे

वहाँ:

section {
  width: 500px;
  height: 500px;
} 

मैं दोनों को स्थान देने के लिए CSS ग्रिड का भी उपयोग करने जा रहा हूँ

एक दूसरे के ऊपर तत्व। यह वही तरकीब है जिसका इस्तेमाल तेमानी अफिफ अपनी रचना के लिए करती है सुपर कूल छवि गैलरी. विचार यह है कि हम दोनों divs को उपयोग करके पूर्ण कंटेनर पर रखते हैं grid-area संपत्ति और सब कुछ केंद्र की ओर संरेखित करें:

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

अब, इसे देखें। कारण मैंने एक ठोस ढाल का उपयोग किया जो पहले काले से काले रंग में चला जाता है, हमें दोनों को मास्किंग और सम्मिश्रण के लिए स्थापित करना है

परतें। यह इस अर्थ में सही मास्किंग नहीं है कि हम कॉल कर रहे हैं mask गुण, लेकिन परतों के बीच का कंट्रास्ट नियंत्रित करता है कि कौन से रंग दिखाई दे रहे हैं। सफेद से ढका क्षेत्र सफेद ही रहेगा, और काले रंग से ढका क्षेत्र लीक हो जाएगा। सम्मिश्रण मोड पर MDN का दस्तावेज़ीकरण यह कैसे काम करता है इसकी एक अच्छी व्याख्या है।

यह काम करने के लिए, मैं उस वास्तविक ढाल को लागू करूँगा जिसे हम पहली बार देखना चाहते हैं

हमारे आद्याक्षर से शैली के नियमों को लागू करते समय

नए पर, का उपयोग कर :nth-child() छद्म चयनकर्ता:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

यदि हम यहीं रुक जाते हैं, तो हमें वास्तव में पहले की तुलना में कोई दृश्य अंतर दिखाई नहीं देगा। ऐसा इसलिए है क्योंकि हमने अभी तक वास्तविक सम्मिश्रण नहीं किया है। तो, चलिए अब इसका उपयोग करते हैं screen मिश्रण मोड:

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

मैंने इस आलेख की शुरुआत में दिखाए गए डेमो में एक बेज रंग की पृष्ठभूमि का रंग इस्तेमाल किया था। ऑफ-व्हाइट रंग का वह थोड़ा गहरा प्रकार बाकी पृष्ठभूमि के माध्यम से थोड़ा रंग बहने देता है:

होवर प्रभाव

इस पहेली का अंतिम टुकड़ा होवर प्रभाव है जो धारियों को पूरी चौड़ाई तक चौड़ा करता है। सबसे पहले, इसके लिए हमारे चयनकर्ता को लिखते हैं। हम चाहते हैं कि ऐसा तब हो जब मूल कंटेनर (

हमारे मामले में) मँडरा रहा है। जब यह मँडरा जाता है, तो हम दूसरे में शामिल धारियों की पृष्ठभूमि का आकार बदल देंगे

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

हम बदलना चाहेंगे background-size समान ऊंचाई बनाए रखते हुए धारियों की कंटेनर की पूरी चौड़ाई तक:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

यह पृष्ठभूमि को पूर्ण-चौड़ाई में "स्नैप" करता है। अगर हम थोड़ा सा जोड़ते हैं transition इसके लिए, फिर हम हॉवर पर धारियों का विस्तार देखते हैं:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

यहाँ वह अंतिम डेमो एक बार फिर से है:

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

वह एक कवर है!

काफ़ी साफ-सुथरा, है ना? मैं निश्चित रूप से ऐसा सोचता हूं। मुझे इसके बारे में जो पसंद है, वह यह है कि यह काफी रखरखाव योग्य और अनुकूलन योग्य है। उदाहरण के लिए, हम कुछ मानों को बदलकर पट्टियों की ऊँचाई, रंग और दिशा बदल सकते हैं। आप इसमें कुछ और चीजें भी बदल सकते हैं - जैसे रंग और चौड़ाई - इसे और भी अधिक विन्यास योग्य बनाने के लिए।

मुझे वास्तव में दिलचस्पी है अगर आपने इसे अलग तरीके से संपर्क किया होता। यदि ऐसा है, तो कृपया टिप्पणियों में साझा करें! यह देखना अच्छा होगा कि हम कितनी विविधताएं एकत्र कर सकते हैं।