Change Page Effect

Hey Anthony,

Depending on the effect you want, you might want to look for a plugin.

But if you want a simple fadeIn, you can do it with jQuery.

1st - You will want to reference to jQuery (include this in your page):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">        </script>

2nd - (I don't know how much you know about jQuery, but here is a simple solution) The code below checks to see if the page has loaded.

jQuery(document).ready(function($) { // the code below will run when the document has loaded. //(required!)// Code will go in here :)   });

3rd - Inside { } from the previous code. You will want to select your menu, for example if its called #menu. You do this in jQuery like so..

$("#menu").addClass('jqueryHidden').hide(); 

The reason I am adding a class to the menu, is because if a user has javascript turned off then the class won't be added. If the class is added successfully the menu will be hidden.

4th - Then you can select that class, only if the class is added will this code run.

$('.jqueryHidden').fadeIn();

Obviously this is a very simple example, so I hope this helps I will link a code pen as well. If you include this on each page, when the page loads the animation will run :)

Oh just to say in the parentheses of fadeIn( // here ); You can add in milliseconds how long you want the animation to be :)

See Example Here: http://codepen.io/anon/full/qdCno

Good Luck!!

Hi Josh,

Thanks a lot for your help, that's the kind of set-up i'm after would it take much to get the <li></li> to display the different pages on selection would i just need to link to them? <li><a href="#about us"About us </li></a> <li><a href="#contact"</li></a> <li>Portfolio</li>

For example the fade in would be the content relevant to these pages using php includes for the header, sidebar and footer.

Thanks Again

Anthony

Some of the code I posted didn't work correctly just spotted the markdown cheat sheet,

Hi Anthony,

I'm sorry I don't really understand. So do you want the animation on the page content not the Menu? So when you link on a link the content animates?

Sorry just trying to understand so I can answer :)

Maybe something like this?

http://tympanus.net/Tutorials/CSS3PageTransitions/index.html

Yes that's exactly what I'm after is that your work..

Cheers

Anthony

Hehe :) I wish! This is from codrops.com :) If you haven't already its well worth checking out :)

Here is the tutorial for that page animation:

http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/

Just remember this effect is using CSS3 so it won't work on every browser :)

Best of Luck!! ;)

I would like to use the twitter bootstrap framework if possible and create a site that functions in this way i'm on such a tight timescale though as always :)

Well I wish you all the best :) Hope this helped :)

It did thanks again....

Sometimes scouring the web and google you can't see the wood for the trees :)