Smooth Page Transition on Mobile Devices within Single HTML Page

While exploring the CSS3 transitions and animations, I found them much helpful for the smooth page transitions for mobile devices. Let’s see how can we achieve this.

Basic HTML: This is the basic html that will hold the divs that will act like a page. So all the pages are finally rendered into this container.

<body>
<div id=”mainContainer”></div>
</body>

Templates Used: These templates are loaded when you click on the links to navigate between pages.

Page 1:

<script type=”text/x-jQuery-tmpl” id=”page1″>
<div>
<header>This is page 1 header</header>
<section>
This is page 1 body. <br/>
Move to <a href=”#page2″>Page 2</a>
</section>
</div>
</script>

Page 2:

<script type=”text/x-jQuery-tmpl” id=”page2″>
<div>
<header>This is page 2 header</header>
<section>
This is page 2 body. <br/>
Move to <a href=”#page1″>Page 1</a>
</section>

</div>
</script>

Basic CSS: These CSS adds the transitions effects to the page navigation.

/* Main Container Styling */
#mainContainer {

position: absolute;
width: 100%;
height: 100%;
overflow: hidden;

}

/* Page Styling */
.page {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

/* Transitions Styling */
.page.transition {
-webkit-transition-duration: .4s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0ms;
transition-duration: .4s;
animation-timing-function: ease;
animation-delay: 0ms;
}

/* Transitions Effects Styling */
.page.left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.page.center {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.page.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

Basic JavaScript:

First of all we need to manage the script that will handle the page transitions,

var PageSlider = function(iContainer) {

var container = iContainer,
currentPage,
stateHistory = [];

// Use this function if you want PageSlider to automatically determine
// the sliding direction based on history
this.slidePage = function(iPage, iCallback) {

var historyLength = stateHistory.length,
state = window.location.hash;

if (historyLength === 0) {
stateHistory.push(state);
this.slidePageFrom(iPage, iCallback);
return;
}
if (state === stateHistory[historyLength-2]) {
stateHistory.pop();
this.slidePageFrom(iPage, iCallback, ‘left’);
} else {
stateHistory.push(state);
this.slidePageFrom(iPage, iCallback, ‘right’);
}

}

// Use this function directly if you want to control the sliding
// direction outside PageSlider.
this.slidePageFrom = function(iPage, iCallback, iFrom) {

container.append(iPage);

if (!currentPage || !iFrom) {
iPage.attr(“class”, “page center”);
currentPage = iPage;
iCallback();
return;
}

// Position the page at the starting position of the animation
iPage.attr(“class”, “page ” + iFrom);

currentPage.one(‘webkitTransitionEnd’, function(iEvent) {
$(iEvent.target).remove();
if(!!iCallback && ((typeof iCallback) === “function”))
iCallback();
});

// Force re-flow.
container[0].offsetWidth;

// Position the new page and the current page at the ending position
// of their animation with a transition class indicating the duration
// of the animation.
iPage.attr(“class”, “page transition center”);
currentPage.attr(“class”, “page transition ” +

(iFrom === “left” ? “right” : “left”));
currentPage = iPage;

}

}

Now we need to route the call to the pages by using the below function,

var Route = function() {

var page, hash = window.location.hash;
var flag = false;

try {

// Load New Page
switch(hash) {

case “#page1”:
page = $(‘#page1’).tmpl();
flag = true;
break;

case “#page2”:
page = $(‘#page2’).tmpl();
flag = true;
break;

}

if(flag) {
gSlider.slidePage($(page), function() {

switch(hash) {
case “#page1”:
// Page 1 bindings goes over here
break;
case “#assignmentsPage”:
// Page 2 bindings goes over here
break;
}

});
}
}
catch(iException) {
console.log(‘Oops…something went wrong…’);
}

}

Now the last thing, on page “onload” event, just bind the hash change event with the Route function, and load the first page template.

// Bind the hash change event
$(window).on(‘hashchange’, Route);

// Set the PageSlider Object
var gSlider = new PageSlider($(‘#mainContainer’));

// Load the first page.
var path = window.location.href.split(“#”);
window.location.href = path[0]+”#page1″;

That’s all, just load the page and go through the transitions.

Written By: Ashis Kumar, Cross Platform Mobile App Developer, Mindfire Solutions

Advertisements

One thought on “Smooth Page Transition on Mobile Devices within Single HTML Page

  1. Pingback: How to supercharge your site’s speed with AJAX and jQuery | GURUSURFINFO.INFO

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s