Typewriter – ThemePunch

QUICK TIP

Review the Basic Template Setup for information about how to setup a custom production environment.

To get started with the Typewriter Add-On, first add the "revolutions-addons" folder into your production site:

Next, add the Typewriter stylesheet and script. The script should placed below all other scripts on the page.

<link rel="stylesheet" type="text/css" href="revolution-addons/typewriter/css/typewriter.css" />

<script type="text/javascript" src="revolution-addons/typewriter/js/revolution.addon.typewriter.min.js"></script>

Next, assign a variable to your slider's main settings script, and then call the Typewriter Add-On as shown in the following example.

var slider = jQuery('#rev_slider_1').show().revolution({

    /* **************************** */
    /* REGULAR SLIDER SETTINGS HERE */
    /* **************************** */

});

/*
    Instantiate the Typewriter AddOn
    Args: jQuery reference, slider reference (assigned above)
*/
RsTypewriterAddOn(jQuery, slider);

Finally, add the "data-typewriter" attribute to your text-based Layer.

Text and Line-Breaks Only

Nested HTML is not supported, but <br> tags can be included with your text.

blinking

Activate's the blinking cursor.

blinking_speed

The cursor's blinking speed in milliseconds.

cursor_type

Use "one" for the " _ " character, and "two" for the " | " character.

hide_cursor

Stop/hide the blinking cursor when/if typing completes.

speed

The typing speed in milliseconds.

looped

Continuously repeat the typing sequence(s).

start_delay

A delay in milliseconds before the typing officially begins.

linebreak_delay

A delay in milliseconds each time an included <br> tag is reached.

background

Set to "on" if the Layer includes a background color. Otherwise leave at "off".

word_delay

Activates the word-delay pattern option.

delays

Word delay patterns, written as: "for each x words, delay by x milliseconds".

sequenced

Activates the sequenced lines option.

deletion_delay

A delay in milliseconds before the current line is deleted.

deletion_speed

The deletion speed in milliseconds.

newline_delay

The delay before each new line is typed.

lines

Additional lines of text that will be typed sequentially (set "sequenced" above to off for no sequenced lines).

<div class="tp-caption tp-resizeme Sports-DisplayFat"

     data-x="100"
     data-y="100"
     data-frames='[{"delay": 0, "speed": 300, "frame": "0",
                    "from": "opacity: 0;", "to": "o:1;",
                    "ease": "Power3.easeInOut"},
                   {"delay": "wait", "speed": 300, "frame": "999",
                    "to": "auto: auto;",
                    "ease": "Power3.easeInOut"}]'

    data-typewriter='{

        "blinking": "on",
        "blinking_speed": "500",
        "cursor_type": "one",
        "hide_cursor": "off",

        "speed": "30",
        "looped": "on",
        "start_delay": "1000",

        "linebreak_delay": "60",
        "background": "off"

        "word_delay": "on",
        "delays": "2|250, 4|500",

        "sequenced": "on",
        "deletion_delay": "1000",
        "deletion_speed": "20",
        "newline_delay": "1000",
        "lines": "Line Number Two Text, Line Number Three Text",

    }'

>Line Number One Text</div>