OK folks here we go…
@janlucvd’s question involves transitioning between web sites - an example of this scenario is not explicitly demonstrated in the Documentation (i.e. there is no source~target page set-up).
Also, there is an facet of this process that has not been addressed, and is part of @janlucvd’s inquiry. The Documentation assumes that one just jumps (i.e. “instant” transition) from one web site to the other. But suppose You want to do a X-cut (fade) - or something other than an instant transition - then what? I will address that question later in this post.
@janlucvd - here are (2) Hype Demo projects SceneWebSite Transition.zip (41.1 KB)
that use the code that was under the heading “Linking to a Scene using an URL” in the Documentation. These two Hype projects represent the “source” web page and the “target” web page.
On-line Demo here.
This code creates a “named anchor” (using an ID such as “3”) for a Scene (div) - which sends the browser specifically to that Scene (div) on the “target” web page.
Note: In the typical Hype environment all Scenes are on one web page; each Scene is a “div” on the page.
The code does this by affixing a “#” to the Scene name… e.g. a Scene named “3” would become “#3”. So if our Hype URL address is “http://myHypeWebsite.com/myHypePage.html” the named anchor (for Scene 3 for example) would be addressed as “http://myHypeWebsite.com/myHypePage.html#3”.
So now that we know that, we set-up our links from the “source” web page to the scene in the “target” page, as shown in the attached Hype Demo projects above.
But we are not done…
There is no provision in the Documentation for transitions other than “instant”. So what we need to do is create the Scene transition of our choice, say a X-fade, on the “source” (“Website 1”) that appears to go to the “target” website (“Website 2”)… but actually the whole transition occurs on “Website 1” - and then jumps to “Website 2” (please see Fig.1 below).
No matter what You do there is going to be a visual interruption, even if it is a micro-second, as the new page loads… so keep the landing page lightweight for best effect.
Online Demo here.