Bob Bob - 1 month ago 19
HTML Question

Page to Page Transition

I have two different pages.
index.html
page2.html

I have a button on index.html which would take us to page2.html,
but its a direct transition. Where as I was looking for a fade in transition to happen when first page switches to second page.

I don't have to come back to first page so we don't need any transition from second to first.

Could anyone please help.
Thank you

Answer

There would be three ways to really make this happen. You can't transition from one page to another if the browser is loading the new page in the address bar besides using a fade out and a fade in on the new page. However, there are two other ways to get animation of page loads running. The first of which is completely inadvisable because it uses an iframe and can complicate communication between the frame and the page it's loaded on.

Here are the three algorithms:

  1. Add a fade in animation on the "body" element when the pages first load and make all links on the pages trigger via javascript. When the Javascript navigate function is called, fade the page, and then execute the location change on the animation callback. Since all of the pages have a fadeIn, this would appear that the page is "transitioning".

  2. (inadvisable) - iterate an ID and on each new request, load a hidden iframe above all of the content and give it the incremented ID. also before creating the frame apply an onLoad handler to the frame and make it animate the frame when it's loaded.

  3. Use AJAX to load your content into a container and you can animate it based on when the ajax request starts and gets a response.

I assume you were looking for algorithms, not code samples. Hence the verbiage.