5 Replies - 709 Views - Last Post: 20 September 2012 - 11:46 AM

#1 Guitartripp  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 52
  • Joined: 20-May 09

Animating a page transition?

Posted 18 September 2012 - 09:37 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.

This post has been edited by Guitartripp: 18 September 2012 - 09:43 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Animating a page transition?

#2 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1002
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: Animating a page transition?

Posted 19 September 2012 - 12:57 AM

You would use Javascript to animate the scroll offset to be "smooth", but you can do the actual long page using a funky combination of background images and transitions (in CSS3).
Was This Post Helpful? 0
  • +
  • -

#3 Guitartripp  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 52
  • Joined: 20-May 09

Re: Animating a page transition?

Posted 19 September 2012 - 01:57 AM

I actually found a site that showcases doing this in only CSS. It doesn't look too bad, honestly.
CSS Page Transition

No images, just negative margin values and the :target pseudo class =)
Was This Post Helpful? 0
  • +
  • -

#4 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1002
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: Animating a page transition?

Posted 19 September 2012 - 02:38 AM

Not bad at all, I thought you was referring to the endlessly scrolling pages that animated across once the link was clicked!
Was This Post Helpful? 0
  • +
  • -

#5 Guitartripp  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 52
  • Joined: 20-May 09

Re: Animating a page transition?

Posted 19 September 2012 - 02:55 AM

That's what I was thinking at first, which I now realize would be terrible >.<
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3480
  • View blog
  • Posts: 10,028
  • Joined: 08-June 10

Re: Animating a page transition?

Posted 20 September 2012 - 11:46 AM

Be aware that this (either with JS or with CSS) doesn’t call another page and makes the transition to it. you rather operate on a single (frame like) page that must contain the data of both pages (wether the data are there from the beginning or loaded on demand via AJAX doesn’t matter).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1