Use Hype HTML5 animation as a background on a website

Hi All,

I would like to use the HTML5 animation I have created on my website as a background for a section. I have 5 sections on this one-page website, for the 4th and 5th sections, I have created two HTML5 animations to use as background. The 4th has a text (Which I have already made, and it is responsive), and the 5th has contact form. I wanted to created the animation only on hype, and for the text and contact form, I want to create them separately so that I have more control.

I embedded the animation in my website (just like this: The two animations took their places, but the text of the 4th section, and the contact form for the 5th section are not visible (Even when I changed the z-index).


Using the above here is a quick edit of the project. Remember your scene size can be made smaller so the background is only under the text and not going all the way down.

project (666.2 KB)


Thank you so much, now everything is working fine.

So the css changes are:

For hype animation

For the elements we want to show on the top:
position: relative;
z-index: 1;

Guys, you are the future of animation!

And thank you so much MarkHunte!

1 Like