Ionic login page design with cool image effects

The login page is most important and very first page in many mobile apps. So in this post we are going to create ionic login page design with cool image effects. I am assuming that you have already installed NodeJS and Ionic framework. If not please read this post :  How to install ionic and ionic 2

ionic login screen example

Steps

  1. Make sure you have installed latest NodeJS version.
  2. Run following command to install Cordova and ionic (if not already installed)
    $ npm install -g cordova ionic. 

Demo

I hope you would like to see demo first before start anything 🙂

Download ionic login page code

You can download code here.

After download code make sure you run following commands:


npm install;

bower install

Now we are all set to create this ionic login page with cool image effects. Open your command window and run this command:

 $ ionic start loginApp blank 

Folder Structure

Our folder structure will look like this:

Ionic login page design with cool image effects

  1. Now go to css folder under www folder and replace style.css with this code:
 .welcome-view .top-content {
<pre>height: 40%;
}

.welcome-view .top-content .app-copy {
text-align: center;
padding-top: 10vh;
}

.welcome-view .top-content .app-logo {
font-size: 50px;
font-family: cursive;
font-weight: 600;
font-style: italic;
color: #FFF;
}

.welcome-view .bottom-content {
height: 60%;
}

.welcome-view .bottom-content .facebook-sign-in, .welcome-view .bottom-content .google-sign-in, .welcome-view .bottom-content .twitter-sign-in {
color: #FFF;
font-size: 18px;
font-weight: 500;
}

.welcome-view .bottom-content .facebook-sign-in:before, .welcome-view .bottom-content .google-sign-in:before, .welcome-view .bottom-content .twitter-sign-in:before {
width: 30px;
text-align: center;
font-size: 32px;
}

.welcome-view .bottom-content .facebook-sign-in .btn-copy, .welcome-view .bottom-content .google-sign-in .btn-copy, .welcome-view .bottom-content .twitter-sign-in .btn-copy {
margin-left: -30px;
}

.welcome-view .bottom-content .google-sign-in {
background-color: #dd4c39;
border-color: rgba(220,68,48,.9);
}

.welcome-view .bottom-content .facebook-sign-in {
background-color: #294886;
border-color: rgba(39,68,126,.9);
}

.welcome-view .bottom-content .twitter-sign-in {
background-color: #00a3dc;
border-color: rgba(0,155,210,.9);
}

.welcome-view .bottom-content .split-actions {
padding: 0;
}

.welcome-view .bottom-content .split-actions .col {
padding-top: 0;
padding-bottom: 0;
}

.welcome-view .bottom-content .split-actions .col:first-child {
padding-left: 0;
}

.welcome-view .bottom-content .split-actions .col:last-child {
padding-right: 0;
}

.welcome-view .bottom-content .split-actions .button-outline {
color: #FFF;
border-color: #FFF;
font-weight: 500;
}

.welcome-view .bottom-content .other-options-outer .ng-cloak, .welcome-view .bottom-content .other-options-outer .x-ng-cloak, .welcome-view .bottom-content .other-options-outer [data-ng-cloak], .welcome-view .bottom-content .other-options-outer [ng-cloak], .welcome-view .bottom-content .other-options-outer [ng\:cloak], .welcome-view .bottom-content .other-options-outer [x-ng-cloak] {
display: none !important;
}

.welcome-view .bottom-content .other-options-outer .hidden-actions.ng-hide, .welcome-view .bottom-content .other-options-outer .other-options.ng-hide {
display: none !important;
}

.welcome-view .bottom-content .other-options-outer .hidden-actions.ng-hide-remove.ng-hide-remove-active, .welcome-view .bottom-content .other-options-outer .other-options.ng-hide-add.ng-hide-add-active, .welcome-view .bottom-content .other-options-outer .other-options.ng-hide-remove.ng-hide-remove-active .hidden-actions.ng-hide-add.ng-hide-add-active {
-webkit-transition: all 0s ease;
transition: all 0s ease;
}

.welcome-view .bottom-content .other-options-outer .other-options {
color: #FFF;
}

