I was clickety-clicking my way around the Internet and came across the Connected Ventures website. The first thing that I noticed was the “bubble menu” system used on the site. Then I noticed it was written in Flash. Surely, I thought, SVG could be used to create bubble menus too.
I got a prototype working without much trouble. Then, I refined it a bit. Here are the files:
svg-bubblemenu-in-html.xml (demo)
bubblemenu.js
It’s a little slower than the Flash version, but that could be my inexperience with SVG. Feedback welcome.
Update: Jeff Schiller made some tweaks to the bubblemenu.js file (which I updated).
- increased delta to be between -6 and +6
- initialized groups once (don’t call getElementsByTagNameNS() with every tick
- removed unnecessary setAttribute() on the groups’ x and y attributes (ed: yeah, didn’t remove some test code)
- changed the setInterval() to 100ms (ed: I bumped up to 150ms to try to reduce CPU usage)
- made sure the vertical speed was not zero
- when a bubble goes off the screen, put it above the top (not
randomly as you had it)
Thanks Jeff