I'm using parallax.js and animate.css for a project. I want to click on one red circle to fire a function, but the click event isn't working on them (or anything inside the <ul> layer).
I have tried so many things now and nothing has worked. The only thing to get it working is when I delete the height attributes of the #scene <ul> but then it doesn't look right.
EDIT : The circles should hide when I click on them. It's like a layer would lay over them but there is nothing.
There is nothing wrong with your Javascript here
The problem is that your <li> elements are masking your red circles. Visually you can see them, but if you right-click and Inspect Element on one of your circles it will show your last <li> item. You can also check that your animations are working by writing in your console:
$('.c1').click()
You can usually fix this playing with their z-indices. I.e. Change the z-index of your circles to be higher and set the values of z-index on your other elements to be lower.
However, the issue seems to be that you have a each circle in a new <li> element. I was able to fix this on your site by having the following:
<div class="circle c1 animated"></div>
<div class="circle c2 animated"></div>
<div class="circle c3 animated"></div>
<div class="square s1"></div>
<div class="square s2"></div>
<div class="square s3"></div>
In one <li> element instead of having them in separate ones.
