Noise effect header with JS injection

Hi everyone !

I'm stuck with some code... I would like to have just my header with a noise effect. I can make the script work, but the noise effect is below and behind the header.

1 - What should I do to get it in front of the header?
2 - Can we make it work with a hidden scroll header as well?

Thanks ! Danke ! Merci !

Laetitia

39 minutes ago, Letgop83 said:

Hi everyone !

I'm stuck with some code... I would like to have just my header with a noise effect. I can make the script work, but the noise effect is below and behind the header.

1 - What should I do to get it in front of the header?
2 - Can we make it work with a hidden scroll header as well?

Thanks ! Danke ! Merci !

Laetitia

Can you share your URL and the script you are using to make the noise effect so we can check it more easily?

https://laetitiaheisler.com

I followed these steps from:

And i used the code in header injection:

<div id="#header">
    <div class="grained"></div>
</div>

Script and CSS

<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("#header", options);

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

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

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

On 8/7/2024 at 10:24 PM, Letgop83 said:

https://laetitiaheisler.com

I followed these steps from:

 

And i used the code in header injection:

 

<div id="#header">
    <div class="grained"></div>
</div>

 

Script and CSS

<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("#header", options);

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

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

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

Can you add & keep code? We can check easier

yes

<div id="????">
    <div class="grained"></div>
</div>
<style>

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

<script>

var options = {
  "animate": true,
  "patternWidth": 500,
  "patternHeight": 269.38,
  "grainOpacity": 0.3,
  "grainDensity": 4.88,
  "grainWidth": 4.77,
  "grainHeight": 8.2
}
grained("#???????", options);

</script>

I would like to have the noise effect just for the header 🙂
Any suggestion ?

Thanks !

I still can't find this code in Code Injection.

Can you add & keep it? We can check easier.