I have some images scrolling normally with some overlaying div’s creating a mask effect.
It works fine but I want to fade-in the scrolling images. As soon as i add the opacity animation the fading image jumps to the top of the z-index stack until it hits opacity:1 & then it jumps back to its normal z-index.
Here is the page in question.
The 3 triangle shapes masking the images belong to the fixed positioned nav column which is outside #skrollr-body (as recommended)
<div class="tri6"></div> <div class="tri7"></div> <div class="tri8"></div>
& they are positioned over the right column where the scrolling images are.
<div class="page_photo" data-400="opacity: 0;" data-700="opacity: 1;"> <img src="photos/fight1.jpg"> <img src="photos/neutron4.jpg"> <img src="photos/indi.jpg"> <img src="photos/taxi.jpg"> <img src="photos/planet1.jpg"> </div>
I set the z-index of the image to -1 & the mask div’s to 500, but that is not the solution. Not sure how to proceed – any advice?
to clarify: visit the linked site, scroll down. you will see a large image of a guy fighting. As that image scrolls 3 white triangles will appear. They should always be on top & not behind the animating opacity effect.