Three Script Updates

The animated responsive grid, the direction-aware hover effect and the swatchbook have all been updated and added to GitHub.

Three Script Updates

We have updated three scripts and added them to GitHub: the Animated Responsive Image Grid, the Direction-Aware Hover Effect with CSS3 and jQuery and the Swatch Book with CSS3 and jQuery. Take a look at the changes and improvements for each script below.

Animated Responsive Image Grid

AnimatedResponsiveImageGrid_Updated

View demo Download source

Summary of Changes

  • Removed the jquery.transit.js dependency
  • PageVisibility API for pausing the slideshow when the page is not being displayed (e.g. when changing the tab). Also read Using the PageVisibility API by Joe Marini on HTML5 Rocks
  • Option (“onhover”) to trigger the switch on an item when it’s hovered
  • Option (“nochange”) to specify one or more elements that should not change. This also adds a class “ri-nochange” to the elements in case you want to style it differently
  • Option (“slideshow”) to start the slideshow. You might want the switch effect only when the item is hovered for instance
  • Tested and adapted (simplified) to work with the latest jQuery version (1.8.3)

Direction-Aware Hover Effect

DirectionAwareHover_Updated

View demo Download source

Summary of Changes

  • Fallback to jQuery animate
  • Added options for speed and easing
  • Tested and adapted (simplified) to work with the latest jQuery version (1.8.3)

Swatch Book

SwatchBook_Updated

View demo Download source

Summary of Changes

  • Option (“openAt”) to open one specific item initially (see demo 5). Also demo 5 will show that links can be placed inside each item
  • Tested and adapted (simplified) to work with the latest jQuery version (1.8.3)

Thank you for your valuable feedback, please continue sending us ideas and improvement suggestions.

Previous:
Next:

Tagged with:

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.