Feasibility of a landing page with progressive animations and lightbox

I would like to know if in Hype there is the possibility to create a landing page, which:

  • is usable via mouse wheel, which allows you to view animated content in sequence
  • provide anchor points, accessible via a synthetic side menu

I enclose the demonstrative example that I would like to reproduce in Hype:

Thanks for your attention and help

1 Like

Yes! There are two resources that I have seen that would help you do that. One is a template from Hype Docks - https://www.hypedocks.com/apple-classic/

Another resource to look at is this post: Parallax image background based on screen position - Feature Requests - Tumult Forums some discussion about this particular need

Hope this help!


Thank you very much @AlexSteele :smiley:

1 Like

Here's the documentation link for the built-in bit used in that example: Viewport Actions.

1 Like

Work in progress of the landing page!

I am attaching a demo of the project to clarify what I am doing:

test.hype.zip (24.5 KB)

The contents that appear gradually include extra contents (popups, videos etc ...) accessible via buttons (N.B. in the Test file only the POPUP button is active, for now.)

I was wondering if you can make those popups:

1 - are "docked" in the center of the screen (or browser view, doing the browser resizing)

2 - upon activation, block or prevent scrolling of the landing page

Thanks for any suggestion!

a very easy approach is to open a so named popup as a extra scene that is responsive.

1 Like

Hello @h_classen,

i tried the indicated mode, but the two characteristics that I would like to obtain

remain unresolved.

Even creating an "extra landing popup", the script in the HTML header (I think it is that) makes the page scroll anyway, even if I have not applied the "parallax" function to it that I have instead applied to the landing page "On loading scene".

Then the popup box "travels" freely up / down on scrolling.

Plus, returning from the "extra landing popup" to the landing page, the timeline boxes make an extra unwanted repositioning movement ...

Or maybe I didn't understand what you mean and am I doing something wrong? :thinking:

my idea was this fakePopUp:
fakePopUp.hype.zip (23.0 KB)

*has got a very little bit of code to scroll to last position when the popup is closed

1 Like

Nice idea.

Thank you @h_classen, I tried to reproduce your setting in my file! But I don't understand why the preview starts from the popup instead of the landing page :thinking:

I attach the file for clarity:
prova-forum.hype.zip (503.6 KB)

there's been an action to switch the scene on symbolload :ghost: in your file

... removed the symbolaction and i also turned off everything that seems to do nothing or throws errors :slight_smile:

prova-forum-fixed.hype.zip (500.9 KB)

1 Like

Hello @h_classen,

thank you for the tip, I found the action in the symbol you were talking about :wink:

The method you propose effectively solves the popup block in the center of the scene and the block of parallax swiping, but unfortunately three new problems (:roll_eyes:) are generated:

1 - the return to the landing page proposes the movements of the groups-symbols T01, T02, which should instead remain fixed;

2 - using the new "untitledFunction" function instead of the "parallax" function generates several problems with page scaling. I need this landing to be usable both in the 2388 x 1668 resolution and as an HTML page from pc / ipad / mobile, and the "parallax" function seems to give no problems in this sense;

3 - the time interval to return from the popup at the height of the last button clicked generates a "settling pause" a bit unpleasant to see :-/

The ideal would be to be able to manage the popups as symbols on the same landing page, and that these, once "called" by the buttons, "anchor" in the center of the view (2388 x 1668, but also to the browser, resizing it, to the ipad screen, etc.).

And if the popup, once "called", could prevent the parallax swiping of the landing page, it would make everything more orderly.

My ignorance in programming only drives me to desire the ideal I have in mind without knowing how to achieve it :sweat_smile:

Browsing the forum I found a post from a few years ago with @Daniel's indications on a plugin called Featherlight. Any indication on how to "bring" it into Hype?