How to make a layer to be a link? about parallax

[nicmare]

that my question too! how can we have the clouds clickable for example? or the lighttower. just links in the top layer work :(

[deepsoul]

That's the same problem that i have. We need clickable layers

[nicmare]

i think i found a solution.
set layer to pointer-events:none;
and inside the layers you have your anchor tags. they get pointer-events:visible.
like this:
.layer {
pointer-events:none;
}
.layer a {
pointer-events:visible;
}
works here!

[michalcik]

Thanks for your replay, but it does not work for me.

[nicmare]

i am sure it works. maybe you have faulty expectations ;-). link?

[michalcik]

Here is part of my CSS:

.scene {
min-height: 460px;
position: relative;
overflow: hidden; }

.layer {
position: absolute;
pointer-events: none; }

.layer a {pointer-events: visible; }

and in HTML inside of layer I use tag <a.......

[iblong2iyush]

Does not work with me too..

[wagerfield]

pointer-events is definitely your solution, but you are using the property incorrectly. By adding pointer-events: none; to all layers, you are removing the mouse interaction with the whole layer and its children (which I assume include your anchors).

Because the positioning of each layer works with the % unit, the layers are automatically set to 100% width and height—filling the parent container (in your case the scene). Unfortunately with this setup there is not a way that I can think of where you can have links or interactive elements on multiple layers since the front–most layer will need need pointer-events enabled in order to capture the mouse events.

However if you are able to add all your links within a single layer, you can still have layers in front of it that have pointer-events: none; applied.

Hope that makes sense and helps.

[wagerfield]

Hey Guys, you'll be glad to hear that I've given the library a major overhaul to address a lot of the issues and requests that have been coming through—one of which was enabling you to have interactive elements on multiple layers.

As has been discussed above, the main problem with the previous solution was that each layer had to be 100% width and height of the parent container in order for the percentage calculations to work. I have rewritten the library so that it now uses pixels based on the dimensions of the parent container. This has allowed me to give each layer a 0 x 0 footprint, and will allow you to position your elements within this node whilst being able to reach the items beneath them.

I created another example that you can find in the examples folder included with the repository. You can also see it in action here: interactive.html.

I hope that helps some of you!