I want the entire web page to go dark when a button is clicked in my Hype-Animation. I could achieve this with a dark rectangle that's significantly larger than the scene's set size. But even if I set the rectangle's "Content Overflow" to visible, the rectangle doesn't display larger than the scene's size. How can I work around this?
And then there's still the problem that the hype animation is loaded as an iframe. So, probably, only the iframe area will be dark anyway. Right?
How can I solve this? Does anyone have any ideas?
Greetings
There's probably many techniques you could use, but there's a couple ways that stand out to me for you to try.
The first would be that you could use Hype's Flexible Layout system. Please see the documentation there, but in short after turning on a scale of 100% width/height in the scene inspector, you can make an element that takes up the whole scene size, and then in the metrics inspector turn on all the sizing and position pins to make it take up the whole page. The Flexible Layout disables the overflow:hidden on the scene, but also will make everything top-left aligned so you may need to adjust other aspects of your layout for this though.
The other method would be to use a little bit of CSS to override an element that could do the work. First, you'd need CSS to override the overflow:hidden on the scene, and then you could make a class that will just cover the viewport and used by an arbitrary hype element. The Head HTML would look something like:
<style>
.HYPE_scene {
overflow: visible !important;
}
.overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
transform: none !important;
}
</style>
Then just add overlay as a class name on an element via the Identity Inspector. You'd probably want to control it via animating the display hidden/visible property. Just also make sure it is on top.
Perfect. Thanks! You've put me on the right track with the "flexible layout." I hadn't even considered that. Thanks very much for the CSS tip, too. But it looks like I don't need it and will try to move forward with the "flexible layout." 
1 Like