What kind of scripting is this and how do they do it?

[Weapon]

Hi guys

Recently while browsing through template and design webpages I see that they're doing alot of animation without the use of old school flash. Does anyone know how they do the following page (one of many examples) and also if you can point me somewhere in the right direction for doing something similar for my website? I imagine its something to do with jquery?

http://static.livedemo00.template-help.com/wt_39267/#!/page_about

If you click between the different pages you will see that it just slides into place

 

[TaoPhoenix]

Near the top of the source code it says this:
js/jquery-1.7.2.min.js

Does that help?

 

[Weapon]

Sorry but no, that doesnt really help me out at all

 

[TehGuy]

You can do all of that with plain jQuery, which is nice, since it (theoretically) will be supported in IE6+, Firefox, Chrome, Safari, and Opera. There may be plugins for fancier animations, or something that already specifically does this, but it's very simple to implement yourself (mine has ~15 lines of javascript, including white space / syntax sugar). Here's a crude version I just made:

http://jsfiddle.net/TaY7b/5/

The relevant jQuery functions are:

animate, html, and css

So all my version does is change the box's CSS "left" property to move it off screen using an animation, changes the html to the new content, instantly moves it back to just off the left side of the screen, then changes the left property again to move it back onto the screen using an animation.

Another alternative is to already have all the content boxes there, and when you click a link, move the current box off the screen, then move the new box onto the screen. That saves you the step of changing the HTML of a "presentation" or "view" box.

Let me know if you want anything explained, since I know it's kind of a lot to absorb at once.