Noise.js

Make your web pages noised

combination of fadein, chars changing and split rgb effects

Installation

You can install Noise.js via bower

bower install noise.js

Usage examples

var noise = new Noise({ 
        selector: '.first-noise',
        maxOpacityDuration: 150,
        maxCharsChangeDuration: 200,
        maxSplitRGDBDuration: 700,
});
noise.start();

API

var noise = new Noise(            // initialize Noise.js
    {                    
        selector: '.first-noise',     // element selector, that should be 'noised'. Should contaign plain text inside
        maxOpacityDuration: 150,      // max duration of chars 'fadeIn', in frames
        maxCharsChangeDuration: 200,  // max duration chars changing, in frames
        maxSplitRGDBDuration: 700,    // max duration of RGB split effect, in frames
    });
    
noise.start();    // start animation
noise.pause();    // pause animation
noise.resume();   // resume paused animation
noise.stop();     // In 1 second (not immediately!) stopes noise animation. Helpful for animate hover events
noise.noise();    // Helper for Infinity animation. Helpful for animate hover events

Supported events

fadeInFinished         - trigger when fadeIn animation finished
charsChangeFinished    - trigger when chars changing finished
splitRGBFinished       - trigger when RGB split finished

noise.on(
    'charsChangeFinished', // event name
    noise2.start,          // method
    noise2                 // context
);