CODEWITHSUNDEEP
htmlcss
Pawan
Pawan

Reputation: 1598

How to achieve smooth transition between webpages?

I am trying to create a small site(~5 pages, largely static) and want to implement the transitioning effect achieved in massivehealth.com. I have tried to search for it but in vain. I observed that the site is using only one script and although the links suggest it is a multipage site, clicking the links show them as /#page instead of /page which suggests that they are actually part of one large page.

I would like to know what technique goes behind this exactly, so that I can learn and implement it perfectly.

Upvotes: 2

Views: 9190

Answers (1)

Milad.N
Milad.N

Reputation: 2329

First of all, you definitely should use jQuery, since it makes the animation creation much easier. Here's how you should go about it:

  1. Put the entire page contents( all of them, as you stated all the pages are just one page ) in a wrapper div.
  2. This wrapper div should have max width of 100% and overflow: hidden
  3. Create a second wrapper div inside the main wrapper, but this one's width is equal to the gross widths of all pages(or better say pseudo-page or something)
  4. Now each page is a div inside the second wrapper and their positions must be absolute( then you should set the appropriate left and top positions for them).
  5. the second wrapper's position must be absolute too
  6. and the first wrapper's position must be relative, or none of the absolute positions would work the way you wanted it to.
  7. Now, when you want to change page, use jquery to animate the x position of the second wrapper, and scrollTo in the y direction.

If I wanted to give you code, it would take a very long time, but the whole idea behind it should be this(well, of course I hope so :D).

If you had any problems implementing this idea, do tell

Upvotes: 1

Related Questions