Digital Workshop

Wanting to create a 'before-after' image slider. Like on this web site https://juxtapose.knightlab.com/ Any assistance very much appreciated. I presume this would have to be done with javascript?

Kind Regards
Stuart

It's actually a simple trick. The image that slides in and out of appearance is a child of another container. The width of the parent container is then altered to hide / show more / less of the child image. The effect is then finished by placing the second image behind the container frame.

In Opus, you place one frame (call it A) inside of another (call it B). Set the image source for the child frame (A). Then create another frame (call it C) and set the source image. Place frame C behind frame A/B. Now if you adjust the width of the parent frame (B), you'll hide / show more / less of the image in the child frame (A) and this will result in more / less of the frame at the back (C) being hidden / shown.

Once, you understand that, you simply need a method of adjusting the width based on the mouse position (there's an Opus command for this) and then setting frame B's width using this information. I don't think there is an Opus command in HTML5 for that, but the frame is just a DIV which means document.getElementById(frameA).style.width = will work directly from OpusScript.

</mack>

Thanks Mack, much appreciated. I thought there may have been some other way and I tried numerous things but with no success. I will give this clever trick a go. I think this could be a nice little utility.

Kind regards
Stuart

Here's an example - http://sandbox.interaktiv.co.uk/opus/then-and-now/

The Opus source can be downloaded from: http://www.live.interaktiv.co.uk/?section=files

using the code: then-and-now@digitalgrapevine.info

</mack>

Mack thanks very much, truly made my day. Got very quickly to the first part but have struggled trying to get a way to control the width of the frame as the mouse moved. I would not have got to this, so thanks again.