Header JS injection doesn't work

Site URL: https://www.johan.media/

Hello everyone!

First time here, I've been looking on the web how to apply a grained js library (I guess it's how we call it). I have basic knowledge in HTML and CSS but not in JS so it was quite new.

So I want to add this: https://sarathsaleem.github.io/grained/ to my website.

In the header injection (Setting > Advanced > Code Injenction) I added this code:

<script>
src="https://cdn.rawgit.com/sarathsaleem/grained/master/grained.js"
</script>
<script>
var options = {
         animate: true,
         patternWidth: 100,
         patternHeight: 100,
         grainOpacity: 0.05,
         grainDensity: 1,
         grainWidth: 1,
         grainHeight: 1
 };

grained('#siteWrapper', options);
</script>

I used the id siteWrapper maybe I should use an other one?

In Custom CSS:

#siteWrapper {
  width: 100vw;
  height: 100vh;
}

But it doesn't work. Any help out there? I'm lost on that one

(my website: www.johan.media)

Inspiration:
https://grain-effect-hero-section.webflow.io/

Thanks a lot 🙂

<script>
src="https://cdn.rawgit.com/sarathsaleem/grained/master/grained.js"
</script>

Needs to be

<script src="https://cdn.rawgit.com/sarathsaleem/grained/master/grained.js"></script>

@rwp

Thanks mate! I updated it but I think there's still something wrong. Any idea?

Console is kicking back this error:

Grained: cannot find the element with id #siteWrapper

Also, you have the opacity set to 0.05, so even if you do get it working, you probably wont see it.

@rwp 

very interesting... The id #siteWrapper does exist... 🤔 Any idea?

For the opacity it's right to put 0.05. However, I put it at 1 so it will be really visible if i get it work!!

You could put a code block in the page with the code

<div id="test"><br><br><br></div>

Target that div with the grained function.....just to see if it works.

@rwp

Great idea! It works! But I had to move the script to the footer, thanks a lot for the help and your time, will try to see how to apply to the full website. 

@rwp

So now it works but not really. I'm calling for the id #siteWrapper. As you mentionned:

33 minutes ago, rwp said:

<div id="test"><br><br><br></div>

Innstead I named it:  #siteWrapper

Now it seems that the squarespace code injection doesn't let us call for their own id.
I'll have a look tomorrow and if you (or anyone) have an idea to solve it, don't be shy 🙃

1 hour ago, johanboeuf said:

I'll have a look tomorrow

Lol 🤣 It's 2am

Finally I found it! Here's the trick!

Footer Injection

<script src="https://cdn.rawgit.com/sarathsaleem/grained/master/grained.js"></script>
<script> var options = {
  "animate": true,
  "patternWidth": 100,
  "patternHeight": 100,
  "grainOpacity": 0.02,
  "grainDensity": 1,
  "grainWidth": 1,
  "grainHeight": 1
}
grained("#siteWrapper", options);

/*
background-color :rgb(204, 204, 204)
*/
</script>

Custom CSS

#siteWrapper  {
  z-index: 1!important;
}

#page {
  z-index: -1!important;
}

EDIT

But now I can't interact with my website