Jump to content

  • Log In with Google      Sign In   
  • Create Account

We're offering banner ads on our site from just $5!

1. Details HERE. 2. GDNet+ Subscriptions HERE. 3. Ad upload HERE.


Website help - Animating a page transition?


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: 720

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.

#3 Endurion   Crossbones+   -  Reputation: 3653

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! Mglui naflftagn std::codecvt eY'ha-nthlei!,char,mbstate_t>




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.



PARTNERS