Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Jul 2015
    Posts
    1
    Member #
    51309

    Javascript Animate Typing Text

    Hi Guys,

    Just wondering if anyone could help with an issue I am having.

    I have a working "Text Changer" and it works fine. The issue I am having is that I want the changing text to type itself out. Below I have attached a JS fiddle of the working script.

    https://jsfiddle.net/g59phn0b/ - Current Code

    I have also added a link of what I would like the text to do.

    Edit fiddle - JSFiddle - Desired effect

    If anyone can assist, it would be much appreciated.

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Try this:
    Code:
    <h1 class="intro-title">This is some text <span id="changer"></span></h1>
    <script>
        var words = [" changes to this", "changes to that", "changes to there"];
        var changer = document.getElementById("changer");
        var i = 0; 
        var currentLetterCount = 0;
        var speed = 100;
        function _changeText() {
            var currentText = changer.innerText;
            var charCount = words[i].length;
            var currentLetter = words[i].charAt(currentLetterCount);
            if(currentLetter === " "){
                currentLetter = "&nbsp;"
            }
            currentLetterCount++;
            changer.innerHTML = currentText + currentLetter;
            if(currentLetterCount > charCount)  { 
                clearInterval(timerId); 
                currentLetterCount = 0;
                changer.innerHTML = "";
                i++;
                if(i >= 3){ i = 0; }
                timerId = setInterval("_changeText()", speed);
            }
        }
        var timerId = setInterval("_changeText()", speed);    
    </script>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 09:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com