DEV Community

Luke
Luke

Posted on • Updated on

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

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 ๐Ÿ‘‡
noise texture overlay

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.
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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

end result preview

Top comments (1)

Collapse
 
lopis profile image
Joao L.

Just don't forget to disable this if the user has prefers-reduced-motion enabled ๐Ÿ˜ฐ