Build a Double-Layer Marquee in Elementor Free!

A marquee ribbon animation is a fantastic way to highlight important sections on your website, like Contact Me or Get a Free Quote. In this tutorial, we’ll walk you through how to create a stunning Double-Layered Marquee Ribbon in Elementor Free using custom CSS. Let’s get started!

Download the resources used in this project from the link at the bottom of this blog post.

Top Ribbon Style CSS

<style>
    .ribbon-wrapper-primary {
        transform: rotate(3deg);
        left: -5%;
    }

    @media (max-width: 767px) {
        .ribbon-wrapper-primary {
            left: 0%;
        }
    }

</style>

Top Ribbon CSS Class

ribbon-wrapper-primary

Bottom Ribbon style CSS

.ribbon-wrapper-secondary {
        left: -5%;
        transform: rotate(-2deg);
    }

    @media (max-width: 767px) {
        .ribbon-wrapper-secondary {
            left: 0%;
        }
    }

Bottom Ribbon CSS Class

ribbon-wrapper-secondary

Top Ribbon Animation CSS

.ribbon-scroll-forward {
        animation: ribbon-scroll-forward 35s linear infinite;
    }


    /* Keyframes for animation */
    @keyframes ribbon-scroll-forward {
        0% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-50%);
        }
    }

Top Ribbon Animation CSS Class

ribbon-scroll-forward

Bottom Ribbon animation CSS

.ribbon-scroll-backward {
        animation: ribbon-scroll-backward 35s linear infinite;
    }

    /* Keyframes for animation */

    @keyframes ribbon-scroll-backward {
        0% {
            transform: translateX(-50%);
        }
        100% {
            transform: translateX(0%);
        }
    }

Bottom Ribbon animation CSS Class

ribbon-scroll-backward

Pause on Hover

.ribbon-scroll-forward:hover,
    .ribbon-scroll-backward:hover {
        animation-play-state: paused;
    }