Faded Text

Letter-by-letter and word-by-word text fade animation.

Table of Contents

• Requirement
• Installation
  • CDN
    • jsDelivr
  • Package manager
    • npm
    • Yarn
• Usage
  • Documentation
  • Example
    • HTML
    • JS
    • Rendering
    • Demo
• Author

Requirement

• Node.js (npm)

Installation

CDN

jsDelivr

https://cdn.jsdelivr.net/npm/faded-text@0.0.13/dist/faded-text.min.js

Package manager

npm

npm i faded-text

Yarn

yarn add faded-text

Usage

Documentation

Function	Description	Arguments
.charFadeIn()	Display the matched elements by fading them to opaque letter-by-character.	textDuration (default: 1000) Type: Integer An integer determining the number of milliseconds the total animation will run.	charDuration (default: 1000) Type: Integer An integer determining the number of milliseconds the character animation will run.	delay (default: 0) Type: Integer An integer indicating the number of milliseconds to delay execution of the animation.
.charFadeOut()	Hide the matched elements by fading them to transparent letter-by-letter.
.wordFadeIn()	Display the matched elements by fading them to opaque word-by-word.		wordDuration (default: 1000) Type: Integer An integer determining the number of milliseconds the word animation will run.
.wordFadeOut()	Hide the matched elements by fading them to transparent word-by-word.

Example

HTML

<div id="idElement">Hello world</div>

JS

import FadedText from 'faded-text';

const FADED_TEXT = new FadedText('idElement');

FADED_TEXT.charFadeIn();

Rendering

Demo

https://knouy.github.io/faded-text

Author

Tanguy Sanquirgo