jackyon / SplashScreen

Create splash screen for mobiles

SplashScreen

> Create splash screen for mobiles

Initialization

Include splash.min.js and splash.min.css in your target html file. ``` <script type="text/javascript" src="splash.min.js"></script> var opts = { countdown: 3, splashLink: "www.google.com", splashImg: { full: "banner.jpg", bottom: "splash-btm.png" } };

splash.init(opts);

```

Advanced usage

``` var opts = { alwaysShow: true, countdown: 3, loading: { color: "#4ecdc4" }, splashLink: "url", splashImg: { full: "image url", bottom: "image url" } } ```

Options

- `alwaysShow`: (default `true`) enable always show the splash screen or not. if set to false, it will only show on the first time.

• countdown: (default "3") the countdown for waiting entering to the application.

• loading.color: (default "#4ecdc4") the color of the spinner loader.

• splashLink (optional): add url for splash screen.

• splashImg : there are three options:

1. only show the full screen image. full image size: 750*1334 (psd: download here)

splashImg: {
    full: "image url"
}

2. only show the bottom logo image.

splashImg: {
    bottom: "image url"
}

3. show both full screen image and bottom logo image. full image size: 750*1088 (psd: download here)

splashImg: {
    full: "image url",
    bottom: "image url"
}

hints: the psd file inclues the photoshop guideline, so you can safe to show the text content in all sizes of the mobile devices.

Methods

hide()

``` splash.hide(); ```

todo list:

• adaptive image support