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!

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;
    }