Forum Discussion
create a magnifying glass to read the different regions of an image
Good evening
I would like to know how to zoom the different regions of an image in storyline 360. I do not want the learner to use the player functions. I hope that by moving around the image with...
Basic setup to get something like this working..
- Add the image to 2 layers.. 1 small sized and 1 in the zoomed-in larger size.
- Use a clip-path to mask the bigger layer to a circle. Check https://bennettfeely.com/clippy/ Something like this will be the resultclip-path: circle(20% at 50% 50%);
- Then you need to ensure the upper layer.. the one with the clip-path moves/drags along when moving. I advice using GSAP Draggable for that.
Code pen sample here:
https://codepen.io/creme/pen/gOYrvxM
or this one...
https://malaman.github.io/js-image-zoom/example/basic.html
Solutions for this are plenty.
https://www.w3schools.com/howto/howto_js_image_zoom.asp
Math, when you say to layers do you mean two layers in storyline like the base layer would be the orginal picture and then layer 1 would be the zoomed in image with a clip path or is it two layers in the timeline on the base layer.
Thanks
