Make noise overlay used in award-winning sites in 3 steps

#css #webdev #beginners #design

You may have come across this trend on Awwwards, especially in some portfolio sites on there.

You can see it clearly on David Obodo's site.

The starting point is to find a noise overlay texture image that we can use. Something subtle with a transparent background works best.

This is the one I'm going to be using. Just right click and save the image to use it with me 👇

1. The HTML
Let's make a div and give it a class. It's best to have this div just inside the body but separate from everything else.

HTML:
<div class="noise"></div>

JSX (React):
<div className="noise"></div>

2. Setting the background image and making it fill the screen
It might seem strange that we are making the image much bigger than the screen but it is necessary as it's going to be getting moved around a lot when we bring in the animation.

.noise {
    background-image: url("../assets/noise.png");
    position: fixed; // To show noise at all times
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200vh;
    opacity: 0.5; // To make the effect more subtle. You can adjust this to your liking.
}

3. Adding a noise animation
The idea here is to move the image around very quickly. First we need to add the animation property to our existing .noise selector.

.noise {
    // Your existing code
    animation: noise 0.3s infinite;
}

Now for the keyframes:

@keyframes noise {
    0% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-5%, -5%);
    }
    20% {
        transform: translate(-10%, 5%);
    }
    30% {
        transform: translate(5%, -10%);
    }
    40% {
        transform: translate(-5%, 15%);
    }
    50% {
        transform: translate(-10%, 5%);
    }
    60% {
        transform: translate(15%, 0);
    }
    70% {
        transform: translate(0, 10%);
    }
    80% {
        transform: translate(-15%, 0);
    }
    90% {
        transform: translate(10%, 5%);
    }
    100% {
        transform: translate(5%, 0);
    }
}

That's it!
If you now set your body's background colour to a dark colour you should have something that looks like this 👇