When you press and hold an icon on your iOS (iPhone/iPad/iPod) device’s home screen, you’ll get the ability to rearrange the icons or uninstall the app associated with it. That’s really boring and not the interesting part I want you to focus on. The interesting part is what these icons do as a result of you pressing and holding. They wobble and jiggle (aka wobiggle) around. It’s pretty awesome.
Anyway, I thought it would be fun to re-create that effect. After about 30 minutes of fiddling around, you can see my attempt by visiting http://bit.ly/iOSWobble or by looking at Figure 12-1:
Figure 12-1. Each of these icons is wobbling around
In my very humble opinion, this implementation is really really close to what you see on an iOS device.
Anyway, in this deconstruction, you will learn all about how this effect works. It’s going to be a lotta fun. Before you proceed, just make sure you are up-to-date on working with nth-child selectors. Otherwise, your fun will be lessened by a great deal of confusion and possibly crying. You have been warned.
The Full HTML and CSS
Before we go any further, let me throw at you all of the HTML and CSS that makes this example work:
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month, and much more.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
