I have 4 pages on my site:
Home, About and Contact are contained withing a 5em wide page-container div.
Portfolio's page-container div is set to 100% to create a different kind of layout that suits it better.
The thing is, jumping between contained and uncontained pages is very unpleasing to the eye.
This is why I'm trying to implement an animation that automatically widens the div from 50em to 100% when you enter the portfolio area. (I believe this would be more understandable if you take a look at my site).
I've managed to create the base of a jQuery animation that widens the page-container when the page is loaded. The problem with this, though, is that if you accidentally click the top "Portfolio" link again, it redoes the animation (jumps back to 50em and expands to 100%, though you were already at 100%). There is also still the issue of moving to a contained page without an animation for that.
What I'm trying to create is this:
- 2 areas within the website (1 area for Portfolio and 1 area for the rest). Let's call the uncontained Portfolio area A and the contained area B.
- When I go from area B > area A, I want an expanding animation of the page-container from 50em to 100%.
- When leave area A back to area B, I want an animation of the div getting smaller (from 100% to 50em).
- When I go from an A page to another A page (even if I simply refresh, or go to sub-pages for each portfolio work) I don't want there to be an animation.
- When I go from a B page to another B page (say, from the About page to the Contact page), I don't want there to be an animation.
Basically two segregated areas in the site with the event for the animation based on jumping between the areas and not simply loading a page.
I hope this makes sense to you guys and that it isn't too complicated.
This is the code I have so far for the basic animation (needs tweaking by me but that's not a problem):
Just in case you missed the link to my site up there: http://www.joelfolio.com
}, 1500 );
}, 1500 );
Thanks so much for your time!