Animated Grain Texture

Listen up, web devs, 'cause I'm about to teach you how to add some serious pizazz to your boring old web page. We're talking about the grained library, folks - a lightweight little library that adds a sick grainy texture effect to any HTML element you choose.

First things first, you gotta include the grained library in your web page - you can do it right inside the closing body tag: </body>. No worries, you don't have to download anything - just add this script tag to your HTML file and you're good to go:

<script src="https://cdn.jsdelivr.net/npm/grained@0.0.2/grained.min.js"></script>

This script tag loads the grained library from a CDN (Content Delivery Network), which is just a fancy way of saying "you don't have to do anything, we got you covered." Another way to understand it is as the home for the grained.js code on the internet. Everything needs to be hosted somewhere right?

Now that you've got the library loaded up, it's time to get your options on. We're talking about options like animate, patternWidth, and grainOpacity, baby. These options control how your grainy texture effect looks, so choose wisely. Here's an example of some options you might use:

var options = {
  animate: true,
  patternWidth: 100,
  patternHeight: 100,
  grainOpacity: 0.05,
  grainDensity: 1,
  grainWidth: 1,
  grainHeight: 1
};

‍

In this example, we're setting animate to true because, let's be real, who doesn't want their grainy texture effect to be animated? We're also setting the patternWidth and patternHeight to 100, 'cause that's just a nice round number. The grainOpacity property controls how see-through the grain is, while grainDensity determines how dense the grain pattern is. Finally, grainWidth and grainHeight control the size of each individual grain - go big or go home, am I right?

Now that you've got your options all set up, it's time to apply the grainy texture effect to your chosen HTML element. You can do this with just one line of code, people. Check it out:

grained("#grain", options);

In this example, we're applying the grainy texture effect to an element with the ID grain. We're passing in the options object we created earlier as the second argument to the grained function.

Lastly, to make sure our grain background doesn't completely take over everything else on the page, we can apply set pointer-events to none. This will make sure the inportant stuff on page is still selectable and clickable, like buttons and such.

<style>
#grain {
	pointer-events: none
}
</style>

And that's it, folks! With just a little bit of code, you can add a sick grainy texture effect to your web page and make all the other web devs out there jealous of your mad skills. So get out there and start graining, my friends!

‍