html - How to achieve smooth transition between webpages? -


i trying create small site(~5 pages, largely static) , want implement transitioning effect achieved in massivehealth.com. have tried search in vain. observed site using 1 script , although links suggest multipage site, clicking links show them /#page instead of /page suggests part of 1 large page.

i know technique goes behind exactly, can learn , implement perfectly.

first of all, should use jquery, since makes animation creation easier. here's how should go it:

  1. put entire page contents( of them, stated pages 1 page ) in wrapper div.
  2. this wrapper div should have max width of 100% , overflow: hidden
  3. create second wrapper div inside main wrapper, one's width equal gross widths of pages(or better pseudo-page or something)
  4. now each page div inside second wrapper , there positions must absolute( should set appropriate left , top positions them).
  5. the second wrapper's position must absolute too
  6. and first wrapper's position must relative, or none of absolute positions work way wanted to.
  7. now, when want change page, use jquery animate x position of second wrapper, , scrollto in y direction.

if wanted give code, take long time, whole idea behind should this(well, of course hope :d).

if had problems implementing idea, tell


Comments