स्प्लिट टेक्स्ट ऐनिमेशन बनाना

स्प्लिट लेटर और शब्दों वाले ऐनिमेशन बनाने के तरीके के बारे में बुनियादी जानकारी.

Adam Argyle

इस पोस्ट में, मुझे स्प्लिट टेक्स्ट ऐनिमेशन की मदद से समस्याओं को हल करने के बारे में ऐसे इंटरैक्शन जो बहुत कम हैं, जिन्हें आसानी से ऐक्सेस किया जा सकता है, और जो सभी ब्राउज़र पर काम करते हैं. डेमो आज़माएं.

अगर आपको वीडियो देखना है, तो इस पोस्ट का YouTube वर्शन यहां देखें:

खास जानकारी

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

यहां वर्कफ़्लो और नतीजों की खास जानकारी दी गई है:

1. कम मोशन की सुविधा तैयार करें सीएसएस और JS के लिए वैरिएबल.
2. इसमें विभाजित टेक्स्ट सुविधाएं तैयार करें JavaScript.
3. पेज पर शर्तें और काम की चीज़ें व्यवस्थित करें लोड होता है.
4. सीएसएस ट्रांज़िशन और ऐनिमेशन लिखना अक्षरों और शब्दों के लिए (मूल भाग!).

यहां शर्तों के साथ लागू होने वाले नतीजों की झलक दी गई है:

अगर कोई उपयोगकर्ता कम मोशन को पसंद करता है, तो हम एचटीएमएल दस्तावेज़ को अकेला छोड़ देते हैं. ऐनिमेशन. अगर मोशन ठीक है, तो हम इसे टुकड़ों में काटते हैं. यहाँ है JavaScript के टेक्स्ट को अक्षर के हिसाब से बांटने के बाद एचटीएमएल की झलक.

मोशन कंडिशनल तैयार करना

आसानी से उपलब्ध @media (prefers-reduced-motion: reduce) मीडिया क्वेरी का इस्तेमाल सीएसएस और इस प्रोजेक्ट में JavaScript का इस्तेमाल किया गया है. यह मीडिया क्वेरी हमारी मुख्य शर्त है टेक्स्ट को स्प्लिट करने या न करने का फ़ैसला लेने में मदद मिलती है. सीएसएस मीडिया क्वेरी का इस्तेमाल, विज्ञापन को रोकने के लिए किया जाएगा ट्रांज़िशन और ऐनिमेशन के साथ-साथ JavaScript मीडिया क्वेरी का इस्तेमाल इन कामों के लिए किया जाएगा एचटीएमएल में बदलाव न करें.

सीएसएस कंडिशनल तैयार करना

मैंने मीडिया क्वेरी लेवल 5 का सिंटैक्स चालू करने के लिए पोस्टसीएसएस का इस्तेमाल किया है, जहां इसे सेव किया जा सकता है मीडिया क्वेरी बूलियन को वैरिएबल में:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

JS कंडिशनल तैयार करना

JavaScript में, ब्राउज़र उन मीडिया क्वेरी की जांच करने का तरीका उपलब्ध कराता है जिनका इस्तेमाल मैंने बनाना मीडिया क्वेरी की जांच से बूलियन नतीजे को एक्सट्रैक्ट करने और उसका नाम बदलने के लिए:

const {matches:motionOK} = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

इसके बाद, मैं motionOK की जांच कर सकता हूं. हालांकि, दस्तावेज़ को सिर्फ़ तब बदल सकता हूं, जब उपयोगकर्ता ने ऐसा न किया हो हलचल कम करने का अनुरोध किया गया है.

if (motionOK) {
  // document split manipulations
}

मैं PostCSS का इस्तेमाल करके, इसी वैल्यू की जांच करके @nest सिंटैक्स को चालू कर सकता/सकती हूं नेस्टिंग ड्राफ़्ट 1. इससे मुझे ये काम करने में मदद मिलती है ऐनिमेशन के बारे में सभी लॉजिक और इसकी स्टाइल से जुड़ी ज़रूरतों को स्टोर करें, माता-पिता और बच्चे, एक ही जगह पर:

letter-animation {
  @media (--motionOK) {
    /* animation styles */
  }
}

PostCSS कस्टम प्रॉपर्टी और JavaScript बूलियन के साथ, हम इफ़ेक्ट को शर्त के साथ अपग्रेड करना. इस तरह, हमें अगले सेक्शन में ले जाया जाता है, जहां स्ट्रिंग को एलिमेंट में बदलने के लिए, JavaScript को अलग-अलग करें.

