Website help - Animating a page transition?

Started by
1 comment, last by Endurion 11 years, 7 months ago
A little while back, I saw a website where you click on a link to go to a different part of the page (an ID) but the page would slowly scroll down to the section. The section looked like it was a completely different page, but it was all part of the same "main page". I'd like to have a similar effect, but moving from right to left and vice-versa.


|
| Home <--- <--- Other Both "pages" are within index.html
|"page" ---> ---> "page"
| out of view


Something like that. Is this possible with just CSS3, or do I need to dabble in Javascript a bit?
I wish I remembered the site so I could link it =/. Let me know if that's a bit too confusing.
Advertisement
I don't think it is possible using CSS3 only, but I am no CSS expert.

It is possible using Javascript. Take a look at http://script.aculo.us/, especially at the Effect.SlideDown/Effect.SlideUp classes (http://madrobby.github.com/scriptaculous/effect-slidedown/, http://madrobby.github.com/scriptaculous/effect-slideup/). It makes this very easy. You just define your "pages" within different divs and slide them in and out as you wish. There seems to be no effect for sliding to the side, though.

However, keep in mind that when you put all your pages within one page loading time will be quite big. But maybe you could load the data of the other pages once they are shown using ajax.
Remember, users hate animated things that make them wait. At least I do.

Fruny: Ftagn! Ia! Ia! std::time_put_byname! Mglui naflftagn std::codecvt eY'ha-nthlei!,char,mbstate_t>

This topic is closed to new replies.

Advertisement