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.
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.
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.
