Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Parallax reveal image with curve

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #176885
    ClementP016
    Participant

    Hi CSS masters!

    I am working on a project on which I have to reveal an image over another at scroll (parallax-like effect). That’s easy. The difficult part is that the revealation line should not be straight but curved.

    Well, it’s hard to explain, so I’ve made screenshots.

    Here is what I’ve already done: already done

    When scrolling down, the blue bottle covers the black one. The white borders are the borders of the div which contains the background images.

    And this what I need to achieve: need to achieve

    The blue bottle should follow the rounded red border, like if the border of bottom’s div was curved into itself.

    Any idea of how to achieve that?

    I succeed with it using a CSS mask, but the support is not that good, it works only in recent Chrome versions.

    #176890
    Paulie_D
    Member

    Perhaps you could show us what you have done so far in a Codepen.io example.

    #176891
    ClementP016
    Participant

    Ok, here it is: Codepen

    I’ve edited my code and found a solution using absolute positionning which works. But if you still have a cleaner way to do it, it can be interesting :)

    The other problem I have with this code is with the scroll step. If you scroll smoothly, with arrow keys or clicked mousewheel it’s ok, but if you scroll using the mousewheel, the step of scroll (actually it’s 100px in Chrome on my system) makes the bottom of the animation being cut by the border (because the onePosY and twoPosY aren’t exactly 100).

    #197805
    sdt
    Participant

    Did you get the solution???help me out…same prob

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.