Create a Dynamic Marquee with CSS Animations

Marquee animations are a classic web design element that adds dynamic movement to text, capturing the user's attention as they scroll through a webpage. In this article, we will explore how to create a visually engaging marquee animation using HTML and CSS. The marquee effect can be an excellent addition to your website, enhancing the user experience and making your content stand out.

Figure 1: Example of a marquee animation in action.

The marquee animation we will create involves a smooth scrolling text effect that pauses when hovered over, providing users with a dynamic yet controlled interaction. This approach is particularly useful for highlighting key messages, promotions, or slogans on your website. Below is the code that defines the marquee structure and animation:

        <div class="marquee">
          <div class="marquee__group">
              <h2 class="marquee__box">UNLOCK YOUR POTENTIAL.</h2> 
              <h2 class="marquee__box">ELEVATE YOUR HEALTH.</h2> 
              <h2 class="marquee__box">TRANSFORM YOUR LIFE.</h2> 
          </div>

          <div aria-hidden="true" class="marquee__group">
              <h2 class="marquee__box">UNLOCK YOUR POTENTIAL.</h2> 
              <h2 class="marquee__box">ELEVATE YOUR HEALTH.</h2> 
              <h2 class="marquee__box">TRANSFORM YOUR LIFE.</h2> 
          </div>
        </div>
        

Figure 2: The code implementation for the marquee animation.

Understanding the Key Elements

The marquee animation is composed of several key elements that work together to create the desired effect. The main components include the .marquee container, the .marquee__group that holds the text elements, and the CSS animations defined within @keyframes. The mask-image property ensures that the text fades out smoothly at the edges, while the hover effect pauses the animation, allowing users to focus on specific text.

Adding Custom Styles

To further enhance the visual appeal, you can add custom styles to the marquee text, such as adjusting the font size, color, and spacing. Additionally, incorporating elements like the rotating triangle seen in the code example can add an extra layer of interactivity and visual interest. The triangle is animated using the @keyframes semi-rotate rule, creating a subtle rotation effect that complements the scrolling text.

        .marquee {
            display: flex;
            font-family: "Neue Haas Grotesk";
            mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
        }
        .marquee:hover .marquee__group {
            animation-play-state: paused;
        }
        .marquee__group {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
            min-width: 100%;
            -webkit-animation: scroll-x 70s linear infinite;
                    animation: scroll-x 70s linear infinite;
        }
        @media (prefers-reduced-motion: reduce) {
            .marquee__group {
                -webkit-animation-play-state: paused;
                        animation-play-state: paused;
            }
        }
        .marquee--reverse .marquee__group {
            animation-direction: reverse;
            -webkit-animation-delay: -3s;
                    animation-delay: -3s;
        }
        @-webkit-keyframes scroll-x {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(calc(-100% - calc(clamp(10rem, 1rem + 40vmin, 30rem) / 14)));
            }
        }
        @keyframes scroll-x {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(calc(-100% - calc(clamp(10rem, 1rem + 40vmin, 30rem) / 14)));
            }
        }
        .wrapper {
            display: flex;
            flex-direction: column;
            gap: calc(clamp(10rem, 1rem + 40vmin, 30rem) / 14);
            margin: auto;
            max-width: 100vw;
        }
        .marquee__group, .marquee__box {
            position: relative;
            display: inline-block;
            font-size: 71.6px;
            font-weight: 400;
            color: #272525;
            margin: 0;
            transition: 0.5s;
            letter-spacing: 2px;
        }
        .triangle {
            width: 0;
            height: 0;
            border-left: 18px solid transparent;
            border-right: 18px solid transparent;
            border-bottom: 30px solid #FFA423;
            animation: semi-rotate 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            transform: rotate(-15deg);
        }
        @keyframes semi-rotate {
            50% {
                -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                -webkit-transform: translateY(25px) rotate(-53deg);
                transform: translateY(25px) rotate(-53deg);
            }
        }
    

Figure 3: Example of custom styling added to the marquee text.

Conclusion

The marquee animation is a versatile tool in web design, offering a simple yet effective way to capture attention and convey important messages. By using the code provided in this article, you can create a seamless scrolling text effect that enhances your website's user experience. Whether you're highlighting promotions, sharing testimonials, or showcasing key features, the marquee animation can be adapted to suit various design needs.

Figure 4: Final implementation of the marquee animation on a webpage.