Tutorial: Recreating the Touch Ripple Effect as Seen on Google Design

A tutorial for recreating Google Design’s Touch Ripple effect using jQuery and SVG.

About the Author

Natalie MacLees is a front-end web developer and UI designer and is founder + principal of the interactive agency, Purple Pen Productions. She is the author of jQuery for Designers, now in its second edition. She founded and runs the jQuery LA Users' Group and together with Noel Saw she heads up the Southern California WordPress User’s Group, organizing WordPress meetups, help sessions, and workshops. She is the lead organizer for WordCamp Los Angeles 2014 and organized the first annual Website Weekend LA. She's also the founder of the Los Angeles chapter of Girl Develop It, bringing affordable and accessible coding classes to the community. She makes her online home at nataliemac.com.

Learn more about Natalie

About the Book

This book offers approachable and beginner-friendly lessons for designers with little or no background in JavaScript. It helps unmask the popular JavaScript library by simplifying how to create dynamic website features such as animated slideshows, parallax scrolling effects, responsive design, and more! Starting with an introduction to the jQuery library, and a brief description of JavaScript, you will then work through a few simple tasks before diving into using plugins to quickly and simply add complex effects with just a few lines of code. You'll learn how to build an animated drop-down menu, how to show content in lightboxes, and how to create an assortment of slideshows and sliders. Create impressive effects on your web pages with just a few lines of code.