चुंबकीय स्क्रॉलिंग, ब्राउज़र-एनिमेटेड स्टेट ट्रांज़िशन और prefers-reduced-motion के कठोर सम्मान को व्यवस्थित करें।
इस पाठ को Kodokon में खोलेंScroll snap में दो कर्ता शामिल हैं: कंटेनर एक snapport परिभाषित करता है (इसका दृश्य क्षेत्र, scroll-padding से सिकुड़ा हुआ) और scroll-snap-type के ज़रिए एक रणनीति - proximity केवल किसी snap point के पास snap करता है, जबकि mandatory गारंटी देता है कि आप हमेशा किसी एक पर उतरें, प्रोग्रामेटिक स्क्रॉलिंग के बाद भी। बच्चे अपने संरेखण क्षेत्र की घोषणा scroll-snap-align से करते हैं (scroll-margin से समायोज्य)। एक कम-ज्ञात बारीकी: तेज़ swipe के दौरान, ब्राउज़र वैध रूप से कई snap points छोड़ सकता है; scroll-snap-stop: always उसे हर एक पर रुकने के लिए मजबूर करता है, जो story-शैली के carousel के लिए आवश्यक है।
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 1rem;
}
.carousel > article {
flex: 0 0 80%;
scroll-snap-align: center;
scroll-snap-stop: always;
}View Transitions API बिना किसी लाइब्रेरी के एक DOM स्टेट परिवर्तन को एनिमेट करता है। document.startViewTransition(callback) वर्तमान स्थिति का एक दृश्य स्नैपशॉट कैप्चर करता है, आपका callback चलाता है (जो DOM को बदलता है), फिर पुरानी और नई स्थितियों के बीच एनिमेट करता है। अंदरूनी तौर पर, ब्राउज़र पेज के ऊपर pseudo-elements का एक वृक्ष बनाता है: ::view-transition में ::view-transition-group एलिमेंट्स होते हैं, प्रत्येक में एक ::view-transition-old (स्नैपशॉट, किसी छवि के तुलनीय प्रतिस्थापित सामग्री) और एक ::view-transition-new (जीवंत प्रतिनिधित्व) होता है। डिफ़ॉल्ट: एक cross-fade। ट्रांज़िशन के दौरान पेज गैर-इंटरैक्टिव होता है।
function applyUpdate(updateDom) {
if (!document.startViewTransition) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}असली ताक़त view-transition-name से आती है: एक नामित एलिमेंट अपने खुद के transition group में निकाल लिया जाता है। यदि पहले और बाद में समान नाम वाला एलिमेंट मौजूद हो, तो ब्राउज़र दोनों के बीच स्थिति और आकार को स्वतः interpolate करता है - किसी थंबनेल से उसके पूर्ण-स्क्रीन दृश्य तक morphing प्रभाव, बिना एनिमेशन JavaScript की एक भी पंक्ति के। हर नाम किसी भी क्षण पेज पर अद्वितीय होना चाहिए, वरना ट्रांज़िशन त्याग दिया जाता है। pseudo-elements को साधारण CSS एनिमेशनों से स्टाइल किया जाता है।
.hero-thumb { view-transition-name: hero; }
::view-transition-old(hero),
::view-transition-new(hero) {
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
}बचती है accessibility की बाध्यता: prefers-reduced-motion: reduce गति के प्रति संवेदनशील उपयोगकर्ता (vestibular विकार, माइग्रेन) का संकेत देता है। घटाने का मतलब हटाना नहीं है: एक opacity fade स्वीकार्य रहता है; बड़ी हलचलें, zooms और parallax प्रभाव ही हैं जिन्हें निष्प्रभावी करना चाहिए। आप CSS में रक्षात्मक global override पहले से जानते हैं (लगभग-शून्य अवधियाँ, पिछले मॉड्यूल में शामिल); view transitions एक दूसरा मोर्चा जोड़ते हैं: JavaScript की तरफ़, किसी ट्रांज़िशन या एनिमेटेड स्क्रॉल को शुरू करने से पहले window.matchMedia("(prefers-reduced-motion: reduce)") से क्वेरी करें।
const reduceMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
if (reduceMotion || !document.startViewTransition) {
updateDom();
} else {
document.startViewTransition(() => updateDom());
}