Comments (9)
that my question too! how can we have the clouds clickable for example? or the lighttower. just links in the top layer work :(
from parallax.
That's the same problem that i have. We need clickable layers
from parallax.
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!
from parallax.
Thanks for your replay, but it does not work for me.
from parallax.
i am sure it works. maybe you have faulty expectations ;-). link?
from parallax.
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.......
from parallax.
Does not work with me too..
from parallax.
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.
from parallax.
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!
from parallax.
Related Issues (20)
- found bugfix for mediastream handling HOT 1
- Demo link is broken HOT 2
- Not working with absolute positioned layers HOT 1
- Firefox: Buttons and Links in Parallax Scene doesn't work anymore after scrolling.
- [DOC] Faulty Demo Link HOT 3
- Parallax layer flickering on mobile landscape mode HOT 1
- Parallax animations moving really slow on Mac Chrome HOT 6
- [support] parallax only updates on click in react HOT 3
- Demo link in README is broken HOT 1
- Does not work with Angular Universal HOT 1
- npm install doesn't seem to work when using `import` HOT 6
- Gyroscope troubleshooting on WordPress HOT 1
- Uncaught ReferenceError: Parallax is not defined HOT 1
- Img starting position HOT 1
- issue to import it
- Anyway to disable parallax only for Mobile Devices. HOT 3
- Request to add a clock, date and weather text HOT 8
- Works awesome… not on mobile though HOT 2
- Bug! this repos home page shows up in desktop HOT 5
- Strange link problem only with Firefox (Windows, Mac, mobile, etc. HOT 18
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from parallax.