टाइपिंग एनिमेटेड टेक्स्ट

Question

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

Answer 1

बस एक सरल दृष्टिकोण:

$("[data-typer]").attr("data-typer", function(i, txt) { 
 

 
    var $typer = $(this), 
 
    tot = txt.length, 
 
    pauseMax = 300, 
 
    pauseMin = 60, 
 
    ch = 0; 
 

 
    (function typeIt() { 
 
    if (ch > tot) return; 
 
    $typer.text(txt.substring(0, ch++)); 
 
    setTimeout(typeIt, ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin)); 
 
    }()); 
 

 
});

/* PULSATING CARET */ 
 
[data-typer]:after { 
 
    content:""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width:1px; 
 
    height:1em; 
 
    background: #000; 
 
      animation: caretPulsate 1s linear infinite; 
 
    -webkit-animation: caretPulsate 1s linear infinite; 
 
} 
 
@keyframes caretPulsate { 
 
    0% {opacity:1;} 
 
    50% {opacity:1;} 
 
    60% {opacity:0;} 
 
    100% {opacity:0;} 
 
} 
 
@-webkit-keyframes caretPulsate { 
 
    0% {opacity:1;} 
 
    50% {opacity:1;} 
 
    60% {opacity:0;} 
 
    100% {opacity:0;} 
 
}

<span data-typer="Hi! My name is Al. I will guide you trough the Setup process."></span> 
 
<h3 data-typer="This is another typing animated text"></h3> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

तो मूल रूप से jQuery अपने तत्व के data-text हो जाता है, वर्ण दर वर्ण सम्मिलित करता है, और pulsating "कैरट" एक CSS3 के द्वारा कुछ भी नहीं एनिमेटेड :after है उस स्पैन का तत्व।

यह भी देखें: Generate random number between two numbers in JavaScript

Answer 2

Jquery का टेक्स्ट() विधि आपको तत्व के पाठ को सेट करने देता है।

http://api.jquery.com/text/

आप इस का उपयोग करने के लिए एक पाश में इस बुला, यह सामग्री है कि आप प्रत्येक फ्रेम में देखना चाहते हैं देकर सामग्री चेतन करने में सक्षम होगा।

वर फ्रेम = [ 'T_', 'ty_', 'typ_', 'type_']

// loop over frames ... inner part reads frame and prints it 
// use setInterval, etc. 
$('#my-div').text(frames[i]); 

मैं पाठ तत्वों बंटवारे और वर्ण लेकिन मुझे लगता है जोड़ तोड़ द्वारा और अधिक जटिल कार्य कर लेते हैं आपके मामले में यह अधिक हो जाएगा।