.welcome-view .bottom-content .legal-notice {
color: #FFF;
margin: 10px 0;
text-align: center;
}

.welcome-view .bottom-content .legal-notice a {
text-decoration: none;
font-weight: 600;
color: #FFF;
}

.bg-image {
height: 100%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

.bg-image .img {
position: absolute;
background-image: url("../img/backgrounds/1.jpg");
background-repeat: no-repeat;
background-size: cover;
transition: opacity 0.5s;
height: 100%;
width: 100%;
}

.bg {
position: absolute;
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
height: 100%;
width: 100%;
z-index: 1;
}

.scroll-content {
z-index: 2;
}
.fadeOut {
opacity: 0;
} 

2. Replace your app.js file with this code:


// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a &lt;body&gt; attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'loginController as vm'
});
$urlRouterProvider.otherwise('/login');
}])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})

3.  Now create file login.controller.js inside www->js->controllers and add following code:


(function () {
'use strict';

function loginController($rootScope, $timeout, $interval) {
var vm = this;
var current_image = 1;
var max_images = 5;

$interval(function () {
jQuery('.bg-image .img').addClass('fadeOut');
if (current_image == max_images) {
current_image = 1;
} else {
current_image += 1;
}
jQuery('.bg-image').css('background-image', jQuery('.bg-image .img').css('backgroundImage'));
$timeout(function () {
var img = jQuery('.bg-image .img').css('backgroundImage', 'url(../img/backgrounds/' + current_image + ".jpg)");
img.removeClass('fadeOut');
}, 500);
}, 2000);

};

angular.module('starter').controller('loginController', loginController);

})();

 

4. Replace your index.html file with this code:


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;link rel="manifest" href="manifest.json"&gt;
&lt;!-- un-comment this code to enable service worker
&lt;script&gt;
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() =&gt; console.log('service worker installed'))
.catch(err =&gt; console.log('Error', err));
}
&lt;/script&gt;--&gt;
&lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
&lt;link href="css/style.css" rel="stylesheet"&gt;
&lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
&lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
--&gt;
&lt;!-- ionic/angularjs js --&gt;
&lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
&lt;!-- cordova script (this will be a 404 during development) --&gt;
&lt;script src="cordova.js"&gt;&lt;/script&gt;
&lt;!--Libraries ---&gt;
&lt;script src="lib/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;

&lt;!-- your app's js --&gt;
&lt;script src="js/app.js"&gt;&lt;/script&gt;

&lt;!--controllers--&gt;
&lt;script src="js/controllers/login.controller.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body ng-app="starter"&gt;
&lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
&lt;/body&gt;
&lt;/html&gt;

 

5. We have add reference of jQuery file in index.html file so we need to install jQuery from bower. For this you can run following command from command window:

 bower install jquery --save

 

6. Create folder backgrounds under images and add all images which you want to set as background.

 

As you can see we have add some jQuery code under login.controller.js file  which is:


var current_image = 1;
var max_images = 5;

$interval(function () {
jQuery('.bg-image .img').addClass('fadeOut');
if (current_image == max_images) {
current_image = 1;
} else {
current_image += 1;
}
jQuery('.bg-image').css('background-image', jQuery('.bg-image .img').css('backgroundImage'));
$timeout(function () {
var img = jQuery('.bg-image .img').css('backgroundImage', 'url(../img/backgrounds/' + current_image + ".jpg)");
img.removeClass('fadeOut');
}, 500);
}, 2000);

So basically we  have 5 images under backgrounds folder with name 1.jpg, 2.jpg, 3.jpg, 4.jpg and 5.jpg and we take two variables current_image and max_images. First time current_image variable will have value 1 and $interval will call every two seconds and increase the value of current_image if its not equals to max_images then we will increase it by one otherwise it will start again from first image. After that we will fade ‘.bg-image .img’ div for some cool animation and change the background Image of same div.

That’s All 🙂

In my next post I will implement social media login with same design so keep reading.

 

Add a Comment

Your email address will not be published. Required fields are marked *