The typing effect uses pure HTML + Javascript. This means it's safe to use in websites. Both your website users and search engines can still see the full content. There is no antiquated Flash or Silverlight used to power the effect, so it works well in all newer web browsers and devices.

TypingText can be used in conjunction with many other stacks. For example, some users have combined TypingText with Appender to create an alert message bar at the top of webpages. Simple text formatting and things like headings and links are also supported by this stack.

Example

This is some example content setup inside TypingText stacks. The shadow box effect is created using the free Shady stack.

Hello World!

This is some typing text! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nulla lorem. Fusce dapibus libero est, a blandit mauris facilisis sit amet. Cras tincidunt ornare leo, egestas sodales ipsum faucibus quis. In tempus, ligula ut varius maximus, justo nisi accumsan velit, eget placerat nulla turpis a justo. Vivamus vulputate turpis velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In accumsan est nec nisl cursus consequat.|
 
Obviously, it is wise to only use the TypingText stack in limited amounts. Headings and short paragraphs of important content work best. It would be less appreciated by your website users if you converted all content into TypingText!

Setup

Follow these steps to setup TourGuide:
  1. Once installed into Stacks and RapidWeaver, open your Stacks Library. Search for 'TypingText'.
  2. Drag and drop a copy of the stack into the page.
  3. With the stack selected in edit mode, customise your settings, such as the content type.
  4. Double-click on the sample content shown, to edit or replace it with your own.
  5. If pasting content from another source, always paste as 'plain text' to avoid contaminating your text with hidden formatting.
  6. Preview the page to check the the effect is running correctly. Save changes. Export or publish the page when done.

Adding a blinking cursor

To add a blinking cursor at the end of a sentence of text, type this HTML code:

<span class="blinking-cursor">|</span>

This is a 'pipe' character, wrapped inside <span> tags, with a class of blinking-cursor applied. This corresponds to the CSS code inside TypingText, that will animate the vertical pipe character like a computer cursor. Similar code can be used if you want to make the cursor italicised: 

<i class="blinking-cursor">|</i>

Or bold:

<strong class="blinking-cursor">|</strong>

Using custom CSS code

CSS is the universal code language used for styling things on the internet. TypingText already provides a couple of basic style and sizing options for your content. More things are feasible using custom CSS code. You can target the typing_text class selector with extra styling, like this:

.typing_text {
    color: red;
}

In this example, all the text inside TypingText will change to red. There are potentially thousands of other style changes you can make using this same technique. Enter custom CSS code in the RapidWeaver Page Inspector box.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.