परफ़ॉर्मेंट पैरालैक्सिंग

Paul Lewis

Robert Flack

चाहे आप इसे पसंद करें या फिर इससे नफ़रत करें, पैरालक्सिंग का आनंद लिया जा सकता है. सोच-समझकर इस्तेमाल किए जाने पर, वेब ऐप्लिकेशन में जानकारी और बारीकियों को शामिल करना. हालांकि, समस्या यह है कि अगर परफ़ॉर्म करने वाले तरीके से पैरालक्सिंग करना चुनौती भरा हो सकता है. इस लेख में, हम ऐसे समाधान के बारे में चर्चा करें जो बेहतर परफ़ॉर्म करने वाला हो और उतना ही ज़रूरी हो, जितना ज़रूरी है क्रॉस-ब्राउज़र.

बहुत ज़्यादा शब्द हैं, पढ़ा नहीं गया

• पैरालक्स ऐनिमेशन बनाने के लिए, स्क्रोल इवेंट या background-position का इस्तेमाल न करें.
• ज़्यादा सटीक पैरालैक्स इफ़ेक्ट बनाने के लिए, सीएसएस 3D ट्रांसफ़ॉर्म का इस्तेमाल करें.
• मोबाइल Safari के लिए position: sticky का इस्तेमाल करके पक्का करें कि पैरालैक्स इफ़ेक्ट है प्रचार-प्रसार होता है.

अगर आपको ड्रॉप-इन सलूशन चाहिए, तो यूज़र इंटरफ़ेस (यूआई) के सैंपल GitHub रेपो पर जाएं और पैरालैक्स हेल्पर JS! आप GitHub रेपो.

सवाल हल करने वाले पैरालक्सर

सबसे पहले, आइए पैरालैक्स हासिल करने के दो सामान्य तरीकों पर नज़र डालें. और खास तौर पर यह जानना होगा कि वे हमारे मकसद के लिए सही क्यों नहीं हैं.

खराब: स्क्रोल इवेंट का इस्तेमाल किया जा रहा है

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

इस अहम जानकारी से हमें पता चलता है कि हमें JavaScript पर आधारित ऐसा समाधान जो स्क्रोल इवेंट के आधार पर एलिमेंट को एक जगह से दूसरी जगह ले जाता है: JavaScript इस बात की गारंटी नहीं देता कि पैरालैक्सिंग, पेज पर स्क्रोल करने की पोज़िशन. Mobile Safari के पुराने वर्शन में, स्क्रोल इवेंट को स्क्रोल के आखिर में भेजी जाती थी. इस वजह से, लोगों के लिए JavaScript पर आधारित स्क्रोल इफ़ेक्ट. हाल ही के वर्शन में स्क्रोल इवेंट होते हैं लेकिन, Chrome की तरह ही, "सबसे अच्छी कोशिश" करने पर आधार पर. अगर मुख्य थ्रेड किसी दूसरे काम में व्यस्त है. स्क्रोल इवेंट डिलीवर नहीं होंगे तुरंत, इसका मतलब है कि पैरालैक्स इफ़ेक्ट खो जाएगा.

खराब: background-position को अपडेट किया जा रहा है

हम दूसरी स्थिति से बचना चाहते हैं, वह है हर फ़्रेम पर पेंटिंग बनाना. अनेक समाधान background-position को बदलने की कोशिश की गई, ताकि वह पैरालैक्स जैसा दिखे. ब्राउज़र को स्क्रोल करने पर पेज के प्रभावित हिस्सों को फिर से पेंट करने देता है और ऐनिमेशन को बहुत ज़्यादा झंझट देना काफ़ी महंगा हो सकता है.

यदि हम पैरालैक्स गति के वादे को पूरा करना चाहते हैं, तो हमें कुछ ऐसा चाहिए को त्वरित प्रॉपर्टी के रूप में लागू किया जा सकता है (यानी आज के दौर में ट्रांसफ़ॉर्म और ओपैसिटी के लिए उपलब्ध है). साथ ही, यह स्क्रोल इवेंट पर निर्भर नहीं करता.

3D में सीएसएस

स्कॉट केलम और कीथ क्लार्क दोनों के पास ने लंबवत गति प्राप्त करने के लिए CSS 3D का उपयोग करने के क्षेत्र में महत्वपूर्ण काम किया है, और वे जिस तकनीक का इस्तेमाल करते हैं, वह इस तरह है:

• overflow-y: scroll से स्क्रोल करने के लिए, कंटेनिंग एलिमेंट सेट अप करें. शायद, overflow-x: hidden).
• उसी एलिमेंट के लिए perspective वैल्यू और perspective-origin लागू करें top left या 0 0 पर सेट करें.
• उस एलिमेंट के बच्चों पर Z में अनुवाद लागू करें और उसे फिर से स्केल करें स्क्रीन पर उनके साइज़ पर असर डाले बिना, पैरालैक्स मोशन उपलब्ध कराने के लिए.

