ReplaceJs

Module for a replaceing word carousel on landingpages

This module is intented to be a small (~7KB) library to add a word carousel on your website which will iterate through the words by replaceing them.

Install

How you'll get it into your application

$ npm install --save replacejs

Setup

The library is developed to work in browsers aswell as a node module. To get it to run in your browser require it via script tag like following.

<script type="text/javascript" src="dist/replace.js"></script>
<script type="text/javascript">var carousel = new Carousel();</script>

For a node module just require like

var Carousel = require('replacejs');
var carousel = new Carousel();

Usage

The API for both is alike and is for example as follows.

carousel
    .add('hello') // add a word
    .add('world') // add another word
    .showFor(3000) // set the time in milliseconds how long a word is shown
    .onUpdate(
        function (partial) {
            console.log(partial);
        }
    ) // set the method to be called on each manipulation (e.g. display code and such things)
    .run(); // start the loop

The timing of every step in the animation is as accurate as possible, but can differ from case to case.

API

• add({string}) - Method to add a new word to the carousel
• showFor({number}) - Method to set the time one word is shown when fully build (Required in milliseconds)
• onUpdate({function}) - Method to add the callback that is called on each manipulation step (e.g. the word hello are five letters so each build step would be one call with the current word partial pushed into the given function)
• run() - Method to trigger the functionality