I'm developing a website where I want to upload a hero banner to the front end. But I would like to make some adjustments first before saving it. Basically, I want to have focus point, zoom in/out, or scaling functionality. I found a feature in the GoDaddy site editor, and this is what I am looking for.
Here's the sample picture from the Go Daddy website: Image from GoDaddy
Upon my research, I found some functionality I needed. For focus point, I found it here: https://image-focus.stackblitz.io/, and there are many libraries out there with zoom in/out or image scaling functionality. I need some JS library that packages it all.
There are a variety of JS libraries that could accomplish this for you, each with their own set of requirements and configuration. I haven't used the GoDaddy site editor, so I'm not sure exactly what would work there. However, https://npmjs.com is an excellent resource for finding one-off packages that could work for this.
From a programming perspective, these effects can be controlled via the CSS transform properties scale, and translate. Scale will "zoom" the image by changing the scale factor, and translate will allow you to position/move the image relative to its internal container. You can find more info about those on Mozilla's documentation site.