Superimpose hype animation on a web page

1

Hello
I would like to superimpose an hype animation on an existing web page, is it possible and how to ?

Thanks
Philippe

2

Can you clarify what you mean by ‘superimpose’? This thread might be helpful if you’re hoping to embed / place a Hype document on an existing webpage: Video tutorial: Uploading your Tumult Hype document to a Web Server and Embedding Within Another HTML Page

3

In fact I would like a rain of stars over the entire html page

4

You’re bringing me back to Geocities :slight_smile:

Don’t think Hype is built for this specific stellar use case, but check out:

5

@Danial is right,

But it can be done but case by case… ( also step in the advanced direction )

Here is an example.

I created a Basic HTML page.

I then made a simple Hype project with an image or stars.
The Projects scaling is on.
The Image is pinned to all sides and both flexible scalings directions are on for it.
I added some basic animation to the scene.

I then make the scene background transparent using the Document editor.

I then copied the the hype DIV code

    <div id="untitled_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
        <script type="text/javascript" charset="utf-8" src="Untitled.hyperesources/untitled_hype_generated_script.js?54858"></script>
    </div>
    
    <!-- end copy -->

to the basic html pages body.

Change the hype DIV style’s position from relative to absolute

Thats it.

Basic page with the Hype DIV

<!DOCTYPE html>
<html>
     <head>
    
      </head>
<body>
   <!-- copy these lines to your document: -->
    
    <div id="untitled_hype_container" style="margin:auto;position:absolute;width:100%;height:100%;overflow:hidden;" aria-live="polite">
        <script type="text/javascript" charset="utf-8" src="Untitled.hyperesources/untitled_hype_generated_script.js?54858"></script>
    </div>
    
    <!-- end copy -->
   
     <div style="background-color:#696969;" >
<h1>My First Heading</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>


 </div>

</body>
</html>

But note: I used a simple web page to do this, So it was easy for me to make the Hype DIV float on top of the other DIV in the Basic Html. It may be hard to do in a real page

Example Page

1 Like
6

Mark delivers once again!

Very cool.

On a related note: https://www.congress.gov/bill/114th-congress/house-resolution/642

1 Like
7

Hahal. Tumult School of Sorcerers and Sorceress.

8

Very cool
Great thanks Mark and Daniel too, I will try this solution.

9

With your efficent help, I succed in my project.
You can see it at : http://www.chocolatroussel.fr/indexanim.php

I just copy the hype code at the begining of my main div container, set position at “absolute” and Z index to 2 and it runs, by security I set navigation links in my hype file as transparent buttons.

Great thanks for your help
Phil

1 Like
10

Totally love it.

Unrelated to this setup though,
I noticed a few errors coming up about loading some images... just thought you should know :smile:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (RC02.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (RC01.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (RC04.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (RC03.jpg, line 0)

11

In fact I forget some code for a slider in the “header”. It would be ok now !
Thanks for the feedback
Phil

12

clicking Accueil & Nos Produits text reloads the scene.

13

That’s Ok
Thanks
Phil