Three Script Updates

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

By Manoela Ilic in Articles on
Three Script Updates
Demo Code

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

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

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)

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Swatch Book

SwatchBook_Updated

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.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Exploring 3D Effects with 2D Optical Illusions

How to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js and GSAP

Hover Motion Intro Animation

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 12

Comments are closed.

  6. I think it’s great that lately you’ve been linking reading resources with every update u’ve been making. Always link reading resources so that anyone who wants to learn more about a topic can read from the same place u did, and thus understand more and link the ideas to each other.

  8. codrops has been really good source for me to learn new thing in HTML5, jQuery, CSS3, and lots more.
    Thank You. =)

  12. Hi Awesome again, is the demo5 (hover effects) can we clickable the item with the hover effect? if yes let me know how to implement it.

    thanks in advance.