Add more excitement to data tables using jQuery and conditional formatting to generate flexible data “heat maps”. Long tables of numbers are never fun to look at and when presenting this kind of data on the web, where attention spans are already at their limits, you need to be able to present the highlights as quickly as possible. Data heat maps provide the perfect way of taking ordinary data and creating something more visually appealing and informative.
Wave Display Effect with jQuery
Today we want to share an experiment with you that let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in the shape of a sine curve. When clicking on a thumbnail, we’ll “zoom” in to see a medium sized version. Clicking again will make the large content area appear; here we will show some more content.
Flexible Slide-to-top jQuery Accordion
In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.
jquery.videoBG – Make an HTML5 video a background
videoBG is a jQuery plugin that allows you to very easily use an HTML5 video as a background to a website or any div. For browsers that don’t support the HTML5 video tag, it will simplu use an image.
Bear in mind bandwidth usage for both you, and your visitors. Also don’t use it too often, too many video instances will slow down the browser.
jwerty – Awesome Handling of Keyboard Events
jwerty is a JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalises the poor std api into something easy to use and clear.
FerroSlider jQuery Plugin
This plugins allows you to organize the contents of you website in a unusual and cool way and navigate through them with a sliding effect.
The final effect is similar to Mac’s or Linux multiple desktops.
You can position content as you want: by row, by column or using a custom displacement.
Circle Navigation Effect with CSS3
Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.