From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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
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
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
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.
thanks a lot. I love these demos
So nice..
Excellent!
Thank you so much – every script here is really inspiring!
the problem is css3 on ie best regards cesare casadonte
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.
And please consider making e-books out of your articles! =))
codrops has been really good source for me to learn new thing in HTML5, jQuery, CSS3, and lots more.
Thank You. =)
Amazing! That’s awesome!
like so much……..
nice scripts
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.