I’ll ask again with the hopes that it won’t get spamed… I’ve seen websites that use this effect when one clicks the different links. Instead of displaying the content of the page instantly, it has a nice fade effect to it. I’ve been looking for tutorials, but I can’t find anything. Is javascript, coldfusion, or dhtml used? Here’s an example: http://www.cromenewmedia.co.uk/ How can I accomplish a simmilar effect? Thanks for the info.
Fade Transition Effect When Clicking Links?
- No trackbacks yet.
#1 by serenity at June 21st, 2009
My guess would be that if you are clicking a link and the content is fading into view this is being accomplished by a mix of AJAX and Javascript.
The other poster suggesting MooTools is correct in that it will work sufficiently, however may I suggest the JQuery library as well? My only reasoning is that I am more familiar with it.
For the short of it – you will need to establish your links on the page and create (or append) a div that will hold your content. In JQuery you would then setup those links to load the content in your div based on your href value. The ajax part can be done with either .ajax, .get, or .load . You would then append .fadein on the content using .html .http://docs.jquery.com/Effects/fadeInhttp://docs.jquery.com/Htmlhttp://docs.jquery.com/Ajax
Doing this yourself would use the same steps – load content when a link is clicked using an asynchronous call via XMLHttpRequest. Once you accomplish that step you would complete the fadein using a loop with either setTimeout or setInterval in your Javascript Code.
#2 by neidulou at June 21st, 2009
You could accomplish this effect using the MooTools Javascript library. You can get it here: http://mootools.net/
Use the Tween Effect, demonstrated here: http://demos.mootools.net/Effects#
I haven’t used MooTools a whole lot but I seem to remember it being relatively easy to manipulate. Hope it works for you.