1

I have a very complex issue and it's not going to be easy explaining it, but here I go:

I am making a parallax effect, and I have several images, layered over one another. In some of these layers, I want to have clickable buttons (the transformations I apply on my layers must also be applied on the button).

This is what the parallax looks like, DOM-wise:

<div class="parallax">
  <div class="parallax-layer" data-depth="0.9" data-layer="2">
    <div class="button" data-chapter="1">
      The Button
    </div>
  </div>
  <div class="parallax-layer" data-depth="1.0" data-layer="1">
  </div>
</div>

The Parallax plugin I use uses 3d transforms, but only moves the layers through the x/y axises. The problem with this is that depending on the layers heights, the button can be covered by the layers above him, and it becomes impossible to click on it, even if it is visible (backgrounds are PNGs with transparency).

Currently, the solution I implemented consists on adding a transform on the "button" div, and moving it forward using the z axis. This solution works on Chrome and Firefox, but doesn't change anything on Safari or Internet Explorer 8/9/10.

I'm looking for an alternative. Any suggestions for something that would be easy to implement ?

user3387633
  • 121
  • 11

1 Answers1

0

You could disable events for parts of layers where there are no buttons - using CSS pointer-events: none;

Andris Lapsa
  • 26
  • 3
  • Thanks, setting `pointer-events: none` on the layers, then `pointer-events: all` on the button does work. It doesn't work on IE however: it's easy to replicate click events on the buttons (http://stackoverflow.com/a/17978065/3387633), but I also need the hover effect to work. A solution that would work everywhere without patches would be a must for me. – user3387633 Aug 12 '14 at 09:30
  • pointer-events is supported by IE: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Browser_compatibility. OP didn't specify IE version. – Andris Lapsa Aug 12 '14 at 13:51
  • Fixed, we're trying to work with versions from IE8, and we do our testing with 8/9 and 10. – user3387633 Aug 13 '14 at 10:04