HTML5 and CSS3: Building Responsive Websites

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> ...