इस तरीके के लिए सीएसएस ऐसा दिखता है:

.container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 1px;
  perspective-origin: 0 0;
}

.parallax-child {
  transform-origin: 0 0;
  transform: translateZ(-2px) scale(3);
}

जो इस तरह के एचटीएमएल का स्निपेट मान लेता है:

<div class="container">
    <div class="parallax-child"></div>
</div>

नज़रिए के लिए स्केल एडजस्ट करना

चाइल्ड एलिमेंट को वापस धकेलने से, उसका अनुपात के हिसाब से वैल्यू दिखाता है. यह हिसाब लगाया जा सकता है कि इसे कितनी स्केल करने की ज़रूरत है यह समीकरण: (प्रतिनिधि - दूरी) / दृष्टिकोण. क्योंकि आपको पैरालैक्सिंग एलिमेंट को भी पैरालैक्स के तौर पर सेट करना है, लेकिन वह उसी साइज़ में दिख रहा है जिस साइज़ में हमने लिखा है, तो उसे उसी तरह से बढ़ाने के बजाय, उसी तरह से बढ़ाना होगा.

ऊपर दिए गए कोड के मामले में, ऐंगल 1px है, और parallax-child के बीच की दूरी -2 पिक्सल है. इसका मतलब है कि एलिमेंट को 3x तक स्केल करना होगा. यहां कोड में प्लग की गई वैल्यू देखी जा सकती है: scale(3).

जिस कॉन्टेंट पर translateZ की वैल्यू लागू नहीं की गई है उसके लिए, ये काम किए जा सकते हैं शून्य को बदल दें. इसका मतलब है कि स्केल (प्रतिनिधि - 0) / है Perspective, 1 की वैल्यू देता है. इसका मतलब है कि इसे स्केल किया गया है न ऊपर, न ही कम. काफ़ी आसान है.

यह तरीका कैसे काम करता है

यह समझना ज़रूरी है कि यह तरीका क्यों कारगर है, क्योंकि हम जल्द ही आपको पता चल जाएगा. स्क्रोल करना असल में एक ट्रांसफ़ॉर्म है. इसलिए, यह accelerated; इसमें अक्सर जीपीयू के साथ लेयर को शिफ़्ट किया जाता है. में आम तौर पर किया जाने वाला स्क्रोल, जिसमें न तो कोई ऐंगल दिखता है, न ही स्क्रोल किया जाता है. स्क्रोलिंग एलिमेंट और उसके बच्चों की तुलना करते समय, 1:1 तरीके से किया जाता है. अगर किसी एलिमेंट को 300px तक नीचे की ओर स्क्रोल किया जाता है, तो उसके चाइल्ड एलिमेंट की कॉपी बदल जाती है उतनी ही रकम तक बढ़ाएं: 300px.

हालांकि, स्क्रोलिंग एलिमेंट पर एक ऐंगल वैल्यू लागू करने से, एलिमेंट में गड़बड़ी हो रही है इस प्रोसेस के साथ; यह स्क्रोल ट्रांसफ़ॉर्म को तैयार करने वाले आव्यूहों को बदल देता है. अब 300 पिक्सल की स्क्रोल से, बच्चों को सिर्फ़ 150 पिक्सल तक आगे बढ़ाया जा सकता है. आपने perspective और translateZ वैल्यू चुनी हैं. अगर किसी एलिमेंट में translateZ की वैल्यू के तौर पर 0 है. इसे 1:1 (जैसा कि पहले इस्तेमाल किया जाता था) पर स्क्रोल किया जाएगा, लेकिन को Z से दूर धकेल दिया गया है, तो उसे रेटिंग दें! कुल नतीजा: पैरालैक्स गति. और, सबसे अहम बात, इसे ऐसे हैंडल किया जाता है का हिस्सा अपने आप चलता है, जिसका अर्थ है कि आपको scroll के इवेंट सुनने या background-position को बदलने की कोई ज़रूरत नहीं है.

ऑइंटमेंट में मक्खी: मोबाइल Safari

हर प्रभाव की अपनी सीमाएं हैं और बदलाव लाने के लिए एक ज़रूरी बात यह है कि चाइल्ड एलिमेंट पर 3D इफ़ेक्ट का संरक्षण. अगर कोई एलिमेंट एक नज़रिए और इसके पैरालक्सिंग चाइल्ड एलिमेंट के बीच का क्रम, 3D दृश्य "फ़्लैट किया गया" है, जिसका मतलब है कि प्रभाव खो गया है.

<div class="container">
    <div class="parallax-container">
    <div class="parallax-child"></div>
    </div>
</div>

