Slide/Fade/Flip In Text On Page Load – Ghost.js

Ghost.js is a small JavaScript library that reveals or prints any strings with slide/fade/flip animation on page load.

How to use it:

Import the Ghost library’s files into the html document.

<link href="ghost.css" rel="stylesheet">
<script src="ghost.js"></script>

Initialize the Ghost and specify the target container to reveal or print the text.

let ghost = new Ghost({
    selector: '#example'
});

Customize the text to reveal/print on page load.

let ghost = new Ghost({
    selector: '#example',
    text: 'CSSSCRIPT.COM'
});

Set the animation type you want to use.

• flipIn
• slideDown or slideUp
• fadeIn

let ghost = new Ghost({
    selector: '#example',
    text: 'CSSSCRIPT.COM',
    animation: 'slideDown'
});

Set the effect you want to display the text.

• reveal
• typewriter

let ghost = new Ghost({
    selector: '#example',
    text: 'CSSSCRIPT.COM',
    effect: 'reveal'
});

Config the interval & delay in milliseconds.

let ghost = new Ghost({
    selector: '#example',
    text: 'CSSSCRIPT.COM',
    interval: 100,
    delay: 400
});