By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. Apart from the great design, they’ve also implemented an interesting solution for showcasing the new features their products are capable of – using contextual slideout tips.

Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.

So, what exactly does Mosaic do?

Automatically generates sliding boxes & captions
Allows slide & fade animations with custom directions
Preloads images within boxes

In this post, we are glad to release a responsive jQuery slider plugin Flexslider which has been created, developed and maintained by Tyler Smith and released for Smashing Magazine and its readers. As usual, the plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. In three simple steps, you can have a fully responsive slider for your responsive design.

CrossSlide is a jQuery plugin implementing in 2kB1 of Javascript code some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!)

Meerkat, depending on the options you have set, will slide or fade in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally. You have a choice of providing a close option which will simply close Meerkat until the page has been reloaded, or a dontShow option, which will close Meerkat until the browser session has ended, or for a set amount of days, depending on the options you have defined.

An Image Overlay plugin for the jQuery JavaScript library. Allows you to display additional information in a translucent pane above an image that gracefully appears when a user hovers over the image. Support for the metadata plugin is included. Brought to you by Jon Neal of ferretarmy.com.

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.