Scrollable Content On Top of Fixed Content

1

Hey all. I’m a bit new to Hype and was just wondering if anyone knows how to setup a document so that text/copy-based content (which extends beyond the bottom of the page’s scene) is scrollable on top of a fixed background image? Right now I have a default desktop page size setup (both L x W) with the fixed background picture added and the text content added on top (which, again, extends beneath the bottom of the scene layout). Basically I’m just wondering how to make the text scrollable because right now it’s fixed (just like the picture background content) and the bottom part of the text is cutoff / is unable to scroll into the scene.

2

To give you a better indication as to what I’m talking about, check out the “About” section on this guy’s portfolio website: http://lukasbruhn.com/

See how the text scrolls up and down yet the background remains fixed? This is exactly what I’m trying to achieve.

3

set your background picture to fixed in the HTML Header...

 <style>
 #pict {position: fixed !important}
 </style>

fixed.hype.zip (62.9 KB)

4

Ok I’ll try it out thanks. But what about the movable text? As you can see, I’ve listed out all of my projects in the form of super large letters, some of which extend beneath the current viewport space. I’d love to make the text to be able to move up and down without impacting the background image (which youl’ve already posted).

Ryan

Screenshot1.png3360×2056 1.13 MB
Screenshot2.png3354×2054 1.18 MB
Screenshot3.png3360×2058 1.24 MB

5

I’m not sure, but I think you’ll be limited to the height of your scene for it to scroll like the webpage you used as an example.

1 Like
6

Most elements in Hype have an option to change it’s “overflow” property. In the Metrics Inspector you have an option to change it to “scrollbars” or “auto scrollbars” which will make the element scrollable so that you can see the content. This may or may not be the desired outcome for you but it’s worth noting.

Edit* Also in the example above the about section is an iframe (probably a HTML Widget in Hype) so it’s automatically scrollable based on the content inside

1 Like
7

Would we be able to do the same thing with symbols? The symbols would be fixed

8

Yes.

Check out @gasspence's example: fixed.hype.zip (62.9 KB)

Just turn the image into a symbol.

1 Like