Is there a javascript library can handle an entire page slide?

Question

When we are building html5 web app or ios hybrid app,we need to make an effect like the views' transition in an ios app.

Such as : http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

In the past I use jquery mobile or sencha touch to handle it.

But,you know,jquery mobile depends on many libraries or css.(Like: jquery, jquerymobile.css etc.) and sencha touch is too heavy.

I just wanna find a simple javascript library which can help me to handle this problem.

I also wish this library is pure and easy to use.

Is there a javascript library can handle this problem?:-)

score 1 · Accepted Answer · answered Jun 27 '12 at 04:04

Maybe this can help you: HTML Page Slide Without a Framework

The solution is pretty lightweight and is powered by a little AJAX, some CSS transitions, and CSS transition events. It's also important to note that this only works with WebKit. (This case is for a mobile application with PhoneGap targeting Android and iOS, so it only need WebKit compatibility.)

score 0 · Answer 2 · answered Jun 26 '12 at 09:51

0

Something like this one?

http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

jQuery should generaly be the best choice as it'll ensure it works cross browser and platform .

answered Jun 26 '12 at 09:51

Brian

8,418
2
25
32

Emm...this demo shows slides in a single page.But I want,it's that when I use element to link to another page,the page transition effect can be slide.Just an entire page slide.:-) – CashLee李秉骏 Jun 26 '12 at 10:22

score 0 · Answer 3 · edited May 23 '17 at 11:52

You might wanna take a look at Swipe, especially since this will also be for iOS, because it detects the swipes and the demo shows support for slides.

There was some other good solutions presented here, on Stack Overflow, on this question: Sliding An Entire Web Page You might want to take a look at the answers there, the accepted one does the sliding for entire pages

[edit]Depending on your skills, you could try to make your own vanilla (pure) javascript functions for the sliding. That's what I ended up doing, using the html5's translate3d css property.

For example, here's the function I use to generate the css codes:

//generates transformation styles for Opera, Chrome, Firefox and IE
function genTransform (x, y, z, dur) {
    var genStyle = '-webkit-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -webkit-transition: ' + dur + 'ms;' + 
                '-moz-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -moz-transition: ' + dur + 'ms;' + 
                '-ms-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -ms-transition: ' + dur + 'ms;' + 
                '-o-transform: translate(' + x + 'px, ' + y + 'px); -o-transition: ' + dur + 'ms;' +
                'transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); transition: ' + dur + 'ms;';

    return genStyle;
}

I then apply the style to my divs to get them to slide according to my needs. It's actually very simple if you only slide between a set number of pages

Is there a javascript library can handle an entire page slide?

3 Answers3