www.webdeveloper.com
Results 1 to 6 of 6

Thread: Page transition

  1. #1
    Join Date
    Oct 2012
    Posts
    11

    Page transition

    Hi,
    I am trying to make smooth transitions between pages on my website. I tried this site http://www.onextrapixel.com/2010/02/...e-transitions/ but all it did was just apply a fade out and fade in transition. The url bar still loaded. I want it to look more like the iCloud.com transitions when you click on one of the main icons. If anyone knows how to do this, that would be awesome.

  2. #2
    Join Date
    Oct 2012
    Posts
    1
    What I like most in the Guild Wars 2 is the PVP system. It is really exciting to face all kinds of opponents from all over the world. I do not need to do quests one after another and I do not need to run all the way to complete the quests. What I need to do is to fight for glory. What about you? What do you like most in the game?

  3. #3
    Join Date
    Oct 2012
    Posts
    11
    It is nice, but how do I implement it?

  4. #4
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    My guess is they're doing a preventDefault() on the <a> click, fading out the current page container, then setting a timeout to redirect the URL.

  5. #5
    Join Date
    Oct 2012
    Posts
    11
    What would be the code to do that? I'm very new to JavaScript.

  6. #6
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    Use JQuery. Get the URL from the <a>. Find out how to do a preventDefault(). Animate opacity on the body or container div. Call the complete function to redirect to whatever URL when the animation is complete. I'm not going to write the code for you. It's very simple, and the best way to learn is the figure it out. I've given you the necessary steps. If you can't come up with the code from some researching, then you're just wasting both our time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles