O'Reilly logo

HTML5 and CSS3 Responsive Web Design Cookbook by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using an event listener to animate an image shadow

Since this is the last recipe, it should be a fun recipe. This one takes a responsive image, like the one we built back in Chapter 1, Responsive Elements and Media, and uses jQuery event listeners and CSS3 to animate a shadow to follow your cursor.

This is a simple recipe, but it still works in a responsive way. The image will respond to the page width, while the jQuery is written such that it still measures the image position and mouse position on every mouse movement.

Getting ready

This recipe needs you to work with jQuery. So in the header of your new file, add a link to the jQuery libraries. Other than that, you are ready to go.

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required