Streaming live at 10am (PST)

Scale transform an image behind a cut-out


#1

Hi all,

On my personal magic site, I thought of creating a cut out of my face and using a galaxy image behind it that moves to create a "that's cool" moment when the visitor arrives.

I have it working the way I want on desktop, but I'm not sure the best way to get it working on mobile.

http://magicbymark.webflow.io/sandbox
https://preview.webflow.com/preview/magicbymark?preview=376da506478463459d651106c2f4aa7e

I'm using the background image for the cut out and positioning everything else around it which isn't ideal as it'll be a mess on different devices.

Is there a better or neater way all round to do this, maybe using code?


#2

Mark is the effect just behind the face? Are you using a gif or an interaction to move the background image? One thought I have is place the face in a smaller div than you have and apply the background image to that div. You can resize the div as need for each device. It is a cool effect. Let me know if you need help with it.


#3

Yes I'm using an interaction just behind the face at the moment.

So if I use a div with the galaxy image and add an interaction to scale, how do I stop the face scaling too as the face will be a child of the div?


#4

give a second uploading a screencast for you. but basically make a smaller div whatever size you want. place all of the items within that div position absolute. And make the div overflow hidden. You are stacking layers. So I forgot to mention in the screencast you will have to set the z index for the face to stay above the galaxy image. I did both the header and the face in the div though you may just want to create a div with the face and galaxy only. Let me know if you need any clarification.


#5

#6

YES! That's perfect. I was sitting away from the computer and thought... I need to make them siblings! Then I saw your reply so I've just done it.

I've made the png 500 x 500 too so it's easier to move around.

I"ll make the interaction a bit more subtle so it's not "in the face".
Thank you for the clear instruction Jeremy
:webflow_heart:


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.