Adding Grain effect with JS

Design help Custom code
1

Hey guys,

I am looking for any suggestions/guides on how I can implement a tv like grain effect on my sections. I was hoping to do it in web flow without exporting.

Here’s the JS: GitHub - sarathsaleem/grained: Generate animated noise texture with grained.js

And below is my preview link

https://preview.webflow.com/preview/tport?preview=3a5d04a3b40ec03053023bf328ace4f9

2

@samliew has a useful guide on this:

3

Hey Stu,

That was really helpful for hosting the JS file.

I am still having issues tho actually implementing the code. I put the script src link in my footer, and then initialise the library -

How do I progress from here :S

Thanks for any help!

4

Hey Thomas,

Any luck with this? I’ve seen a few really cool examples on the showcase portion of the webflow site. Would love to give it a shot myself.

Thanks

5

Hi here is a script for the grain effect.

You can paste it before the body tag in your page settings or site settings, you can then refine the settings for the grain to your liking.

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

<script>
var options = {
  "animate": true,
  "patternWidth": 600,
  "patternHeight": 600,
  "grainOpacity": 0.15,
  "grainDensity": 1,
  "grainWidth": 0.7,
  "grainHeight": 0.7,
}
grained("#hero", options);

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

Then put an ID of hero in the div you want to use as a grain overlay. You can eventually change the ID to what you want in the script.

Though you need to publish to see the effect.

edit: just made a cloneable project

6

Thanks!

I appreciate you going out of your way.

7

Include the library file in your html page. Options. With these options you can crate customized grained effect!

8

@Greg852 What do you mean Greg?

I’m a noob at this so any help would be great.

@ColibriMedia Also I seem to be able to only apply it to the main large background of my page. How would I apply this to little rectangular div blocks throughout my page?

9

Hi @Vladan_Stegnjaic

You just need to give your divs the same ID. “hero” in my example.

10

Hey! thank you for this. Worked like a charm. Was just curious about if I want to add grain to multiple elements(with different IDs), how can I add them to my code, keeping the code clean.

Note- I’m not a developer but a designer.