smooth transition between pages

[Nic727]

Hi,

 

I would like to create my portfolio and I thought about a cool design. Like I wrote before, I'm pretty good in HTML 5 and a little bit in CSS3, but I would like to know how to make a smooth transition like fade-in and fade-out between pages.

 

My design is simple, my home page will be a big picture with a big "hello" and a button to enter. When you click to enter, I would like a kind of smooth transition between this page and other pages. Other pages will not have the same design as my home page. It's why I would like a great transition between them.

 

Thank you

[Ingolme]

It would take Javascript to do something like that. You would have to make Javascript modify all your links so that they don't immediately go to the other page, but play an animation first. After that, every single page of yours also has to start off in a mid-animation state before it loads and have Javascript play an animation for the first moments. At no moment during the animation can both pages visible, so the best you can do is a fade out and fade back in. Or have the content of the first page scroll entirely out of the window before having the second page scroll in after the first one is gone.

 

Alternatively you can have a purely AJAX based website so that you don't need to worry about page loading, but you still are going to need a Javascript program to do all the animating. AJAX sites aren't accessible to search engines or to users that have Javascript disabled.

[Nic727]

Hi, Thank you I found that you can make some animation in CSS :http://bavotasan.com/2011/a-simple-fade-with-css3/http://fvsch.com/code/transition-fade/test5.html

 

It look complicated with the webkit, etc.