jackyon / SplashScreen

Create splash screen for mobiles

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SplashScreen

> Create splash screen for mobiles

alt tag alt tag

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"
}
  1. only show the bottom logo image.
splashImg: {
    bottom: "image url"
}
  1. 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

About

Create splash screen for mobiles