ऊपर दिए गए एचटीएमएल में, .parallax-container नया है और यह perspective मान को बराबर करने से हम पैरालैक्स प्रभाव खो देते हैं. समाधान, ज़्यादातर मामलों में, यह काफ़ी आसान है. इसमें transform-style: preserve-3d को जोड़ा जाता है जिससे वह किसी भी 3D प्रभाव (जैसे हमारा दृष्टिकोण) का प्रचार कर सकता है मान) दिए गए हैं, जिन्हें ट्री में और नीचे लागू किया गया है.

.parallax-container {
  transform-style: preserve-3d;
}

हालांकि, मोबाइल Safari के मामले में चीज़ें थोड़ी जटिल हो जाती हैं. कंटेनर एलिमेंट पर overflow-y: scroll लागू करने से तकनीकी तौर पर मदद मिलती है, लेकिन यह काम करता है: स्क्रॉलिंग एलीमेंट को फ़्लिंग करने में सक्षम होने की लागत. इसका समाधान है कि विज्ञापन -webkit-overflow-scrolling: touch, लेकिन इससे perspective भी फ़्लैट हो जाएगा और हमें पैरालैक्सिंग नहीं करनी होगी.

परफ़ॉर्मेंस को बेहतर बनाने की प्रोसेस में, हो सकता है कि यह ज़रूरत से ज़्यादा पुराना न हो समस्या. अगर हम हर स्थिति में पैरालक्स नहीं कर सकते, तो हमारा ऐप्लिकेशन अब भी काम करता रहेगा. हालांकि, तो कोई समाधान निकालना अच्छा रहेगा.

position: sticky ने बचाया!

असल में, position: sticky के रूप में कुछ मदद मौजूद है, जो तत्वों को "स्टिक" करने की अनुमति दें या दिए गए पैरंट एलिमेंट पर क्लिक करें. स्क्रोल करने के दौरान दिखाई देता है. इनमें से ज़्यादातर की तरह, विशेषता भी काफ़ी जटिल है, लेकिन इसमें इसमें मददगार छोटा जेम:

पहली नज़र में इसका यह मतलब बहुत अच्छा नहीं लग सकता, लेकिन हमारा मुख्य मकसद है कि वह वाक्य तब है, जब यह बताता है कि किसी एलिमेंट की स्टिकनेस कैसी है गणना की गई: "ऑफ़सेट की गणना निकटतम पूर्वज के संदर्भ में की गई है होना चाहिए." दूसरे शब्दों में, स्टिकी एलिमेंट को एक जगह से दूसरी जगह ले जाने की दूरी (इसे किसी अन्य एलिमेंट या व्यूपोर्ट से अटैच किया जा सके, इसके लिए) की गणना पहले की जाती है, न कि बाद में. इसका मतलब है यह काफ़ी हद तक स्क्रोल करने वाले उदाहरण की तरह है, अगर ऑफ़सेट का हिसाब लगाया जाता है 300 पिक्सल का साइज़ सेट करने पर, आपको नज़रिए (या किसी और तरह का बदलाव) को इस्तेमाल करने का नया मौका मिलता है स्टिकी पर लागू करने से पहले उस 300px ऑफ़सेट मान में बदलाव करने के लिए एलिमेंट.

पैरालैक्सिंग एलिमेंट पर position: -webkit-sticky लागू करके, हम ये काम कर सकते हैं प्रभावी तरीके से "विपरीत करें" -webkit-overflow-scrolling: touch का असर कम करने में मदद करता है. इससे यह सुनिश्चित होता है कि पैरालैक्सिंग तत्व निकटतम स्क्रोलिंग बॉक्स वाला एंसेस्टर, जो इस मामले में .container है. इसके बाद, पहले की तरह ही, .parallax-container पर perspective की वैल्यू लागू होगी, यह कैलकुलेटेड स्क्रोल ऑफ़सेट को बदल देता है और पैरालैक्स इफ़ेक्ट बनाता है.

<div class="container">
    <div class="parallax-container">
    <div class="parallax-child"></div>
    </div>
</div>

