SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Can page transition effects be added to buttons?

    From a design perspective, I love the idea of using transitions to help users orientate themselves but this sometimes lends itself toward activating a transition depending on where you have come from not what page you are on...

    For example, take a page like this one http://practicaltypography.com/summa...key-rules.html with buttons at the bottom heading left (back) or forward (onward) transitions could reinforce the effect of moving through pages organised 'like a book'. When you click next > the page could come in from the right BUT you would want the < previous button to come in from the left.

    In other words, the same page displays differently depending on what button you press. Is that possible, or is it assumed that transitions are only applied to objects?

    Sorry for my ignorance I am looking forward to mastering this!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    You do see this effect a lot on sites, although I've only seen it done when all of the content is actually on the one same page. So when you click a left/right arrow, a new page appears to slide in ... though it is really just another part of the same page that was hidden. I'm not sure if it can be done from one page to another, but I couldn't find any solutions online.

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't imagine this would be too difficult actually.

    One way is:
    First of all set the page's container so that it's css overflow is hidden. Use javascript to get the page containers current width and height and then set it as absolute pixel values. Then with javascript you could simply add on click event listeners to the next/previous buttons. When the next button is clicked, set a interval to move the page to the left, a pixel at a time at the time interval desired. Once the page has been moved to the left enough to have left the page, you can use javascript to load the page originally requested by clicking on the button. Set a script at the start of the new page which moves the page content off to the right so that it is hidden, and then using another javascript interval, let it move pixel by pixel from the right until it is in it's desired position.

    The full effect should seem like an animation of the page sliding along. Sure you won't see both pages on the page at the same time, one will wipe away and then the other will appear. You can get around this but it is more complicated. It would be too much work to explain in a casual post.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, both, for your thoughts. It would be nice to see both pages on the same page wouldn't it? ;-) Smooth. Especially as that's the expectation from a non-technical point of view. I will let you know if I work it out.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •