Ghost

A tiny Javascript library for adding beautiful intro animations to your website.

Example

Installation

To use Ghost download the .zip file and add ghost.css and ghost.js to your HTML document.

Options

Option	Description	Type
selector	The #id or .class-name of an HTML element	String
effect	Either 'reveal' or 'typewriter'	String
text	A string of text you'd like to animate	String
interval	Only applicable to the 'typewriter' effect. Represents the speed each character is "typed"	Int
delay	The delay between adding the appropriate CSS animation	Int
animation	The animation class used in combination with the effect property (see Animations)	String

Usage

To start using Ghost you'll need to create a new instance of the Ghost class with a number of required options

let ghost = new Ghost({ 
    selector: '#example', 
    effect: 'reveal', 
    text: 'Hello, world.', 
    interval: 100, 
    delay: 400, 
    animation: 'slideDown' 
});

ghost.animate();

Animations

Ghost comes with several animations by default.

Value	Description
flipIn	Skews in while moving slightly downwards
slideDown	Slides down on the Y axis
slideUp	Slides up on the Y axis
fadeIn	Fades in with opacity 0 => 1

Contributing

Please create a Pull Request with a semi-detailed explanation of what your proposed change does and how it improves the library. Thanks!

License

WTFPL