.container {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.parallax-container {
  perspective: 1px;
}

.parallax-child {
  position: -webkit-sticky;
  top: 0px;
  transform: translate(-2px) scale(3);
}

यह मोबाइल Safari के लिए पैरालक्स इफ़ेक्ट को पहले जैसा कर देता है, जो कि एक अच्छी खबर है राउंड!

स्टिकी पोज़िशनिंग से जुड़ी सावधानियां

यहां अंतर है, हालांकि: position: sticky बदलाव करता है पैरालैक्स मैकेनिक्स. स्टिकी पोज़िशनिंग कोशिश करती है कि एलिमेंट स्क्रोलिंग कंटेनर होता है, जबकि नॉन-स्टिकी वर्शन में नहीं होता. इसका मतलब है कि स्टिकी वाला पैरालैक्स, बिना वाले वाले का विलोम होता है:

• अब position: sticky के साथ, एलिमेंट z=0 के पास होगा less चलता है.
• position: sticky के बिना, एलिमेंट के पास z=0 ज़्यादा होना चाहिए वह हिलता है.

अगर यह सब थोड़ा-बहुत आसान लगता है, तो रॉबर्ट फ़्लैक का यह डेमो देखें. यह दिखाता है कि एलिमेंट, स्टिकी के साथ और उनके बिना अलग-अलग तरह से कैसे काम करते हैं पोज़िशनिंग. अंतर देखने के लिए, आपको Chrome कैनरी (जो पहले वर्शन 56 है) की ज़रूरत होगी लिखते समय) या Safari.

रॉबर्ट फ़्लैक का एक डेमो, जिसमें बताया गया है कि कैसे position: sticky, पैरालैक्स स्क्रोलिंग पर असर डालता है.

अलग-अलग तरह की गड़बड़ियां और उन्हें हल करने के तरीके

हालांकि, किसी भी चीज़ की तरह वहां भी उभार और कमी है स्मूद ओवर:

• स्टिकी सहायता अलग-अलग होती है. में सहायता अब भी लागू की जा रही है Chrome और Edge में यह सुविधा पूरी तरह से काम नहीं करती है. साथ ही, Firefox में गड़बड़ियों को पेंट करने के लिए तब काम किया जाता है, जब स्टिकी को ऐंगल ट्रांसफ़ॉर्म के साथ जोड़ा जाता है. ऐसे में मामलों में, केवल position: sticky ( -webkit- प्रीफ़िक्स वाला वर्शन), जब भी ज़रूरत हो, जो मोबाइल Safari के लिए है सिर्फ़.
• यह इफ़ेक्ट "सिर्फ़ काम" नहीं करता Edge में देखा जा सकता है. Edge, यहां स्क्रोल करने की कोशिश करता है ओएस स्तर पर जाना, जो आम तौर पर अच्छी बात है, लेकिन इस मामले में यह इसे जिससे कि वह स्क्रोल करने के दौरान सामने वाले हिस्से में होने वाले बदलावों का पता लगा सके. इसे ठीक करने के लिए, ऐसा लगता है कि एज को, बिना ओएस के स्क्रोल करने के किसी तरीके पर स्विच किया जा रहा है, साथ ही, यह भी पक्का करती है कि यह बदलाव, प्रोजेक्ट और नज़रिए को समझने के लिए अहम हो.
• "इस पेज का कॉन्टेंट अब बहुत बड़ा हो गया है!" कई ब्राउज़र यह तय किया जा सकता है कि पेज का कॉन्टेंट कितना बड़ा है. हालांकि, दुख की बात है कि Chrome और Safari खास जानकारी को ध्यान में न रखें. तो मान लें - किसी एलिमेंट पर 3 गुना का स्केल लागू किया गया है, तो आपको स्क्रोल बार और उससे मिलता-जुलता दूसरा एलिमेंट दिखेगा. भले ही, एलिमेंट के नीचे 1x पर perspective लागू कर दिया गया है. इस समस्या को हल करने के लिए ये तरीके अपनाए जा सकते हैं transform-origin: bottom right के साथ, सबसे नीचे दाएं कोने से एलिमेंट को स्केल करता है, जो इसलिए काम करता है, क्योंकि इससे एलिमेंट बड़े साइज़ के एलिमेंट को "नेगेटिव क्षेत्र" (आम तौर पर, सबसे ऊपर बाईं ओर) स्क्रोल किया जा सकता है; इसे स्क्राेल किया जा सकता है क्षेत्रों को कभी भी नेगेटिव क्षेत्र में मौजूद कॉन्टेंट को देखने या उस पर स्क्रोल करने की अनुमति नहीं दी जाती.

नतीजा

पैरालैक्सिंग को सोच-समझकर इस्तेमाल करने पर, यह एक मज़ेदार इफ़ेक्ट है. जैसा कि आपको दिख रहा है, यह मुमकिन है कि लागू करने के लिए इस तरीके का इस्तेमाल करें जो बेहतर, स्क्रोल-कपल्ड, और क्रॉस-ब्राउज़र हो. क्योंकि इसके लिए थोड़ी सी गणितीय समस्याओं और मनचाहा इफ़ेक्ट पाने के लिए, हमने एक छोटी सी हेल्पर लाइब्रेरी तैयार की है और सैंपल देखें. इन्हें हमारे यूज़र इंटरफ़ेस (यूआई) एलिमेंट के सैंपल GitHub के रेपो में देखा जा सकता है.

खेलें और हमें बताएं कि आपका सफ़र कैसा रहा.