हम अक्सर पृष्ठभूमि छवियों को बनावट या ऐसी चीज़ के रूप में सोचते हैं जो सुपाठ्य सामग्री के लिए कंट्रास्ट प्रदान करती है — दूसरे शब्दों में, वास्तव में सामग्री नहीं। यदि यह सामग्री होती, तो आप शायद एक के लिए पहुँच जाते <img>
वैसे भी, अभिगम्यता और क्या नहीं।
लेकिन कई बार ऐसा होता है जब स्थिति or स्केल एक पृष्ठभूमि छवि सामग्री और सजावट के ध्रुवों के बीच कहीं बैठ सकती है। प्रसंग राजा है, है ना? अगर हम पृष्ठभूमि छवि की स्थिति बदलते हैं, तो यह थोड़ा और संदर्भ या अनुभव बता सकता है।
ऐसा कैसे? आइए कुछ उदाहरण देखें जो मैंने तैरते हुए देखे हैं।
जैसा कि हम आरंभ करते हैं, मैं सावधान करता हूँ कि इन डेमो में सजावट के लिए उपयोग की जाने वाली छवियों और सामग्री के रूप में उपयोग की जाने वाली छवियों के बीच एक महीन रेखा है। अंतर के अभिगम्यता निहितार्थ हैं जहां स्क्रीन पाठकों को पृष्ठभूमि की घोषणा नहीं की जाती है। यदि आपकी छवि वास्तव में एक छवि है, तो शायद एक पर विचार करें <img>
उचित के साथ टैग करें alt
मूलपाठ। और जब हम अभिगम्यता की बात कर रहे हैं, तो यह एक अच्छा विचार है उपयोगकर्ता की गति वरीयता पर विचार करें किया जा सकता है।
मुझे और दिखाओ!
क्रिस कॉयियर के पास कई साल पहले का यह छोटा सा डेमो है।
डेमो कई मायनों में अत्यंत व्यावहारिक है क्योंकि सामग्री में विज्ञापन प्रदर्शित करने के लिए यह एक साफ-सुथरा तरीका है। आपके पास बिक्री पिच और इसे पूरक करने के लिए एक मोहक छवि है।
अधिकांश विज्ञापनों के लिए बड़ी सीमा, मैं दांव लगाऊंगा, सीमित अचल संपत्ति है। मुझे नहीं पता कि आपको कभी किसी पृष्ठ पर कोई विज्ञापन छोड़ना पड़ा हो या नहीं, लेकिन मैंने विज्ञापनदाता से एक ऐसी छवि मांगी है जो सटीक पिक्सेल आयामों को पूरा करती है, इसलिए संपत्ति अंतरिक्ष में फिट बैठती है।
लेकिन क्रिस का डेमो अंतरिक्ष के मुद्दे को कम करता है। छवि को होवर करें और इसे गति और माप दोनों देखें। उपयोगकर्ता वास्तव में प्राप्त करता है अधिक जब छवि अपनी मूल स्थिति में होती तो उत्पाद के संदर्भ में। यह जीत-जीत है, है ना? विज्ञापनदाता संदर्भ से समझौता किए बिना एक आकर्षक छवि बना सकता है। इस बीच, छवि के नए प्रकट भागों से उपयोगकर्ता को थोड़ा अतिरिक्त मूल्य मिलता है।
यदि आप डेमो के मार्कअप को देखते हैं, तो आप देखेंगे कि यह काफी हद तक आपकी अपेक्षा के अनुरूप है। यहाँ एक संक्षिप्त संस्करण है:
<div class="ad-container"> <a href="#" target="_blank" rel="noopener"> <!-- Background image container --> <div class="ad-image"></div> </a> <div class="ad-content"> <!-- Content --> </div>
</div>
हम शायद शब्दार्थ विज्ञान पर थोड़ा सा विचार कर सकते हैं, लेकिन वह बात नहीं है। हमारे पास एक लिंक्ड-अप वाला कंटेनर है <div>
पृष्ठभूमि छवि और दूसरे के लिए <div>
सामग्री रखने के लिए।
जहाँ तक स्टाइल की बात है, यहाँ महत्वपूर्ण टुकड़े हैं:
.container { background-image: url("/path/to/some/image.png"); background-repeat: no-repeat; background-position: 0 0; height: 400px; width: 350px;
}
बुरा नहीं है, है ना? हम कंटेनर को कुछ आयाम देते हैं और उस पर एक पृष्ठभूमि छवि सेट करते हैं जो दोहराती नहीं है और उसके निचले-बाएँ किनारे पर स्थित होती है।
असली चाल जावास्क्रिप्ट के साथ है। हम इसका उपयोग माउस की स्थिति और कंटेनर की ऑफसेट प्राप्त करने के लिए करेंगे, फिर उस मान को सेट करने के लिए उचित पैमाने पर परिवर्तित करें background-position
. पहले, आइए माउस की गतियों के बारे में सुनें .container
तत्व:
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { // Our function }
);
यहां से हम कंटेनर का उपयोग कर सकते हैं offsetX
और offsetY
गुण। लेकिन हम इन मानों का सीधे उपयोग नहीं करेंगे, क्योंकि X निर्देशांक का मान हमारी आवश्यकता से छोटा है, और Y निर्देशांक बड़ा है। हमें एक स्थिरांक खोजने के लिए थोड़ा खेलना होगा जिसे हम गुणक के रूप में उपयोग कर सकते हैं।
यह थोड़ा स्पर्श और अनुभव है, लेकिन मैंने वह पाया है 1.32
और 0.455
क्रमशः एक्स और वाई निर्देशांक के लिए पूरी तरह से काम करें। हम ऑफ़सेट को उन मानों से गुणा करते हैं, संलग्न करते हैं px
परिणाम पर इकाई, फिर इसे लागू करें background-position
मूल्यों.
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { container.style.backgroundPositionX = -e.offsetX * 1.32 + "px"; container.style.backgroundPositionY = -e.offsetY * 0.455 + "px"; }
);
अंत में, यदि उपयोगकर्ता छवि कंटेनर छोड़ता है तो हम पृष्ठभूमि की स्थिति को वापस मूल स्थिति में भी रीसेट कर सकते हैं।
container.addEventListener("mouseleave", function() { container.style.backgroundPosition = "0px 0px"; }
);
चूँकि हम CSS-Tricks पर हैं, मैं यह पेशकश करूँगा कि हम वेनिला CSS में थोड़े होवर संक्रमण के साथ इसका एक बहुत सस्ता संस्करण कर सकते थे:
एक बड़ा चित्र पेंट करें
इसमें कोई संदेह नहीं है कि आप कुछ ऑनलाइन कपड़ों की दुकान या जो कुछ भी गए हैं और ओल 'ज़ूम-ऑन-होवर सुविधा का सामना किया है।
यह पैटर्न हमेशा के लिए जैसा महसूस होता है, उसके आसपास रहा है (डायलन विन्न-ब्राउन ने अपना दृष्टिकोण साझा किया वापस 2016), लेकिन यह इसकी उपयोगिता के लिए सिर्फ एक वसीयतनामा (मुझे आशा है) है। उपयोगकर्ता को अधिक संदर्भ मिलता है क्योंकि वे ज़ूम इन करते हैं और स्वेटर की सिलाई या आपके पास क्या है इसका बेहतर विचार प्राप्त करते हैं।
इसके दो भाग हैं: द कंटेनर और ताल. मार्कअप में हमें केवल कंटेनर की आवश्यकता है, क्योंकि हम उपयोगकर्ता के इंटरेक्शन के दौरान आवर्धक तत्व को इंजेक्ट करेंगे। तो, हमारे HTML को निहारें!
<div class="container"></div>
CSS में, हम बनाएंगे width
और height
आवर्धक कांच के आयामों को संग्रहीत करने के लिए चर। तो हम देंगे .container
कुछ आकार और ए background-image
:
:root {
--magnifer-width: 85;
--magnifer-height: 85;
} .container { width: 500px; height: 400px; background-size: cover; background-image: url("/path/to/image.png"); background-repeat: no-repeat; position: relative;
}
आवर्धक को देखने से पहले ही हम इसके बारे में कुछ चीजें जानते हैं, और हम उन शैलियों को पहले से ही परिभाषित कर सकते हैं, विशेष रूप से पहले से परिभाषित चर के लिए .maginifier
की width
और height
:
.magnifier { position: absolute; width: calc(var(--magnifer-width) * 1px);
height: calc(var(--magnifer-height) * 1px);
border: 3px solid #000;
cursor: none;
background-image: url("/path/to/image.png");
background-repeat: no-repeat;
}
यह एक पूरी तरह से स्थित छोटा वर्ग है जो उपयोग करता है वही पृष्ठभूमि छवि फ़ाइल के रूप में .container
. ध्यान दें कि कैल्क फ़ंक्शन का उपयोग केवल इकाई-रहित मान को वेरिएबल में पिक्सेल में बदलने के लिए किया जाता है। बेझिझक यह व्यवस्था करें कि जहाँ तक आप अपने कोड में दोहराव को खत्म करने के लिए फिट दिखते हैं।
अब, चलिए जावास्क्रिप्ट की ओर मुड़ते हैं जो यह सब एक साथ खींचती है। पहले हमें पहले परिभाषित CSS वेरिएबल को एक्सेस करना होगा। हम इसे बाद में कई जगहों पर इस्तेमाल करेंगे। फिर हमें कंटेनर के भीतर माउस की स्थिति प्राप्त करने की आवश्यकता है क्योंकि यही वह मूल्य है जिसका उपयोग हम आवर्धक की पृष्ठभूमि स्थिति के लिए करेंगे।
// Get the css variables
let root = window.getComputedStyle(document.documentElement);
let magnifier_width = root.getPropertyValue("--magnifer-width");
let magnifier_height = root.getPropertyValue("--magnifer-height"); let container = document.querySelector(".container");
let rect = container.getBoundingClientRect();
let x = (e.pageX - rect.left);
let y = (e.pageY - rect.top); // Take page scrolling into account
x = x - window.pageXOffset;
y = y - window.pageYOffset;
हमें जो चाहिए वह मूल रूप से ए है mousemove
घटना श्रोता पर .container
. फिर, हम प्रयोग करेंगे event.pageX
or event.pageY
संपत्ति माउस के एक्स या वाई समन्वय प्राप्त करने के लिए। लेकिन पाने के लिए सटीक एक तत्व पर माउस की सापेक्ष स्थिति, हमें ऊपर जावास्क्रिप्ट से प्राप्त माउस की स्थिति से मूल तत्व की स्थिति को घटाना होगा। ऐसा करने का एक "सरल" तरीका उपयोग करना है getBoundingClientRect()
, जो किसी तत्व का आकार और व्यूपोर्ट के सापेक्ष उसकी स्थिति लौटाता है।
ध्यान दें कि मैं स्क्रॉलिंग को कैसे ध्यान में रख रहा हूं। यदि अतिप्रवाह है, तो खिड़की घटाना pageX
और pageY
ऑफ़सेट यह सुनिश्चित करेगा कि प्रभाव अपेक्षित रूप से चलता है।
हम सबसे पहले मैग्निफायर डिव बनाएंगे। अगला, हम एक बनाएंगे mousemove
कार्य करें और इसे छवि कंटेनर में जोड़ें। इस फ़ंक्शन में, हम आवर्धक को एक वर्ग विशेषता देंगे। हम माउस की स्थिति की भी गणना करेंगे और आवर्धक को बाएँ और शीर्ष मान देंगे जो हमने पहले गणना की थी।
आइए आगे बढ़ें और निर्माण करें magnifier
जब हम सुनते हैं mousemove
पर घटना .container
:
// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);
अब हमें यह सुनिश्चित करने की आवश्यकता है कि इसका एक वर्ग नाम है जिसे हम CSS तक सीमित कर सकते हैं:
// run the function on `mousemove`
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier");
}
उदाहरण वीडियो जो मैंने पहले दिखाया था, मैग्निफायर को कंटेनर के बाहर स्थित करता है। हम इसे सरल रखने जा रहे हैं और माउस के चलने के बजाय इसे कंटेनर के ऊपर ओवरले करेंगे। हम इस्तेमाल करेंगे if
एक्स और वाई मान होने पर ही आवर्धक की स्थिति निर्धारित करने के लिए कथन अधिक से अधिक or बराबर शून्य करने के लिए, और कम कंटेनर की चौड़ाई या ऊंचाई की तुलना में। इसे मर्यादा में रखना चाहिए। एक्स और वाई मानों से आवर्धक की चौड़ाई और ऊंचाई घटाना सुनिश्चित करें।
// Run the function on mouse move.
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier"); // Get mouse position let rect = container.getBoundingClientRect(); let x = (e.pageX - rect.left); let y = (e.pageY - rect.top); // Take page scrolling into account x = x - window.pageXOffset; y = y - window.pageYOffset; // Prevent magnifier from exiting the container // Then set top and left values of magnifier if (x >= 0 && x <= container.clientWidth - magnifier_width) { magnifier.style.left = x + "px"; } if (y >= 0 && y <= container.clientHeight - magnifier_height) { magnifier.style.top = y + "px"; }
});
अंतिम, लेकिन निश्चित रूप से कम से कम नहीं... हमें आवर्धक की पृष्ठभूमि छवि के साथ थोड़ा खेलने की आवश्यकता है। संपूर्ण बिंदु यह है कि जहां होवर हो रहा है, उसके आधार पर उपयोगकर्ता को पृष्ठभूमि छवि का एक बड़ा दृश्य मिलता है। तो, आइए एक आवर्धक को परिभाषित करें जिसका उपयोग हम चीजों को बढ़ाने के लिए कर सकते हैं। फिर हम पृष्ठभूमि छवि की चौड़ाई और ऊंचाई के लिए चर परिभाषित करेंगे ताकि हमारे पास उस पैमाने को आधार बनाने के लिए कुछ हो, और उन सभी मानों को .magnifier
शैलियों:
// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400; magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";
आइए आवर्धक की छवि के X और Y निर्देशांक लें और उन्हें लागू करें .magnifier
तत्व का background-position
। आवर्धक स्थिति के साथ पहले की तरह, हमें CSS चर का उपयोग करके X और Y मानों से आवर्धक की चौड़ाई और ऊँचाई घटानी होगी।
// the x and y positions of the magnifier image
let magnify_x = x * magnify + 15;
let magnify_y = y * magnify + 15; // set backgroundPosition for magnifier if it is within image
if ( x <= container.clientWidth - magnifier_width && y <= container.clientHeight - magnifier_height
) { magnifier.style.backgroundPosition = -magnify_x + "px " + -magnify_y + "px";
}
टाडा!
इसे सिनेमाई बनाएं
क्या तुमने देखा केन बर्न्स प्रभाव? यह क्लासिक और कालातीत चीज है जहां एक छवि कंटेनर से बड़ी होती है, फिर धीरे-धीरे स्लाइड और स्केल एक स्लग के रूप में धीमी हो जाती है। दुनिया की लगभग हर डॉक्यूमेंट्री फिल्म इमेज स्टिल के लिए इसका इस्तेमाल करती है। यदि आपके पास Apple TV है, तो आपने निश्चित रूप से इसे स्क्रीन सेवर पर देखा होगा।
वहां बहुत सारे of कोडपेन पर उदाहरण यदि आप एक बेहतर विचार प्राप्त करना चाहते हैं।
आप देखेंगे कि इस तक पहुंचने के कई तरीके हैं। कुछ जावास्क्रिप्ट का उपयोग करते हैं। अन्य 100% सीएसएस हैं। मुझे यकीन है कि कुछ उपयोग मामलों के लिए जावास्क्रिप्ट दृष्टिकोण अच्छे हैं, लेकिन यदि लक्ष्य छवि को आसानी से स्केल करना है, तो सीएसएस पूरी तरह से उपयुक्त है।
हम एक के बजाय कई पृष्ठभूमियों का उपयोग करके चीजों को थोड़ा मसाला दे सकते हैं। या, और भी बेहतर, यदि हम पृष्ठभूमि छवियों के बजाय तत्वों का उपयोग करने के लिए नियमों का विस्तार करते हैं, तो हम सभी पृष्ठभूमियों पर एक ही एनीमेशन लागू कर सकते हैं और डैश का उपयोग कर सकते हैं animation-delay
प्रभाव को डगमगाने के लिए।
ऐसा करने के बहुत सारे तरीके, बिल्कुल! यह निश्चित रूप से सैस और/या सीएसएस चर के साथ अनुकूलित किया जा सकता है। हेक, हो सकता है कि आप इसे सिंगल के साथ खींच सकें <div>
यदि ऐसा है, तो इसे टिप्पणियों में साझा करें!
बोनस: इसे इमर्सिव बनाएं
मुझे नहीं पता कि सारा ड्रस्नर की तुलना में कुछ अच्छा है या नहीं "हैप्पी हैलोवीन" पेन… और वह 2016 से है! यह एक महान उदाहरण है कि लगभग एक सिनेमाई अनुभव बनाने के लिए पृष्ठभूमि की परतों और उन्हें अलग-अलग गति से ले जाता है। गुड गॉड इज द कूल!
जीएसएपी वहां मुख्य चालक है, लेकिन मुझे लगता है कि हम एक उबला हुआ संस्करण बना सकते हैं जो प्रत्येक पृष्ठभूमि परत को अलग-अलग गति से बाएं से दाएं अनुवाद करता है। उतना अच्छा नहीं, बेशक, लेकिन निश्चित रूप से आधारभूत अनुभव। यह सुनिश्चित करना होगा कि प्रत्येक पृष्ठभूमि छवि का प्रारंभ और अंत सुसंगत हो ताकि एनीमेशन दोहराए जाने पर यह निर्बाध रूप से दोहराए।
अभी के लिए बस इतना ही! बहुत साफ-सुथरा है कि हम बनावट और कंट्रास्ट से कहीं अधिक के लिए पृष्ठभूमि का उपयोग कर सकते हैं। मैं पूरी तरह से सकारात्मक हूं कि कई अन्य चतुर बातचीत हैं जिन्हें हम पृष्ठभूमि पर लागू कर सकते हैं। तेमानी अफिफ ने ठीक वैसा ही किया लिंक्स के लिए स्वच्छ होवर प्रभावों का एक समूह. आप के मन में क्या है? टिप्पणियों में इसे मेरे साथ साझा करें!
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- स्रोत: https://css-tricks.com/moving-backgrounds/
- 1
- 11
- 7
- 9
- 98
- a
- About
- ऊपर
- पूर्ण
- बिल्कुल
- पहुँच
- एक्सेसिबिलिटी
- लेखा
- वास्तव में
- Ad
- विज्ञापन
- आगे
- सब
- पहले ही
- और
- एनीमेशन
- की घोषणा
- अन्य
- Apple
- लागू करें
- दृष्टिकोण
- दृष्टिकोण
- उपयुक्त
- चारों ओर
- आस्ति
- वापस
- पृष्ठभूमि
- पृष्ठभूमि छवि
- पृष्ठभूमि
- बुरा
- आधार
- आधारित
- आधारभूत
- मूल रूप से
- क्योंकि
- से पहले
- बेहतर
- के बीच
- बड़ा
- बड़ा
- बिट
- सीमा
- निर्माण
- गुच्छा
- गणना
- परिकलित
- मामलों
- निश्चित रूप से
- परिवर्तन
- सस्ता
- कक्षा
- क्लासिक
- कपड़ा
- कोड
- समझौता
- विचार करना
- संगत
- स्थिर
- कंटेनर
- सामग्री
- प्रसंग
- इसके विपरीत
- बदलना
- ठंडा
- समन्वय
- सका
- कोर्स
- आवरण
- बनाना
- सीएसएस
- पानी का छींटा
- परिभाषित
- क़ौम
- डीआईडी
- अंतर
- विभिन्न
- आयाम
- सीधे
- प्रदर्शित
- दस्तावेज़
- वृत्तचित्र
- नहीं करता है
- dont
- संदेह
- ड्राइवर
- बूंद
- दौरान
- से प्रत्येक
- पूर्व
- Edge
- प्रभाव
- प्रभाव
- तत्व
- नष्ट
- सुनिश्चित
- जायदाद
- और भी
- कार्यक्रम
- कभी
- प्रत्येक
- ठीक ठीक
- उदाहरण
- उदाहरण
- बाहर निकल रहा है
- विस्तार
- उम्मीद
- अपेक्षित
- अनुभव
- अतिरिक्त
- आंख को पकड़ने
- Feature
- कुछ
- पट्टिका
- फ़िल्म
- खोज
- अंत
- प्रथम
- फिट
- चल
- सदा
- पाया
- मुक्त
- से
- समारोह
- मिल
- देना
- कांच
- Go
- लक्ष्य
- चला जाता है
- अच्छा
- महान
- ऊंचाई
- यहाँ उत्पन्न करें
- पकड़
- आशा
- मंडराना
- कैसे
- तथापि
- एचटीएमएल
- HTTPS
- मैं करता हूँ
- विचार
- की छवि
- छवियों
- निहितार्थ
- महत्वपूर्ण
- in
- अन्य में
- बजाय
- बातचीत
- बातचीत
- मुद्दा
- IT
- खुद
- जावास्क्रिप्ट
- रखना
- राजा
- जानना
- बड़ा
- परत
- परतों
- सीमा
- सीमित
- लाइन
- थोड़ा
- देखिए
- मुख्य
- बनाना
- तब तक
- की बैठक
- हो सकता है
- मन
- अधिक
- अधिकांश
- प्रस्ताव
- चाल
- आंदोलनों
- चाल
- चलती
- विभिन्न
- एकाधिक पृष्ठभूमि
- नाम
- आवश्यकता
- अगला
- संख्या
- प्रस्ताव
- ओफ़्सेट
- ONE
- ऑनलाइन
- अनुकूलित
- मूल
- अन्य
- अन्य
- बाहर
- पैटर्न
- टुकड़े
- पिच
- पिक्सेल
- जगह
- गंतव्य
- प्लेटो
- प्लेटो डेटा इंटेलिजेंस
- प्लेटोडाटा
- प्ले
- बिन्दु
- स्थिति
- स्थिति में
- पदों
- सकारात्मक
- व्यावहारिक
- सुंदर
- को रोकने के
- पहले से
- शायद
- एस्ट्रो मॉल
- उचित
- गुण
- संपत्ति
- प्रदान करता है
- खींचती
- पहुंच
- पाठकों
- वास्तविक
- अचल संपत्ति
- दोहराना
- परिणाम
- रिटर्न
- प्रकट
- जड़
- नियम
- रन
- विक्रय
- वही
- सास
- स्केल
- तराजू
- क्षेत्र
- स्क्रीन
- स्क्रीन रीडर
- स्क्रॉलिंग
- मूल
- लगता है
- अर्थ विज्ञान
- सेट
- कई
- आकार
- Share
- साझा
- चाहिए
- सरल
- केवल
- एक
- आकार
- स्लाइड्स
- धीमा
- छोटे
- So
- ठोस
- कुछ
- कुछ
- कहीं न कहीं
- अंतरिक्ष
- विशेष रूप से
- गति
- मसाला
- चौकोर
- प्रारंभ
- शुरू
- बयान
- की दुकान
- अंदाज
- उपयुक्त
- सुपर
- टैग
- लेना
- ले जा
- में बात कर
- वसीयतनामा
- RSI
- दुनिया
- बात
- चीज़ें
- कालातीत
- बार
- सेवा मेरे
- एक साथ
- टन
- ऊपर का
- संक्रमण
- <strong>उद्देश्य</strong>
- मोड़
- tv
- आम तौर पर
- इकाई
- उपयोग
- उपयोगकर्ता
- मूल्य
- मान
- संस्करण
- वीडियो
- देखें
- घड़ी
- तरीके
- क्या
- कौन कौन से
- जब
- पूरा का पूरा
- विकिपीडिया
- मर्जी
- अंदर
- बिना
- शब्द
- काम
- विश्व
- होगा
- X
- साल
- आप
- आपका
- जेफिरनेट
- शून्य
- ज़ूम