Help Needed: How to embed HTML5's Canvas

Design help Custom code
1

Hi everybody,

I’d love to embed this as a background in the top section of a Webflow page (replacing the blue hero background on this page www.GeekWrapped.com):
http://www.kodhus.com/kodity/land/kod/bXCBjh

It uses Javascript and HTML5’s . What’s the smartest way to do this in Webflow?

Thank you :slight_smile:

2

Paste this custom code in Page Settings > Custom Code > Footer Code:

<style>
#Top > * {
    position: relative;
    z-index: 1;
}
</style>
<script>
Webflow.push(function() {
  $.getScript('https://cdn.rawgit.com/samliew/fdf0858873fedcdc6a2e14aab8165832/raw/cb233e6d28086f418cd930134a19f5fb7df2e540/starfield.js', function() {
    var starField = new StarField('Top').render(333, 3);
  });
});
</script>

Give your newtopnavbar element a z-index of 2 or higher.

1 Like
3

Hi Sam,

Thanks for your help. So I plan to use this only on one page. LEt’s say a brand new page (empty).

So on that new page I add your code to the “Before tag” custom code field (just for that page)?
Then do I add an embed element in Webflow or do I do something else?

The goal is to make the background of the top hero section that HTML5 canvas.

The source page http://www.kodhus.com/kodity/land/kod/bXCBjh actually shows an embed code, in case that’s easier:

Thanks @samliew

4

Before closing body tag (last/bottom field). You do not need to do anything else.

5

@samliew Thanks. When I add it nothing happens. How do I tell Webflow where the animation should show and what size it should have please?

I added it here as you described but nothing happens https://www.geekwrapped.com

6

Don’t put it on a blank new page. It’s for your home page.

7

Oh, I see. I’d like to test it out and use it on different pages. Could you tell me: What part of the code needs to be changed to make it work on any page - or how do I have to rename the top section to make it fit? Thanks!

8

You can clone the home page to test it out on. The script is looking in your home page for the container that has the ID Top to insert the canvas.

    var starField = new StarField('Top').render(333, 3);
1 Like
9

@samliew It’s working, thank you VERY much, really appreciate your help!

PS: Is there a library to paste similar code snippets for other HTML5 canvas effects?
Or can I just replace the startfield.js with any HTML5 canvas CDN link?

Thanks :slight_smile:

10

No, I modified the script to suit your project. Should you require heavier custom development in future, you can always find me at Top Webflow Expert Web Developer

11

Hi @samliew, thanks. I’ll definitely have projects coming up and will reach out.

Have a smaller project already, filled out your form :slight_smile: