स्क्रॉल एनीमेशन - सीएसएस-ट्रिक्स

कुछ स्क्रॉल एनिमेशन हैं जो सीएसएस में बिना किसी जावास्क्रिप्ट के संभव हैं। बस स्क्रॉल इंडिकेटर के अध्याय को देखें, जो स्पष्ट रूप से CSS जादू है। लेकिन हम सीएसएस में सीधे स्क्रॉल एनीमेशन का एक बहुत काम कर सकते हैं, जिसमें केवल एक छोटी सी जानकारी जावास्क्रिप्ट द्वारा दी गई है: पृष्ठ ने कितनी दूर तक स्क्रॉल किया है।

तो चलो कि रास्ते से हट जाओ। जावास्क्रिप्ट वन-लाइनर के साथ, हम एक सीएसएस कस्टम संपत्ति सेट कर सकते हैं जो स्क्रॉल किए गए पृष्ठ का प्रतिशत जानता है:

window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);

अब हमारे पास --scrollएक मूल्य है जिसे हम CSS में उपयोग कर सकते हैं।

यह ट्रिक स्कॉट केलम के रास्ते से आती है जो काफी सीएसएस चालबाज मास्टर है!

आइए पहले उस मान का उपयोग किए बिना एक एनीमेशन सेट करें। यह एक एसवीजी तत्व के लिए एक सरल कताई एनीमेशन है जो हमेशा के लिए स्पिन और स्पिन करेगा:

svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )

यहाँ आता है चाल! अब इस एनीमेशन को पॉज करते हैं। समय अवधि के दौरान इसे चेतन करने के बजाय, हम इसे स्क्रॉल करते animation-delayहुए पृष्ठ की स्थिति को समायोजित करके स्क्रॉल स्थिति के माध्यम से चेतन करेंगे । यदि animation-duration1s है, तो इसका मतलब है कि पृष्ठ की पूरी लंबाई स्क्रॉल करना। एनीमेशन का एक पुनरावृत्ति है।

svg ( position: fixed; /* make sure it stays put so we can see it! */ animation: rotate 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--scroll) * -1s); ) 

बदलने का प्रयास करें animation-durationकरने के लिए 0.5s। दो एनीमेशन के लिए अनुमति देता है animation-delayगणित के साथ पूरा किया जा सकता है ।

स्कॉट ने अपने मूल डेमो में यह भी बताया कि सेटिंग:

animation-iteration-count: 1; animation-fill-mode: both;

कुछ "ओवरशूट" अजीबता के लिए जिम्मेदार है और मैं यह देख सकता हूं कि मैंने इसे भी देखा है, विशेष रूप से छोटे दर्शकों पर, इसलिए यह भी स्थापित करने के लायक है।

स्कॉट ने स्क्रॉल-संबंधित एनीमेशन गुणों को भी :root ()स्वयं पर सेट किया, जिसका अर्थ है कि यह पृष्ठ पर सभी एनिमेशन को एक बार में नियंत्रित कर सकता है। यहाँ उनका डेमो है जो एक साथ तीन एनिमेशन को नियंत्रित करता है: