Hello!
I’m embarking on a rather challenging little logo for a project, the logo uses two images, one superimposed upon the other with mix-blend-mode: screen; – these images move from either end of the container (using keyframes) to join as one. The challenge is the words “carved” into both images have to line up perfectly to create the effect (Example: https://i.imgur.com/NzfuyRb.gif.)
I’ve been able to make this effect just fine for a specific screen size – but the problem is when the screen size changes the images no longer match up so the effect is ruined. I’ve used percents rather than pixels in the keyframes with the hope that it would be scalable but alas, when you increase or decrease the screen size, the difference in the size and consequently the relationship of the two images changes so they’re no longer lined up.
Here’s the code involved…
https://codepen.io/anon/pen/eMvJyL/
I was hoping someone here might have an idea about how to get the images to line up despite the screen size changing.
And if folks here have a different idea about approaching the effect (- perhaps keyframes isn’t the way go about this?), I’d love to hear your suggestions.
Thanks in advance. :)
