Dear Hype users,
Could you please help me with this ?
I have a large picture in which the user can navigate with mouse events detection (jQuery). The image is moving left and right, up and down, following the mouse movement. It is quite nice, but I am facing difficulties for a correct height responsiveness. In the example attached, everything is ok but when you extend your screen in width, it is getting more and more impossible to have the real top or bottom of the image.
Thank you for helping.
Nicolas from Belgium
HYPE beatles.hype.zip (1.1 MB)
@haloniko
everything is ok but when you extend your screen in width, it is getting more and more impossible to have the real top or bottom of the image.
Under the "Flexible Layout" section of the "Metrics" panel:
Try the "Shrink to Fit" ("Zoom contents" checked ) instead of the current "Expand to Fill" ("Zoom contents" checked) setting you are currently using for "Groupe".
Thank you Jim for answering my question !
The shrink option is nice, but I will then have the background showing at some screen sizes (black borders in my case). What I would like to have is the picture always fully filling the screen (just as the expand to fill) then when the user scroll the picture just move in the viewport until it reaches its border. I hope that I can make myself clear enough. Thank you for helping so far !
Nicolas
I do not know of a better way using Hype’s built in controls - perhaps someone else has a solution here in this regard.
I would consider another approach that does not use the timeline with its finite boundaries, because a large screen size creates a problem - the scrolling distance is set and is not going to be enough sooner or later (as we’ve seen).
One idea would be an “autoscroll” - when the mouse is near the edge of the screen the image scrolls in the appropriate direction.
Here’s an example of what I’m talking about. While this is the not solution for You it shows the concept:
http://www.smoothdivscroll.com/#quickdemo
A drawback to this example is it relies on fixed zones to trigger the scrolling, whereas in a flexible environment, a fixed zone would not do - there would have to be calculations every time the screen was resized - i.e. the “auto scroll” zone is mutable.
Try a “auto scrolling” search on this Forum You will get quite a few hits.
Thank you Jim, I will give a try to the autoscrolling solution.
Best thoughts,
Nicolas
