I’m trying to clone some websites I’ve liked when I came across some trickery that I can’t duplicate. I’ve seen this in a few places until I finally tried duplicating it myself. The best example I’ve seen so far is on State Street’s website (exact example is here). Essentially, I’ll see an image where only certain aspects of it move as you scroll – it’s almost like an optical illusion.

If you scroll down to the section towards the very bottom (titled “Outsourced Trading”). You can see the white lines on the left and right are moving. I also pasted an image of it at the bottom of this post.

Can anyone point me in the right direction as to how I can implement that? I tried inspecting the page, but the syntax was hard to decipher. All I know for sure is the background and the white lines are two different images.

r/webdev - Implementing Image Overlay / Dynamic Images

Thanks.



Source link

Write A Comment