टेक्स्ट को स्प्लिट किया जा रहा है

टेक्स्ट अक्षरों, शब्दों, पंक्तियों वगैरह को CSS या JS के साथ अलग-अलग ऐनिमेशन का इस्तेमाल करके नहीं बदला जा सकता. इफ़ेक्ट हासिल करने के लिए, हमें बॉक्स की ज़रूरत होगी. अगर हम हर अक्षर को ऐनिमेट करना चाहें, तो हर अक्षर का कोई एलिमेंट होना चाहिए. अगर हम हर शब्द को ऐनिमेट करना चाहें, तो शब्द का एक तत्व होना चाहिए.

1. स्ट्रिंग को एलिमेंट में बांटने के लिए, JavaScript यूटिलिटी फ़ंक्शन बनाएं
2. इन यूटिलिटी चीज़ों के इस्तेमाल के बारे में जानकारी दें

अक्षरों को अलग करने का यूटिलिटी फ़ंक्शन

शुरुआत करने का एक मज़ेदार स्थान एक ऐसे फ़ंक्शन के साथ है, जो एक स्ट्रिंग लेता है और हर एक कलेक्शन है.

export const byLetter = text =>
  [...text].map(span)

कॉन्टेंट बनाने स्प्रेड ES6 के सिंटैक्स ने वाकई इस काम को तेज़ बनाने में मदद की.

शब्दों को अलग करने का यूटिलिटी फ़ंक्शन

अक्षरों को विभाजित करने की तरह, यह फ़ंक्शन एक स्ट्रिंग लेता है और हर शब्द को नतीजे के तौर पर दिखाता है होता है.

export const byWord = text =>
  text.split(' ').map(span)

कॉन्टेंट बनाने split() तरीका होता है, जिससे हम स्लाइस करने के लिए वर्णों को तय कर सकते हैं. मैंने एक खाली जगह पार की, जो शब्दों के बीच विभाजन का संकेत है.

बॉक्स यूटिलिटी फ़ंक्शन बनाना

इस प्रभाव के लिए, हर अक्षर के लिए बॉक्स ज़रूरी हैं, और हम उन फ़ंक्शन में देखते हैं कि map() को span() फ़ंक्शन के साथ कॉल किया जा रहा है. यहां span() फ़ंक्शन दिया गया है.

const span = (text, index) => {
  const node = document.createElement('span')

  node.textContent = text
  node.style.setProperty('--index', index)

  return node
}

यह ध्यान रखना ज़रूरी है कि --index नाम की कस्टम प्रॉपर्टी को, कलेक्शन की पोज़िशन. अक्षर वाले ऐनिमेशन के लिए बॉक्स होना अच्छी बात है, लेकिन सीएसएस में इस इंडेक्स का इस्तेमाल करना एक छोटी सी बात है, जिसका बहुत बड़ा असर पड़ता है. इतने बड़े पैमाने पर असर डालने वाली चौंका देने वाला. हम स्टेज किए गए ऐनिमेशन के लिए, --index का इस्तेमाल बंद करने के तरीके के तौर पर करेंगे लुक.

उपयोगिता की जानकारी

splitting.js मॉड्यूल पूरा हो गया है:

const span = (text, index) => {
  const node = document.createElement('span')

  node.textContent = text
  node.style.setProperty('--index', index)

  return node
}

export const byLetter = text =>
  [...text].map(span)

export const byWord = text =>
  text.split(' ').map(span)

आगे है, byLetter() और byWord() फ़ंक्शन को इंपोर्ट और इस्तेमाल करना.

स्प्लिट ऑर्कस्ट्रेशन

इस्तेमाल के लिए तैयार सुविधाओं के साथ, इन सभी को एक साथ रखने का मतलब है:

1. तय करना कि किन एलिमेंट को बांटना है
2. उन्हें अलग-अलग करके और टेक्स्ट को एचटीएमएल से बदलना

इसके बाद, सीएसएस, एलिमेंट / बॉक्स को ऐनिमेट करेगी.

एलिमेंट ढूंढना

