ऑफसेट-एंकर - सीएसएस-ट्रिक्स

offset-anchorसंपत्ति बॉक्स के अंदर एक बिंदु को परिभाषित करता है यह लंगर के रूप में लागू किया जाता है कि साथ चलता रहता है offset-path।

यह थोड़े कीड़ा है, तो चलो इसे थोड़ा नीचे तोड़ दें।

आप एक तत्व है, एक बॉक्स कहते हैं:

कोडऑन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन ऑरेंज बॉक्स देखें।

आप चाहते हैं कि बॉक्स एक पथ के साथ आगे बढ़े, एक स्क्वीजी लाइन कहे। हम एसवीजी के साथ उस लाइन को सीधे HTML में बना सकते हैं और इसे offset-pathबॉक्स के लिए उपयोग कर सकते हैं । हम offset-distanceसंपत्ति का उपयोग करके एनीमेशन बनाते हैं:

कोडऑन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पथ पर पेन ऑरेंज स्क्वायर देखें।

अच्छा अच्छा। लेकिन क्या होगा अगर हम चाहते हैं कि बॉक्स ऐसा लगे जैसे वह लाइन से लटका हो? तुम्हें पता है, जैसे एक व्यक्ति एक ज़िप लाइन के साथ फिसल जाता है।

यहीं offset-anchorअंदर आता है! यह तत्व पर एक स्थान को चिह्नित करता है और पथ पर तत्व को स्थिति में लाने के लिए इसका उपयोग करता है।

यहां एक उदाहरण दिया गया है जहां तीन अलग-अलग बक्से अलग-अलग लंगर बिंदुओं पर एक ही पथ से जुड़े होते हैं:

कोडन पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा पेन NMEEpy देखें।

वाक्य - विन्यास

.box ( offset-anchor: (auto | ); )

मूल्यों

• auto: मान offset-positionतब तक लेता है जब तक कि मान भी नहीं है autoऔर जब तक offset-pathसेट है none।
• position
  • : एक इकाई जिसकी गणना कंटेनर की सापेक्ष चौड़ाई और ऊंचाई से की जाती है। उदाहरण के लिए, 50% 50%मृत केंद्र होगा। ध्यान दें कि कीवर्ड यहां काम करते हैं, ठीक उसी तरह background-positionजहां center centerपरिणाम एक ही होगा।
  • : एक इकाई जो तत्व के बॉक्स के ऊपरी बाएं कोने से लंगर को बंद कर देती है।

यह ध्यान देने योग्य है कि positionएक एनिमेटेबल संपत्ति है।

ब्राउज़र का समर्थन

offset-*गुण अभी भी इस लेखन के समय एक प्रायोगिक सुविधा माना जाता है। यदि ब्राउज़र समर्थन की वर्तमान कमी आपको किसी प्रोजेक्ट पर इसका उपयोग करने में संकोच करती है, तो आप इस स्तर के एनीमेशन के लिए GSAP का उपयोग करने पर विचार कर सकते हैं। यह आपको वर्तमान में सबसे व्यापक ब्राउज़र समर्थन प्रदान करेगा।

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४६	.२	नहीं न	। ९	नहीं न

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	नहीं न

Chrome 46 और ओपेरा 33 (और संबंधित मोबाइल संस्करण) के रूप में हमारे पास ब्लिंक (कोई ध्वज नहीं) में "प्रारंभिक समर्थन" है।

अतिरिक्त जानकारी

• मोशन पाथ मॉड्यूल स्तर 1 विशिष्टता
• वेबिट टिकट # 139128
• मोज़िला टिकट # 1186329
• Microsoft एज सुविधा अनुरोध