The perils of interactive javascript animation
One of the biggest lessons that I have learned when trying to build an interactive, animated element is that while divs are visually transparent – they are not physically. This means that if you have the following layers:
#container
#layer1
#link1
#image1
#layer2
even though layer2 is completely transparent – it still overlaps the link making the link un-clickable.
I have been working on a two layer parallaxing effect; each layer has 3 images and 3 clickable items. This is an example: http://www.jquery4u.com/demos/jquery4u-parallax-demo/ If you tried making the Frog clickable – the Butterfly div would block it.
As a solution – I had to move all clickable elements to a third – top most layer and match up the animation per item.
Definitely not the ideal scenario and a BIG lesson learned.