All geek questions in one place

Move page in web application

I want to put left / right page with some animation. (Same as 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>
+4
source share
2 answers

Assuming you have a “selected” class for the selected page and a “page” class for each page, try something on 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 (I don’t remember the version) and will gracefully degrade on impracticable browsers (they will go from beginning to end in one step).

+2
source

jQuery is useful for animating HTML elements.

This is a good tutorial on the various ways to slip using jQuery:

In addition, you can look at some kind of carousel plugin and check how they work, because they are very similar to what you need:

+1
source

Source: https://habr.com/ru/post/1343334/

More articles:


All Articles