CODEWITHSUNDEEP
javascriptjquery
JSW189
JSW189

Reputation: 6325

ios-like animation to slide content from right to left

I am trying to emulate an effect I have seen on numerous iPhone applications. It essentially slides the content on the screen from right to left when a button is clicked. The content from the original screen slides out of view to the left, and the content for the next screen slides into view from the right to the center.

I have been able to essentially emulate this with jQuery. See this fiddle. It works fine, but as the animation becomes more complex (i.e. adding buttons to revert to the original screen or when there are more than two screens) this method becomes very complex and confusing. I am sure there is a more efficient way to achieve this effect, but I don't know it. Can someone give me a hint? I have searched the web, but I do not think I am using the correct terms in my search because I haven't found anything. My code is shown below.

HTML:

<div id="screen1">
    <div id="header">Screen 1</div>
</div>

<div id="screen2">
    <div id="header">Screen 2</div>
</div>

<a href="#" id="button">Swipe</a>

CSS:

body, html {
    width: 100%;
    height: 100%;
}

#screen1 {
    background: blue;
    width: 100%;
    height: 100%;
    position: fixed;
}

#header {
    height: 50px;
    width: 100%;
    background: red;
}

#screen2 {
    background: green;
    width: 0px;
    height: 100%;
    position: fixed;
    right: 0;
}

jQuery: 

$('#button').click(function(){
    $('#screen1').animate({width: '0px'});
    $('#screen2').animate({width: '100%'});
});

JS Fiddle Example

Upvotes: 3

Views: 3536

Answers (2)

Zhihao
Zhihao

Reputation: 14747

I don't see anything wrong with what you are currently doing. One improvement you could make is only animate one element when switching screens. For example, give #screen1 z-index: 1 and #screen2 z-index: 2. Then you can remove the line that animates #screen1 because the other screen will appear on top of it. jsFiddle example

If you have multiple screens, you can start all the screens with z-index: 0. When you want a screen to appear on top, give it z-index: 1 first, then perform the animation to put it on top of the other screens. When doing this again with yet another screen, you can do the same thing and switch the z-indexes before the animation. You would also need to set the width appropriately as well. In the end, your JS might look something like this:

$targetScreen = getTargetScreen(); // somehow figure out which screen you're switching to
$prevTargetScreen = getPrevTargetScreen(); // this will also depend on your implementation

$prevTargetScreen.css('z-index', 0);
$targetScreen
    .css({ width: 0, `z-index`: 1 })
    .animate({width: '100%'});

Upvotes: 2

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

An easy way to work with multiple screen is to save all your screen in an array and remember wich screen you currently are.

Take a look at this fiddle : http://jsfiddle.net/9C9yf/4/

My first advice would be to not animate the width (it will mess up the positioning), but animate the left postion on your screen (i setted them to absolute).

Then on load, every screen must be at top : 0; left : 100%.

then call this code on DOM ready :

var arrScreen = new Array();

$('.screen').each(function(){
   arrScreen.push($(this));
})

var currentScreen = 0;

arrScreen[currentScreen].css('left', '0%');

This will save the number of page and display the first page.

After, you need to change the swipe action. This code work currently for 1 side, but im sure you'll find out a way to animate the other side:

$('.button').click(function(){
    if(currentScreen < arrScreen.length){
        currentScreen++;
        arrScreen[currentScreen].animate({'left' : '0%'});
    }
});

Basicly, it check if we are not on the last page and then animate the left position of the next element.

Head-up if you want you go to the previous page, the animate left property will be 100%.

Upvotes: 2

Related Questions