इसलिए मैं पिछले कुछ महीनों से वेब डेवलपमेंट का अभ्यास कर रहा हूं, और मैं पोर्टफोलियो साइट में कुछ फ्लेयर जोड़ने का प्रयास करना चाहता हूं। मेरे पास मेरे नाम के साथ एक हेडर है, और मैं एल (या इस मामले में '|') से निकलने वाले 'बी ई एन' और 'यू एस टी ई डी' को एनिमेट करना चाहता हूं। क्या मुझे इसे कोड के माध्यम से करना चाहिए, या इस तरह के कार्य के लिए कोई मानदंड है?

लोगो जिसे मैं चेतन करना चाहता हूँ

-1
Ben Lusted 21 नवम्बर 2021, 05:12
क्या आप चाहते हैं कि यह टाइपिंग जैसा दिखे, एक बार में एक पूरा चरित्र प्रकट हुआ, या शब्द का एक सहज प्रकटीकरण (बेन के मामले में पीछे की ओर जा रहा है)। और कृपया अपने प्रश्न में अब तक का कोड डालें।
 – 
A Haworth
21 नवम्बर 2021, 12:22
मैं चाहता हूं कि यह बाकी पत्रों का अनावरण करने जैसा सहज हो। मेरे पास अभी केवल एक ही कोड है जो प्रत्येक अक्षर के लिए का एक गुच्छा है। मैं क्षैतिज रूप से आकार को सिकोड़ने के बाद: पहले/: का उपयोग करने के बारे में सोच रहा था। लेकिन मुझे 'एन' के लिए जगह बनाने के लिए वापस स्लाइड करने के लिए 'बी' की जरूरत है।
 – 
Ben Lusted
21 नवम्बर 2021, 12:42
तो आप चाहते हैं कि 'बी' एल के बगल में प्रकट हो, फिर 'बी' बाईं ओर जाने के लिए और 'एल' के बगल में एक 'ई' दिखाई देता है, फिर 'बी' बाईं ओर चलता है और आगे 'एन' दिखाई देता है एल के लिए क्या यह सही है? स्पैन में लपेटना शायद मददगार होने वाला है। कृपया अपना कोड अपने प्रश्न में डालें।
 – 
A Haworth
21 नवम्बर 2021, 12:49

2 जवाब

सबसे बढ़िया उत्तर

ऐसा करने का एक तरीका यह है कि नाम को 3 कॉलम ग्रिड में रखा जाए ताकि 'एल' उसी स्थान पर रहे जहां अन्य आइटम एनिमेट कर रहे हैं।

जैसा कि आप टाइपराइटर प्रभाव के बजाय एक सहज प्रकटीकरण चाहते हैं, प्रत्येक चरित्र को व्यक्तिगत रूप से चेतन करना आवश्यक नहीं है।

यह स्निपेट उन्हें दूसरे तत्व में डालता है और उसे एनिमेट करता है। बाएँ हाथ से एक दाएँ से बाएँ जाता है और दायाँ हाथ एक बाएँ से दाएँ 0 से चौड़ाई बढ़ाकर।

नोट: यह स्निपेट एक तरह से धोखा देता है क्योंकि यह एक मोनोस्पेस फ़ॉन्ट का उपयोग करता है। एक परिवर्तनीय फ़ॉन्ट के लिए आप उसी तकनीक का उपयोग कर सकते हैं लेकिन प्रत्येक कॉलम को कितनी जगह की अनुमति देने के बारे में कुछ निर्णय लेने की आवश्यकता है।

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: 3ch 1ch 5ch;
  font-family: monospace;
  font-size: 4em;
  grid-gap: 0;
}

.reverse {
  text-align: right;
}

.reverse span {
  --w: 3ch;
  right: 0;
}

.forwards span {
  --w: 5ch;
  left: 0;
}

span {
  animation-name: appear;
  animation-duration: 10s;
  animation-iteration-count: 1;
  display: inline-block;
  animation-fill-mode: forwards;
  width: 0;
  opacity: 0;
  overflow: hidden;
  position: relative;
}

@keyframes appear {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: var(--w);
    opacity: 1;
  }
}
<div class="container">
  <div class="reverse">
    <span>ben</span>
  </div>
  <div class="l">L</div>
  <div class="forwards">
    <span>usted</span>
  </div>
<div>
0
A Haworth 21 नवम्बर 2021, 14:38
हम्म, मेरा 'उस्टेड' 'बेन' के समान दिशा में खिसक रहा है। मेरे कोड में कहीं न कहीं एक नियम होना चाहिए।
 – 
Ben Lusted
21 नवम्बर 2021, 22:50
यदि आप कोड स्निपेट को किसी अन्य कोड में ले जाए बिना यहां चलाते हैं तो क्या यह ठीक है?
 – 
A Haworth
21 नवम्बर 2021, 22:51
हां, स्निपेट में सामान्य रूप से काम करता है।
 – 
Ben Lusted
21 नवम्बर 2021, 23:02
आपके सिस्टम में जो समस्या दे रहा है, क्या आप अपने देव उपकरण निरीक्षण सुविधा में देख सकते हैं कि यह देखने के लिए कि सीएसएस को आगे के तत्व पर क्या लागू किया जा रहा है।
 – 
A Haworth
21 नवम्बर 2021, 23:06

आप शायद इसे एनिमेटेड एसवीजी के रूप में कर सकते हैं लेकिन शुद्ध सीएसएस भी काम करता है। स्निपेट देखें।

<html>

<head>
  <style>
    body {
      font-weight: 700;
      background-color: black;
      color: white;
      font-family: sans-serif;
    }

    .name {
      font-size: 65px;
      white-space: nowrap;
      text-align: center;
      max-width: 350px;
      overflow: hidden;
      border-right: 9px solid white;
    }

    .typewriter {
      animation: type 2s steps(15) 1s 1 normal both,
        blink 400ms steps(35) 8 normal both;
    }

    @keyframes blink {
      from {
        border-right-color: white;
      }

      to {
        border-right-color: transparent;
      }
    }

    @keyframes type {
      0% {
        width: 0;
      }

      100% {
        width: 100%;
      }
    }
  </style>
</head>

<body>

  <div class="name typewriter">Ben Usted</div>

</body>

</html>

अगर मैं कुछ बहुत ही ग्राफिकल की तलाश में था तो शायद मैं इसे एडोब एनिमेट या आफ्टर इफेक्ट्स में बनाऊंगा और फिर एनिमेटेड जीआईएफ में बदल दूंगा। लेकिन स्पष्ट रूप से अधिक समय लगेगा।

0
Authentic Science 21 नवम्बर 2021, 08:00