Classes

Splash

Abstract class representing a splash screen animation.

Typedefs

animator : object

SVGAnimation : object

styler : object

FancyAnimation : object

Splash

Abstract class representing a splash screen animation.

Kind: global class
Link: https://github.com/koffiisen/js-splash
Version: 2.0
Author: Koffi Joel ONIPOH [email protected]
Copyright: © 2019-2020

• Splash
  • new Splash(style, anim_options)
  • .fromText(text, duration, option)
  • .fromHtml(html, duration, option)
  • .fromImage(image, duration, option)
  • .fromCustomNode(node, duration, option)
  • .fromCSSAnimation(css_file, html, remove_css, duration)
  • .indeterminateLoad(splash, callback) ⇒ function
  • .fromAnimation(animation, animation_time, options)

new Splash(style, anim_options)

Param	Type
style	styler
anim_options	animator

Example (Get started - Create instance example)

// Instance
var splash = new Splash()

Example

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

splash.fromText(text, duration, option)

Kind: instance method of Splash

Param	Type
text	String
duration	Number
option	Object

Example

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

Example

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

splash.fromHtml(html, duration, option)

Kind: instance method of Splash
Link: https://codepen.io/koffiisen/pen/YzPZpBx

Param	Type
html	String
duration	Number
option	Object

Example

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

Example

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

splash.fromImage(image, duration, option)

Kind: instance method of Splash
Link: https://codepen.io/koffiisen/pen/xxbqgbg

Param	Type
image	String
duration	Number
option	Object

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

splash.fromCustomNode(node, duration, option)

Kind: instance method of Splash
Link: https://codepen.io/koffiisen/pen/PowpWqd

Param	Type	Description
node	Node	=> Ex: document.createElement('div');
duration	Number
option	Object

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

splash.fromCSSAnimation(css_file, html, remove_css, duration)

#codepen = https://codepen.io/koffiisen/pen/wvBJgKR

Kind: instance method of Splash
Link: https://codepen.io/koffiisen/pen/wvBJgKR

Param	Type
css_file	String
html	String
remove_css	boolean
duration	number

Example

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

splash.indeterminateLoad(splash, callback) ⇒ function

Kind: instance method of Splash
Returns: function - - to stop animation
Link: https://codepen.io/koffiisen/pen/OJPpWMa

Param	Type
splash	function
callback	function

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

splash.fromAnimation(animation, animation_time, options)

Kind: instance method of Splash
Since: 2.0

Param	Type
animation	SVGAnimation
animation_time	Number
options	styler

Example (Pre build svg animation from {@link SVGAnimation} )

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

animator : object

Kind: global typedef
Properties

Name	Type	Description
use	boolean	Indicate if use animation (default: true)
start	FancyAnimation	started animation (default: FancyAnimation.moveIn)
end	FancyAnimation	ending animation (default: FancyAnimation.rubberBand)
duration	Number	(default: 900)

SVGAnimation : object

Kind: global typedef
Properties

Name	Type
FillRotate	string
SemiRotate	string
Rotate	string
TopBar	string
CenterBar	string
Dalton	string
Flag	string
Bolt	string
Orbit	string

• SVGAnimation : object
  • .FillRotate() ⇒ string
  • .SemiRotate() ⇒ string
  • .Rotate() ⇒ string
  • .TopBar() ⇒ string
  • .CenterBar() ⇒ string
  • .Dalton() ⇒ string
  • .Flag() ⇒ string
  • .Bolt() ⇒ string
  • .Orbit() ⇒ string

SVGAnimation.FillRotate() ⇒ string

Kind: static method of SVGAnimation

SVGAnimation.SemiRotate() ⇒ string

Kind: static method of SVGAnimation

SVGAnimation.Rotate() ⇒ string

Kind: static method of SVGAnimation

SVGAnimation.TopBar() ⇒ string

Kind: static method of SVGAnimation

SVGAnimation.CenterBar() ⇒ string

Kind: static method of SVGAnimation

SVGAnimation.Dalton() ⇒ string

Kind: static method of SVGAnimation

SVGAnimation.Flag() ⇒ string

Kind: static method of SVGAnimation

SVGAnimation.Bolt() ⇒ string

Kind: static method of SVGAnimation

SVGAnimation.Orbit() ⇒ string

Kind: static method of SVGAnimation

styler : object

Kind: global typedef
Properties

Name	Type	Description
background	string
opacity	Number	(default: 1.0)
width	string	(default: "100%")
height	string	(default: "100%")
color	string

FancyAnimation : object

Kind: global typedef
Properties

Name	Type	Description
rollOutRight:	string	"rollOutRight.
rollOutLeft:	string	"rollOutLeft",
rubberBand:	string	"rubberBand",
zoomOut:	string	"zoomOut",
zoomIn:	string	"zoomIn",
fadeOut:	string	"fadeOut",
fadeOutRight:	string	"fadeOutRight",
fadeOutLeft:	string	"fadeOutLeft",
fadeOutTop:	string	"fadeOutTop",
fadeOutBottom:	string	"fadeOutBottom",
horizontalFlip:	string	"horizontalFlip",
verticalFlip:	string	"verticalFlip",
bounceOutBottom:	string	"bounceOutBottom",
bounceOutTop:	string	"bounceOutTop",
bounceOutLeft:	string	"bounceOutLeft",
bounceOutRight:	string	"bounceOutRight",
rotateClockwise:	string	"rotateClockwise",
rotateAntiClockwise:	string	"rotateAntiClockwise",
tada:	string	"tada",
moveIn:	string	"moveIn",
moveOut:	string	"moveOut",
swing:	string	"swing",
shake:	string	"shake",
hinge:	string	"hinge"