So Google has come up with a neat feature to create a focal point for their used images inside of Banner. It is called: Focal point.
Would be nice to have and I find it important.
This concept isn’t that new at all… as always it’s just the next turn of the marketing wheel including this in tools.
There are solutions and one can adopt them for Hype. Native support might be neat as Hype has it’s own positioning on responsive elements.
See older stuff like…
1 Like
I’ll dive into that article. Thank you Mr. Zieb.
1 Like
Great article!
Native support for this would definitely be a time-saver.
Here is an older project using jQuery (with a CSS alternative):
http://jonom.github.io/jquery-focuspoint/demos/helper/index.html
Here is a comparison between an old jQuery solution and the “new” native CSS support:
http://jonom.github.io/jquery-focuspoint/demos/css-js-comparison/index.html
1 Like
Pretty cool. Lets see what Team Hype writes.
I made a simple example with CSS (experiment).
CSS-FocalPoint-Experiment.hype.zip (1,1 MB)
Native support for such behavior would be nice as it works with just two lines of CSS.
Are you sending out private pictures?
3-Wetter-Taft… passend zu meiner Stimme! 
Little update with “cover” option as in the comparission above in CSS. In JS one could do even more stuff. Now I back away for Tumult to comment.
CSS-FocalPoint-Experiment.hype.zip (1,1 MB)
Didn’t want to hijack your valid feature request!
Regards
Cool idea!
Extremely cool idea!
@MaxZieb the ease of creating a full coverage responsive image presentation in a seamless, targeted manner with this technique offers expanded possibilities in designing a multi-layout project. Thank You!
Here is an adaptation of your "background-size: cover" example with (2) breakpoints (iPhone & Desktop). Very smooth. It took just a bit of left re-positioning on one of the layout's image to get an excellent segue. Also, to eliminate the white flash between layouts, the "Use Webkit graphics acceleration" option was deselected (big difference) and enabled the "CSS Position top/left" option (smaller difference - but both together make it sweeter).
1 Like
Really nice. I made a little error in my preview as you can deselect proportional, as the “cover” overrides the normally occurring distortion. This makes sure that the rectangle can be better scaled when pinned and stretched through Hype! (was overlapping in previous files).
CSS-FocalPoint-Experiment-v2.hype.zip (1,1 MB)
Please share your final file for the public benefit if possible.
Hype could implement this with a special “cover” mode on images offering the UI for a focal point in percent (top,left).
Here is the project file I created using (2) layouts: CSS-FocalPoint-Experiment_Layouts_JHSv1.hype.zip (1.0 MB)
Thank you. I am not even sure one needs the mobile layout. But lets say some font and other stuff needs to be repositioned… then it should be fine. I rescaled the image to be pinned to the frame of the stage rather then overlapping and disabled proportional scaling as it isn’t needed for this option.
1 Like