Splash

// Instance
var splash = new Splash()

// Or instance with custom parameter
var splash = new Splash({background: 'rgba(0, 0, 0, 0.7)'}, {
        use: true,
        start: FancyAnimation.moveIn,
        end: FancyAnimation.rubberBand
    });

Methods

fromAnimation(animation, animation_time, options)

Source:

• js-splash-2.0.js, line 356

Since:

• 2.0

Example

Pre build svg animation from SVGAnimation

// sample use
splash.fromAnimation(SVGAnimation.Rotate, 3000, {background: 'transparent'});

Parameters:

fromCSSAnimation(css_file, html, remove_css, duration)

Source:

• js-splash-2.0.js, line 277

Example

splash.fromCSSAnimation("custom-anim.css","<div id="loader-wrapper"><div id="loader"></div></div>");

Parameters:

fromCustomNode(node, duration, option)

Source:

• js-splash-2.0.js, line 262

Example

var custom_node = document.createElement("div");
 custom_node.style.display = 'grid';

 var text = document.createElement("strong");
 text.innerText = "SPLASH";
 text.style.padding = "25px";

 var img = document.createElement("img");
 img.src = "https://s3.amazonaws.com/cdn.wp.m4ecnet/wp-content/uploads/2018/06/05041237/GitHub-logo-2-imagen.jpg";
 Object.assign(img.style, {
                width: '100px',
                height: '100px',
                'border-radius': '50%'
            });

 custom_node.appendChild(img);
 custom_node.appendChild(text);

 splash.fromCustomNode(custom_node, 5000, {
                color: 'red',
                'font-family': 'fantasy'
            });

Parameters:

fromHtml(html, duration, option)

Source:

• js-splash-2.0.js, line 200

Examples

// default call
splash.fromHtml("<h3 style='color: #e0a800'>HTML SPLASH</h3>");

// or with custom parameter
splash.fromText("<h3>HTML SPLASH</h3>", 5000, {
        color: 'red',
        'font-family': 'fantasy'
    })

Parameters:

fromImage(image, duration, option)

Source:

• js-splash-2.0.js, line 222

Example

//=> url | base64 => based on html <img>
splash.fromImage("https://s3.amazonaws.com/cdn.wp.m4ecnet/wp-content/uploads/2018/06/05041237/GitHub-logo-2-imagen.jpg", 5000, {
    width: '130px',
    height: '130px',
    'border-radius': '20%'
    });

Parameters:

fromText(text, duration, option)

Source:

• js-splash-2.0.js, line 176

Examples

// default call
splash.fromText("MY SPLAH SCREEN");

// or with custom parameter
splash.fromText("SPLASH SCREEN", 5000, {
        color: 'red',
        'font-family': 'fantasy'
    })

Parameters:

indeterminateLoad(splash, callback) → {function}

Source:

• js-splash-2.0.js, line 325

Example

var indeterminate = () => {
    //splash.fromText("<h3 style='color: #e0a800'>CUSTOM SPLASH</h3>")
    splash.fromCSSAnimation('custom-anim.css',
        '<div id="loader-wrapper">\n' +
        '     <div id="loader"></div>\n' +
        '</div>', false
    );
};

 splash.indeterminateLoad(indeterminate, function (callback) {
    var stop = callback;
    console.log(self);
    setTimeout(function () {
        console.log("stop execute");
        stop();
    }, 12000);
});

Parameters:

Returns:

Type

function