Jump to content

Header JS injection doesn't work

Recommended Posts

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 🙂

Link to comment
  • Replies 8
  • Created
  • Last Reply

@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 🙃

 

Link to comment
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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.