मैंने एट्रिब्यूट और वैल्यू का इस्तेमाल करके, साथ ही, टेक्स्ट को स्प्लिट करने का तरीका बताएंगे. मुझे जानकारी देने वाले ये विकल्प पसंद आए में बदल दिया जाता है. JavaScript से split-by एट्रिब्यूट का इस्तेमाल किया जाता है. इसकी मदद से, तत्वों पर क्लिक करें और अक्षरों या शब्दों के लिए बॉक्स बनाएं. एट्रिब्यूट टारगेट एलिमेंट के लिए, सीएसएस में letter-animation या word-animation का इस्तेमाल किया गया है और बदलाव और ऐनिमेशन का इस्तेमाल करें.

यहां एचटीएमएल का एक सैंपल दिया गया है, जो दोनों एट्रिब्यूट को दिखाता है:

<h1 split-by="letter" letter-animation="breath">animated letters</h1>
<h1 split-by="word" word-animation="trampoline">hover the words</h1>

JavaScript से एलिमेंट ढूंढना

मैंने एट्रिब्यूट की मौजूदगी के लिए सीएसएस सिलेक्टर सिंटैक्स का इस्तेमाल किया है, ताकि ऐसे एलिमेंट जो अपना टेक्स्ट स्प्लिट करना चाहते हैं:

const splitTargets = document.querySelectorAll('[split-by]')

सीएसएस से एलिमेंट ढूंढना

मैंने सभी अक्षरों वाले ऐनिमेशन देने के लिए, सीएसएस में एट्रिब्यूट मौजूदगी चुनने वाले टूल का भी इस्तेमाल किया है वही बेस स्टाइल. बाद में, हम एट्रिब्यूट की वैल्यू का इस्तेमाल करके, एट्रिब्यूट की वैल्यू के बारे में ज़्यादा सटीक जानकारी देंगे स्टाइल का इस्तेमाल करें.

letter-animation {
  @media (--motionOK) {
    /* animation styles */
  }
}

टेक्स्ट को सही जगह पर स्प्लिट किया जा रहा है

JavaScript में मिलने वाले हर स्प्लिट टारगेट के लिए हम टेक्स्ट को अलग-अलग हिस्सों में बांट देंगे एट्रिब्यूट की वैल्यू के आधार पर और हर स्ट्रिंग को <span> पर मैप करें. हम यह कर सकते हैं: फिर, एलिमेंट के टेक्स्ट को हमारे बनाए गए बॉक्स से बदलें:

splitTargets.forEach(node => {
  const type = node.getAttribute('split-by')
  let nodes = null

  if (type === 'letter') {
    nodes = byLetter(node.innerText)
  }
  else if (type === 'word') {
    nodes = byWord(node.innerText)
  }

  if (nodes) {
    node.firstChild.replaceWith(...nodes)
  }
})

आयोजन का निष्कर्ष

index.js पूरा हो चुका है:

import {byLetter, byWord} from './splitting.js'

const {matches:motionOK} = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

if (motionOK) {
  const splitTargets = document.querySelectorAll('[split-by]')

  splitTargets.forEach(node => {
    const type = node.getAttribute('split-by')
    let nodes = null

    if (type === 'letter')
      nodes = byLetter(node.innerText)
    else if (type === 'word')
      nodes = byWord(node.innerText)

    if (nodes)
      node.firstChild.replaceWith(...nodes)
  })
}

JavaScript को इस अंग्रेज़ी में पढ़ा जा सकता है:

1. कुछ हेल्पर यूटिलिटी फ़ंक्शन इंपोर्ट करें.
2. अगर कुछ नहीं करना है, तो देखें कि इस उपयोगकर्ता के लिए मोशन ठीक है या नहीं.
3. हर उस एलिमेंट के लिए जो अलग करना चाहता है.
   1. उन्हें इस आधार पर बांटें कि वे कैसे बांटना चाहते हैं.
   2. टेक्स्ट को एलिमेंट से बदलें.

ऐनिमेशन और ट्रांज़िशन को बांटें

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

आप इससे क्या-क्या कर सकते हैं, यह दिखाने का समय आ गया है! मैं सीएसएस से चलने वाले चार ऐनिमेशन और शेयर करूँगा ट्रांज़िशन हैं. 🤓

अक्षरों को स्प्लिट करें

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

[letter-animation] > span {
  display: inline-block;
  white-space: break-spaces;
}

व्हाइट स्पेस स्टाइल ज़रूरी है, ताकि वे स्पैन जो सिर्फ़ एक स्पेस हों, उन्हें लेआउट इंजन की मदद से छोटा नहीं किया जाता. अब आ गया है शानदार मज़ेदार चीज़ों के बारे में.

