'Landing page' as top part of a scroll view

Responsive
1

Check out these two sites:

http://animal.cc
http://maverickbysigma.se

A rather common solution today; however big the web browser view is, the ‘landing page’ scales to that size - and it is actually just the top part of a scroll view.

As the user scrolls down, more content is revealed. That content seems not to be visible until the user has scrolled down. Again, regardless of the size of the web browser view.

How would one solve that in a good and stable way with Hype?

Hints are welcomed.

2

Nice effect. It looks like there is a container which needs some css-code. It could be done, takes some time to build and test. Not impossible at all, also in Hype.
I look at it soon if i have some time.
Probably the effect is made with absolute positioning…? Needs testing.

1 Like
3

Guess there is no ‘clean’ way to do this with hype.
example

ToDo:
create a flexible layout in hype
add some content below
run

$('.HYPE_scene').not(".HYPE_element").css('overflow-y', 'visible');
$('#' + hypeDocument.documentId()).css('overflow-y', 'visible');

on sceneload

variation to go with hype:
first scene flexible layout
on mousewheel direction down switch to a following scene

1 Like
4

Thanks h_classen !!

You always have a quick and interesting idea.

I’ve been playing and testing a bit with the ‘on scene load’ approach. My layout pretty much works for most of the web view sizes I have tested.

5

Hi, very nice example. Please, can you share with me the file you have made?