sliding transition animatio between two web page

Question

for example i have few webpage

how can i click the link in 1.html to 2.html

then 1.html slides to left and 2.html loada and slide from right?

just like this effect:

https://delicious.com/join

and the github project as well

https://github.com/CyanogenMod/android_packages_apps_Settings

there have no browser refresh blink

and the URL also changed.

is it using jquery?

I must use mvc php framework or rails to build the site?

how can I create some webpage like this?

any open source project or example code for that?

Answer 1

If what your asking is how to do the animation, then JQuery was the one responsible for it.

You can check this link for reference :

Downloads
Demo

Or you could try another search in the internet , just type "Fancy Sliding Forms"

Actually it all depends on you web designer/developer on how to implement that Jquery. Just read the docs.

God Speed!

Answer 2

Recently the challenge for me was to develop lightweight web applications, so I resorted to using minimal of jQuery because when viewed in mobile, the smooth behaviour was not guaranteed. So I chose hardware accelerated css transitions. You can place the contents of web pages in two divs and dynamically add and remove classes to see this effect.

/* CSS */
.page-one {
  width: 100%;  
  -webkit-transform : translateX(0px);
  height:100%;
  position: fixed;
  background-color: #fff;
  color : #6B6B77;
  box-shadow: -3px 3px 3px #ddd;
  overflow: auto;
}

.page-one.invisible {
  -webkit-transform: translateX(-100%);
}

.page-one,
body {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.page-two {
  -webkit-transform: translateX(100%);
}

.page-two.visible {
  -webkit-transform: translateX(0px);
}

.page-two,
body {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}