ट्रांज़िशन स्प्लिट अक्षर का उदाहरण

इस उदाहरण में, स्प्लिट टेक्स्ट इफ़ेक्ट में सीएसएस ट्रांज़िशन का इस्तेमाल किया गया है. ट्रांज़िशन के साथ इंजन को इनके बीच ऐनिमेट करने के लिए स्टेट की ज़रूरत पड़ती है और मैंने तीन स्थितियां चुनी: नहीं कर्सर घुमाना, वाक्य में कर्सर घुमाना, किसी अक्षर पर कर्सर घुमाना.

जब उपयोगकर्ता कंटेनर यानी कंटेनर पर कर्सर घुमाता है, तो जैसे कि उपयोगकर्ता ने उन्हें दूर भगा दिया हो. इसके बाद, जब उपयोगकर्ता किसी पत्र, मैं इसे आगे लाने की कोशिश कर रहा हूं.

@media (--motionOK) {
  [letter-animation="hover"] {
    &:hover > span {
      transform: scale(.75);
    }

    & > span {
      transition: transform .3s ease;
      cursor: pointer;

      &:hover {
        transform: scale(1.25);
      }
    }
  }
}

बंटे हुए अक्षरों में बदलाव करने का उदाहरण

इस उदाहरण में पहले से तय @keyframe ऐनिमेशन का इस्तेमाल करके, हर ऐनिमेशन को असीमित तौर पर ऐनिमेट किया गया है लेटर का इस्तेमाल करता है. साथ ही, स्टैग करने के लिए इनलाइन कस्टम प्रॉपर्टी इंडेक्स का इस्तेमाल करता है इफ़ेक्ट.

@media (--motionOK) {
  [letter-animation="breath"] > span {
    animation:
      breath 1200ms ease
      calc(var(--index) * 100 * 1ms)
      infinite alternate;
  }
}

@keyframes breath {
  from {
    animation-timing-function: ease-out;
  }
  to {
    transform: translateY(-5px) scale(1.25);
    text-shadow: 0 0 25px var(--glow-color);
    animation-timing-function: ease-in-out;
  }
}

शब्द स्प्लिट करें

इन उदाहरणों में Flexbox ने यहां मेरे लिए एक कंटेनर टाइप के तौर पर काम किया ch यूनिट का इस्तेमाल एक स्वस्थ गैप लंबाई के तौर पर करके किया है.

word-animation {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1ch;
}

ट्रांज़िशन स्प्लिट शब्दों का उदाहरण

ट्रांज़िशन के इस उदाहरण में, मैंने फिर से कर्सर घुमाया है. क्योंकि इफ़ेक्ट, शुरुआत में के साथ-साथ अगर डिवाइस में होवर करने की क्षमता थी.

@media (hover) {
  [word-animation="hover"] {
    overflow: hidden;
    overflow: clip;

    & > span {
      transition: transform .3s ease;
      cursor: pointer;

      &:not(:hover) {
        transform: translateY(50%);
      }
    }
  }
}

विभाजित शब्दों का उदाहरण ऐनिमेट करें

ऐनिमेशन के इस उदाहरण में, स्टेजर्ड बनाने के लिए मैं सीएसएस @keyframes का फिर से इस्तेमाल करता/करती हूं टेक्स्ट के सामान्य पैराग्राफ़ पर अनंत एनिमेशन.

[word-animation="trampoline"] > span {
  display: inline-block;
  transform: translateY(100%);
  animation:
    trampoline 3s ease
    calc(var(--index) * 150 * 1ms)
    infinite alternate;
}

@keyframes trampoline {
  0% {
    transform: translateY(100%);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
}

नतीजा

अब जब आपको पता है कि मैंने इसे कैसे किया, तो कैसे करेंगे?! 🙂

आइए, हम अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं. एक कोडपेन बनाएं या अपना डेमो होस्ट करें, मुझे इसके साथ ट्वीट करें, और मैं इसे कम्यूनिटी रीमिक्स वाला सेक्शन नीचे दिया गया है.

स्रोत

• GitHub पर 'जीयूआई चैलेंज' का सोर्स
• टेक्स्ट को अलग करने के लिए कोडपेन स्टार्टर

ज़्यादा डेमो और प्रेरणा

• कोडपेन के कलेक्शन को अलग-अलग करना
• Splitting.js

कम्यूनिटी रीमिक्स

• CodeSandbox पर gnehcwu के ज़रिए <text-hover> वेब कॉम्पोनेंट