2

I have a scroll behaviour that needs to work like the one I have in the jsfiddle link.

Essentially, there is a non repeating background image, which has pockets which the circle must appear to disappear behind (to feel like they are being covered).

What I have done is each track has it's own circle with a fixed position in the center of the screen, which gets clipped as it exits it's container's. The circle gets restored when it's within it's container. The last container has it's circle clipped, and the next block has it's circle start drawing it's one.

The behaviour works well in Chrome and Firefox, however internet explorer (latest) seems to take badly to the clipping, leaving the circle inconsistently unrestored.

Is there a fix or alternative way to do this?

https://jsfiddle.net/a6f31wny/

clip: rect(auto, auto, auto, auto);
David Alsh
  • 6,747
  • 6
  • 34
  • 60
  • 1
    `clip` is deprecated. – Oriol Aug 03 '16 at 21:31
  • Yes, I agree @Oriol, the OP should \*shudder\*, use **Negative Margins**: http://stackoverflow.com/a/13521353/6525260 – Arnav Borborah Aug 03 '16 at 21:43
  • I don't believe I am able to achieve the scroll behaviour I am trying to implement by using negative margins. Currently, clip allows me to dynamically clips an fixed position element in the centre of the screen based on the scroll position of the page – David Alsh Aug 03 '16 at 21:51
  • Try https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path – Owen Aug 04 '16 at 02:14

0 Answers0