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

Luke — Mon, 23 Oct 2023 10:43:35 +0000

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 👇

Make rotating circular text using Tailwind or plain CSS

Luke — Sun, 22 Oct 2023 22:35:03 +0000

A preview of the end result!

To get started, we're going to need to create some text with the letters following a circular path.

Photoshop makes it easy.

1. Select the ellipse tool

2. Change the mode from shape to path

3. Draw a circular path for the letters to follow
Tip: hold shift + option/alt for a perfect circle

4. Select the horizontal type tool

5. Type your text
Tip: hover over your circle path and click when you see the squiggly line icon showing

6. Export as PNG, place it somewhere in your project folder and import it into your project
I'm using React so I'm importing it like so:



import CircularText from "./images/circular_text.png"

export default function App() {
    return (
        <img src={CircularText} />
    )
}

7. Apply an animation

Using tailwind:



<img
    src={CircularText}
    className="animate-spin"
/>

Using plain CSS:



img {
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}

8. Adding something in the middle
I'm going to do so by grouping the images in a div and centering the middle image using absolute positioning.



<div className="relative">
    <img src={CircularText} className="animate-spin"/>
    <img src={MiddleImage}
         className="absolute left-1/2 top-1/2 w-11 -translate-x-1/2 -translate-y-1/2 transform"
    />
</div>

9. Changing animation speed
If you're using plain CSS, you can change the animation speed by adjusting the value of the animation-duration property.

Tailwind users, you're going to have to jump into the tailwind.config.js file. Here, I'm extending the default spin animation into a new animation I've called spin-slow. Make sure to use the name of your new animation back in your <img /> e.g. <img src={CircularText} className="animate-spin-slow" />



/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{js,ts,jsx,tsx,html}"],
    theme: {
        extend: {
            animation: {
                "spin-slow": "spin 25s linear infinite",
            },
        },
    },
    plugins: [],
};

Credit to Emanuele Papale for the inspiration

Connect with me on LinkedIn

DEV Community: Luke

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

Make rotating circular text using Tailwind or plain CSS