CSS magic: Text animation letter by letter

Question

CSS magic: Text animation letter by letter

I have a <div> with text.

<div> to be revealed on the page one character at a time:

<div>, the animation should stop and display the full text instantly.

In summary, I aim to replicate an effect commonly seen in Japanese-style adventure games known as a typewriter or teletype effect. A good example can be viewed here: 

http://www.youtube.com/watch?feature=player_detailpage&v=SasgN0lim7M#t=418

While I could achieve this animation using JavaScript by setting up a timer to append letters (or words) sequentially, I am curious if it's possible to accomplish the same effect with CSS in modern browsers. Modifying the element class in the onclick function with JavaScript would also be acceptable.

Update: To clarify the difference between characters and letters and address concerns about HTML entities:

The text contains several HTML elements, such as:

Lo&shy;rem <i>ip&shy;sum</i>.


A straightforward method of adding text character-by-character to the innerHTML wouldn't work as expected:

L

Lo

Lo&

...Oops!

javascript html css animation

Answer 1

Answer №1

To accomplish this task, jQuery can be utilized effectively.

Take a look at my interactive example: http://jsfiddle.net/kA8G8/7/

Below is the HTML code snippet:

<p class="typewriter">Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

And here we have the corresponding JavaScript code:

var text = $('.typewriter').text();

var length = text.length;
var timeOut;
var character = 0;

(function typeWriter() { 
    timeOut = setTimeout(function() {
        character++;
        var type = text.substring(0, character);
        $('.typewriter').text(type);
        typeWriter();

        if (character == length) {
             clearTimeout(timeOut);
        }
    }, 150);
}());

Answer 2

To accomplish this task, jQuery can be utilized effectively.

Take a look at my interactive example: http://jsfiddle.net/kA8G8/7/

Below is the HTML code snippet:

<p class="typewriter">Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

And here we have the corresponding JavaScript code:

var text = $('.typewriter').text();

var length = text.length;
var timeOut;
var character = 0;

(function typeWriter() { 
    timeOut = setTimeout(function() {
        character++;
        var type = text.substring(0, character);
        $('.typewriter').text(type);
        typeWriter();

        if (character == length) {
             clearTimeout(timeOut);
        }
    }, 150);
}());

Answer 3

Answer №2

Regrettably, accomplishing this with CSS is not possible, requiring a return to a pure JS approach.

Based on your comments, incorporating HTML markup into your text necessitates a word-by-word animation as the simplest solution. Consider implementing code similar to this:

var timer, fullText, currentOffset, onComplete, wordSet;

function Speak(person, text, callback) {
    $("#name").html(person);
    fullText = text;
    wordSet = text.split(" ");
    currentOffset = 0;
    onComplete = callback;
    timer = setInterval(onTick, 300);
}

function onTick() {
    currentOffset++;
    if (currentOffset == wordSet.length) {
        complete();
        return;
    }
    var text = "";
    for(var i = 0; i < currentOffset; i++){
     text += wordSet[i] + " ";   
    }
    text.trim();
    $("#message").html(text);
}

function complete() {
    clearInterval(timer);
    timer = null;
    $("#message").html(fullText);
    if (onComplete) onComplete();
}

$(".box").click(function () {
    complete();
});

Speak("Simon",
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",

function () {
    setTimeout(function () {
        Speak("Javascript", "Simon has finished speaking!");
    }, 2000);
});

An interactive example can be found here

NOTE: While there may be room for optimization and streamlining in the code provided, it effectively illustrates the intended concept.

I have also developed a letter-by-letter demonstration. Though lacking support for HTML markup, it offers a visually appealing alternative that could potentially be adapted to suit your requirements.

Answer 4

Regrettably, accomplishing this with CSS is not possible, requiring a return to a pure JS approach.

Based on your comments, incorporating HTML markup into your text necessitates a word-by-word animation as the simplest solution. Consider implementing code similar to this:

var timer, fullText, currentOffset, onComplete, wordSet;

function Speak(person, text, callback) {
    $("#name").html(person);
    fullText = text;
    wordSet = text.split(" ");
    currentOffset = 0;
    onComplete = callback;
    timer = setInterval(onTick, 300);
}

function onTick() {
    currentOffset++;
    if (currentOffset == wordSet.length) {
        complete();
        return;
    }
    var text = "";
    for(var i = 0; i < currentOffset; i++){
     text += wordSet[i] + " ";   
    }
    text.trim();
    $("#message").html(text);
}

function complete() {
    clearInterval(timer);
    timer = null;
    $("#message").html(fullText);
    if (onComplete) onComplete();
}

$(".box").click(function () {
    complete();
});

Speak("Simon",
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",

function () {
    setTimeout(function () {
        Speak("Javascript", "Simon has finished speaking!");
    }, 2000);
});

An interactive example can be found here

NOTE: While there may be room for optimization and streamlining in the code provided, it effectively illustrates the intended concept.

I have also developed a letter-by-letter demonstration. Though lacking support for HTML markup, it offers a visually appealing alternative that could potentially be adapted to suit your requirements.

Answer 5

Answer №3

Here's a clever CSS technique you can use.

Create a mask element, such as a pseudo-element like p:before or p:after, with a higher z-index than your text element. Make sure it has the same color as the text background and is the height of a line. Position it absolutely just above the text.

Then, animate the mask element to move to the right, revealing one letter at a time. This is a workaround solution, especially if there is a complex background under the text, such as an image, as reproducing this trick may be challenging due to having to align the background image with the masking element.

Answer 6

Here's a clever CSS technique you can use.

Create a mask element, such as a pseudo-element like p:before or p:after, with a higher z-index than your text element. Make sure it has the same color as the text background and is the height of a line. Position it absolutely just above the text.

Then, animate the mask element to move to the right, revealing one letter at a time. This is a workaround solution, especially if there is a complex background under the text, such as an image, as reproducing this trick may be challenging due to having to align the background image with the masking element.

Answer 7

Answer №4

Although this may seem off-topic, I have a fondness for animations and decided to develop a tool for them:

Feel free to check it out!

Answer 8

Although this may seem off-topic, I have a fondness for animations and decided to develop a tool for them:

Feel free to check it out!

CSS magic: Text animation letter by letter

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for incorporating Javascript Object Literals into Python code

Verify the validity of the user's input

The line-height property does not appear to have any effect when used within a table cell

What is the best way to obtain a user's ID on the server side?

Using JQuery to implement a date and time picker requires setting the default time based on the server's PHP settings

Responsive columns and fluid Flex row implemented in Bootstrap 4

Tips for adding a button to the SB Admin 2 Card header without altering its height

The variables $invalid and $valid in my AngularJS form have not been assigned any values

The information from the form is not appearing in the req.body

How to stop the overflow scrollbar in a grandchild element with CSS grid

Expanding the input range slider to fill the entire available space

I'm having trouble finding a solution to remove the white space

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Dynamically and asynchronously loading numerous LinkedIn share buttons on a page

Eliminate the flickering effect on the dropdown menu

The default choice vanishes once a non-empty option is chosen

Utilizing a specialized xyz tileLayer to specifically highlight a designated area on the map

Align button text vertically in the middle using Flexbox with Bootstrap 4

Navigating the elements within R Shiny: A comprehensive guide

Implementing AngularJS within a standalone system devoid of internet connectivity