यह कोडपेन स्टेन हाउगार्ड के काम से प्रेरित है

तैयारी

आइए एनीमेशन के विभिन्न कार्यान्वयन के लिए दो कंटेनर बनाएं:

 
Animated text
  



 
Click on me!
  

मैंने एडोब इलस्ट्रेटर का उपयोग करके एसवीजी बनाया है, इसकी मुख्य विशेषता छोटी ऊंचाई और बड़ी चौड़ाई होनी चाहिए।
यह उल्लेख करना महत्वपूर्ण है कि svg एक हेडर तत्व का बच्चा है क्योंकि हम svg को इसके सापेक्ष स्थित करेंगे।

सीएसएस

हर चीज़ को केंद्र में सुंदर ढंग से रखने के लिए हम अपने कंटेनरों को फ्लेक्सबॉक्स में बदल देते हैं।

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

इनलाइन का उपयोग इसकी सामग्री में तत्व की चौड़ाई को कम करने के लिए किया जाता है क्योंकि एसवीजी इस पर निर्भर करेगा

इसके बाद, हमें हेडर के सापेक्ष एसवीजी को स्थान देना चाहिए:

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

हम सापेक्ष तत्व को मूल तत्व के केंद्र में रखने के लिए मानक विधि का उपयोग करते हैं। पाठ में svg को समायोजित करने के लिए, हमें न्यूनतम-चौड़ाई और न्यूनतम-ऊंचाई लागू करनी चाहिए।

जावास्क्रिप्ट के साथ एनिमेशन तर्क

जावास्क्रिप्ट में तत्वों को एनिमेट करने के लिए हम अद्भुत एनिमेट (कीफ्रेम, विकल्प) विधि का उपयोग कर सकते हैं।

मुख्य-फ़्रेम

आइए getDrawingParameters फ़ंक्शन का विश्लेषण करें, जो गुणों को पुनरावृत्त करने के लिए देता है:

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

सबसे पहले, हमें svg विधि का उपयोग करके यह जानना होगा कि हमारा पथ वास्तव में कितना लंबा है getTotalLength:

const length = path.getTotalLength();

अब, हमें ड्राइंग का अनुकरण करने के लिए अपनी गणना की गई लंबाई का उपयोग करना चाहिए। आइए अपने शुरुआती बिंदु को परिभाषित करें। हमें विशेषता की आवश्यकता है strokeDasharray:

path.style.strokeDasharray = length;

यहां, हम इस विशेषता को एक डैश (आकार=लंबाई) और एक अंतराल (आकार=लंबाई) के विकल्प के साथ पथ बनाने के लिए कहते हैं।

अगली विशेषता, जहां हमें लंबाई की आवश्यकता है वह है stroke-dashoffset:

path.style.strokeDashoffset = length;

यह मान बताता है कि डैश सरणी गणना लंबाई मान द्वारा खींची गई है। और चूँकि, हमने अपना डैश ऐरे 'डैश-लेंथ गैप-लेंथ डैश-लेंथ गैप-लेंथ...' पर सेट किया है, प्रारंभिक पथ खाली (गैप) होगा।

इसलिए, हम अपने पुनरावर्तनीय गुणों को सरणी में परिभाषित करते हैं:

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

हम सापेक्ष समय को परिभाषित करने के लिए ऑफसेट का उपयोग करते हैं जिस पर इस संपत्ति तक पहुंचा जाना चाहिए। इसे प्रत्येक पुनरावृत्ति में विलंब का अनुकरण करने के लिए बनाया गया था।

विकल्प

चेतन विधि का दूसरा तर्क विकल्प है:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

हमने अपने एनीमेशन को अनंत पुनरावृत्तियों और 10 सेकंड की अवधि पर सेट किया है। ऑफसेट याद है? हमारा "सक्रिय" एनीमेशन केवल 1.5 सेकंड लेता है।