Splash Screen:

It is the very first appearance or impression that you often see when you click on any application.

“First impression can be the last impression” so you have to very careful while deciding your splash screen.

It can be a text with an image or text without an image, depends on requirements.

You can use it to promote your brand icon and brand name.

You can use it for hiding some background operations like loading data from a database or any other network related processes.

It is also known as a welcome screen, you can use it to illustrate the features of your application.

Download script   

Why should you have Splash Screen in your PhoneGap App?

Most of the time you do need splash screen in your application because of the following reasons:

It is always a front page that does not provide the actual content, it provides a brief
information to the visitors for what the application is about.

It is also used as a candyfloss for impressing the potential clients by the designers.

Companies prefer to make use of them to grab users’ attention to their latest products.

Disclaimers or warnings, it does not allow unauthorized content such as advertising, or gambling (as per law).

Grabbing the visitor attention for an important message, approaching deadline, critical update, latest release, news, slogan etc.

Select options facility to the visitor(country wise or city wise), it direct users to the appropriate version of the site.

Get the splash screen in your PhoneGap app:

In this section, I will cover up a complete technical stuff essential for making a splash screen in just a few simple steps.

Before you start making splash screen, you just need to make the following setup:

You should know how to install PhoneGap.

you should know how to create, run and build a PhoneGap application.

If you already know these stuff it is well & good.

if you don’t have any idea then…

…just check the following links listed below: 

Now, you are ready for building you first mobile application as “PhoneGap Splash Screen”.

cordova splash-phonegap directory structure

After successful installation of PhoneGap, you will see the similar folder-file hierarchy. it may vary a little as per PhoneGap version.

Make two new files style.css and myjs.js  in their respective CSS and JS folder.

Simply copy this code index.html in the index.html file , myjs.js in the myjs.js file and style.css in the style.css file.

Now, run the project and copy the IP address on the browser you will get your splash screen ready.

Here, you will get the complete code for Splash Screen.

index.html

In this page we are having two main div one for splash and one for content.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<title>PhoneGap Splash Screen</title>
</head>
<body>
<div id="splash"><h1 id ="hideme">splash screen<h1></div>
<section id="content"><p>Hello! Welcome to PhoneGap. Here you will learn how to build a mobile application.</p><section>
<script type="text/javascript" src="js/myjs.js"></script>
</body>
</html>

myjs.js

Here you will get reqired jquery code which will be used to generate the splash.

var content = $('#content');
function resetStyles() {
content.attr('style','').removeAttr('style');
}
function applyStyles() {
content.css({
opacity : 1,
transform: 'scale(1.0,1.0)',
WebkitTransform: 'scale(1.0,1.0)',
transition : 'transform 0.4s ease-in-out, opacity 0.4s ease-in-out',
WebkitTransition : '-webkit-transform 0.4s ease-in-out, opacity 0.4s ease-in-out'
});
}
applyStyles();
setInterval(function(){|
resetStyles();
setTimeout(function(){
applyStyles();
},1000)
},3000);

style.css

It will help you in changing the screen appearances. you can alter it according to your reqirements.

html,
body {
display: block;
font-family: Arial;
height: 100%;
margin: 0;
text-align: center;
text-transform: uppercase;
}
#splash,
#content {
display: table;
height: 100%;
width: 100%;
}
#content p {
display: table-cell;
vertical-align: middle;
font-size:50px !important;
font-family: 'Nunito', sans-serif;
margin-top:35% !important;
word-wrap: break-word;
}
/***This code is used for sowing the splash for 5 second over the content div****/
#splash {
background:#0080ff;
position : fixed;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#splash h1
{
font-size:50px !important;
font-family: 'Nunito', sans-serif;
text-align:center;
margin-top:25%;
color:white;
}
/****This code is used for hiding the h1 of splash div*****/
#hideme {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#content
{
font-size:50px;
width:100%;
height:100%;
background-color:gray;
}
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
@keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
@-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}

Conclusion:

Now, you have learned to make a splash screen. you can design attractive and informational splash screen which will help you to increase the popularity of your application. I will be updating you regarding same so keep reading the blogs. Don’t forget to provide your valuable feedbacks.

Get more related information here –

Related Posts:

PhoneGap GPS / PhoneGap Geolocation Plugin
PhoneGap Configuration File : Config.xml
PhoneGap Plugin Apis' And Events