Close Menu

ghosttyping

Overview

Ghosttyping is a powerful text animation library that allows you to create captivating typewriter-like effects on your web pages. Whether you want to add some pizzazz to your headlines, titles, or any other text element, Ghosttyping makes it easy and hassle-free.

Features

  • Easy to use and integrate into your website
  • Customizable speed and delay options
  • Supports multiple lines of text
  • Smooth and fluid animation
  • Compatible with all major web browsers

Installation

To install Ghosttyping, follow these simple steps:

  1. Download the Ghosttyping library files from the official GitHub repository.
  2. Extract the downloaded files to your project directory.
  3. Include the Ghosttyping CSS file in the head section of your HTML document:
    <link rel="stylesheet" href="path/to/ghosttyping.css">
  4. Include the Ghosttyping JavaScript file just before the closing body tag of your HTML document:
    <script src="path/to/ghosttyping.js"></script>

Usage

To create a ghosttyping animation, you need to add the appropriate HTML markup and class names to your text element. For example, to animate a heading, you would do the following:

<h1 class="ghosttyping">This is a ghosttyping animation</h1>

Options

Ghosttyping provides a range of options to customize the animation. You can specify these options using data attributes on your HTML elements.

speed

The speed option determines how fast the typing animation occurs. It is specified in milliseconds. For example, to set the typing speed to 50 milliseconds per character, use the following data attribute:

<h1 class="ghosttyping" data-speed="50">This is a ghosttyping animation</h1>

delay

The delay option determines the delay before the typing animation starts. It is specified in milliseconds. For example, to add a delay of 1000 milliseconds before the typing animation starts, use the following data attribute:

<h1 class="ghosttyping" data-delay="1000">This is a ghosttyping animation</h1>

Examples

Here are some examples of how you can use Ghosttyping to enhance your website:

<h1 class="ghosttyping" data-speed="80">Welcome to our website</h1>
<p class="ghosttyping" data-speed="40" data-delay="500">Explore our wide range of products and services</p>

License

Ghosttyping is released under the MIT License. You can find more information in the LICENSE file.