CODEWITHSUNDEEP
javascriptcssiphone
coure2011
coure2011

Reputation: 42434

slide a page in web application

I want to slide left/right a page with some animation. (Just like iphone apps)

<body>
    <div id="page1">
        <!-- Full screen content  with a button at bottom, on click I want to show #page2 but with slide animation. #page1 will slide-out left and #page2 will slide-in from right-->
    </div>
    <div id="page2">
        <!-- Full screen content with a button at bottom, on click It will show page1 with slide animation -->
    </div>
</body>

Upvotes: 4

Views: 4103

Answers (2)

Lea Verou
Lea Verou

Reputation: 23887

Assuming you have a "selected" class for the selected page and a "page" class for every page, try something along these lines: 

.page {
    position:absolute;
    left:100%;

    -moz-transition:1s left;
    -o-transition:1s left;
    -webkit-transition:1s left;
    transition:1s left;
}

.page.selected {
    left: 0;
}

This will work on Webkit, Firefox 4 and Opera (don't remember version) and will degrade gracefully on non-supporting browsers (they'll just go from start to end in one step).

Upvotes: 2

betamax
betamax

Reputation: 14041

jQuery is useful for animating HTML elements.

This is a good tutorial about the various different methods of sliding using jQuery:

Also, you might want to look at some sort of carousel plug-in and check out how they work because they do very similar things to what you want:

Upvotes: 1

Related Questions