johan-media Posted July 7, 2020 Share Posted July 7, 2020 (edited) 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 🙂 Edited July 7, 2020 by johanboeuf Link to comment
rwp Posted July 7, 2020 Share Posted July 7, 2020 <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> Link to comment
johan-media Posted July 7, 2020 Author Share Posted July 7, 2020 @rwp Thanks mate! I updated it but I think there's still something wrong. Any idea? Link to comment
rwp Posted July 7, 2020 Share Posted July 7, 2020 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. Link to comment
johan-media Posted July 7, 2020 Author Share Posted July 7, 2020 (edited) @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!! Edited July 7, 2020 by johanboeuf mistake in the first sentence Link to comment
rwp Posted July 7, 2020 Share Posted July 7, 2020 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. Link to comment
johan-media Posted July 7, 2020 Author Share Posted July 7, 2020 @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 1 Link to comment
johan-media Posted July 7, 2020 Author Share Posted July 7, 2020 @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
johan-media Posted July 8, 2020 Author Share Posted July 8, 2020 (edited) 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 Edited July 8, 2020 by johanboeuf rwp 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment