Website help - Animating a page transition?

Started by Guitartripp, Sep 18 2012 11:07 PM

html/css

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

You cannot reply to this topic

2 replies to this topic

#1 Guitartripp Members - Reputation: 112

Posted 18 September 2012 - 11:07 PM

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.

Edited by Guitartripp, 18 September 2012 - 11:11 PM.

Sponsor:

#2 brx Members - Reputation: 443

Posted 19 September 2012 - 01:26 AM

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.

Back to top

#3 Endurion Members - Reputation: 2108

Posted 19 September 2012 - 02:25 AM

Remember, users hate animated things that make them wait. At least I do.

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

Back to top

Back to GDNet Lounge

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.