News

Create slide up transitions with jQuery Mobile

Unleash the jQuery Mobile framework to introduce animated page effects

Create-slide-up-transitions-with-jQuery-Mobile

Create slide up transitions with jQuery Mobile

inspiration: www.don-guri.com/donguri-magazine

One aspect of the website experience that can often get left behind in the thoughts of designers and developers is the page transition. After all, what’s the problem? You click a link and the connecting page appears. Simple. If it ain’t broke, don’t fix it.

However, a smooth or pleasingly executed page transition can add something to your website’s character that will not go unnoticed by users – and it’s not difficult to incorporate.

There are a few options for creating the effect of a page sliding up to replace the current page – by far the simplest is making use of the jQuery Mobile library. Designed to make developing for mobile easier, here we’re going to call one of its many cool functions.

GET THE CODE

TECHNIQUE

Create sliding pages

Homepage

jQuery Mobile is HTML5 based, so start your page with the basic HTML5 doctype declaration. The meta viewport tag should set the screen width to the pixel width of the device. Then, add links to jQuery Mobile’s CSS and script library as well as a link to our own stylesheet, both for our own styles and some modifications to the library styles.

001        <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css”>
002        <link href=”style.css” rel=” stylesheet”>
003        <script src=”http://code.jquery.com/ jquery-1.8.2.min.js”></script>
004        <script src=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min
.js”></script>    

Start building content

Add a container in the body with some basic content inside it. We’re giving our pages h1 tags and links nested inside other <div>s. We’ll add the links soon. jQuery Mobile identifies the content it is overseeing by the use of a data-role of ‘page’ in the containing <div>. Also, give that <div> a unique class identifier.

001    <div id=”container” data-role=”page” class=”one”>
002    <h1>Welcome to Page One</h1>
003    <div class=”link-two”></div>
004    <div class=”link-three”></div>
005    </div> 

Add the links

Add the links inside the assigned <div>s. Once you have done this you will need to create the pages we have named in the links. Duplicate the code so far for each, but change the links. For example, page two should have links to page three and home. You will be left with a three-page interlinked website.

001    <div class=”link-two”><a href=”
page-two.html”><h2>Perhaps you’d like 
to see Page Two?</h2></a></div>
002    <div class=”link-three”><a href=”
page-three.html”><h2>How about Page 
Three?</h2></a></div>

Add some styling

Each container on the three pages has its own background colour, which is reflected in the background for each link to it. Choose your own font and style for the links, but give the link <div>s some nice padding to create the coloured band they sit in. The containers should have some generous padding too.

001    .one {background:#7D1935;}
002    .two {background:#4A96AD;}
003    .three {background:#A2AB58;}    
004    .link-home {padding:30px 0; background:#7D1935;}
005    .link-two {padding:30px 0; background:#4A96AD;}
006    .link-three {padding:30px 0; background:#A2AB58;}

The slide function

It may seem like we’ve been building up to a grand reveal, but adding the page slide function is as simple as placing a data-transition attribute in each link. There are a few different options you can use for the transition attribute, not just the four possible directions, but we are looking to slide up each new page.

001    <div class=”link-two”><a href=”page
-two.html” data-transition=”slideup”>
<h2>Perhaps you’d like to see Page Two?
</h2></a></div>
002    <div class=”link-three”><a href=”page
-three.html” data-transition=”slideup”>
<h2>How about Page Three?</h2></a>
</div>
×