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

Category: Animation , Javascript | November 27, 2018
Author:colealanroberts
Views Total:480 views
Official Page:Go to website
Last Update:November 27, 2018
License:MIT

Preview:

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

Description:

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
});

You Might Be Interested In:


Leave a Reply