DEV Community

Cover image for Moving Beyond Marquee: Cool Alternatives to the marquee tag
Harshita Sharma D
Harshita Sharma D

Posted on • Updated on

Moving Beyond Marquee: Cool Alternatives to the marquee tag

#webdev #tutorial #html #javascript

Remember last time, here in this blog "https://dev.to/harshitads44217/mothers-day-special-blog-2ack", we discussed how the <marquee> tag used to be a top choice for developers in the web development industry? We also discovered that it’s been deprecated for quite a while now.

But guess what? Marquee-like animations are making a comeback in modern design trends! These are creating seamless scrolling effects.
.

Marquee like animation in modern design trends

- Collection of text-marquee-effect by awwwards.com

I'm back with some cool, alternative ways to create those eye-catching marquee effects without using the deprecated tag. Let's dive in and explore these exciting techniques to implement seamless scrolling effects!

.

1. Using GSAP 😎

.

If you like using JavaScript for the frontend development tasks then GSAP can be a great tool for you. If you know what it is, then well and good, otherwise let me introduce you to the ultimate modern tool for animation.

GSAP Logo

GSAP Official Website
Infinite Marquee GSAP Forum

GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. It offers robust tools and an easy-to-use API to animate elements with precision and efficiency.

Consider this HTML code:-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Example</title>
    <style>
        #gsap-marquee {
            margin: 48vh 0;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            background-color: teal;
            border-radius: 6px;
            line-height: 2.5em;
            color: white;
            font-size: 48px;
            font-weight: 600;
            font-smooth: always;
        }

        #gsap-marquee span {
            display: inline-block;
            padding-left: 100%;
        }
    </style>
</head>
<body>
    <div id="gsap-marquee">
        <span>This is a scrolling text created with GSAP.</span>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
    <script>
        gsap.to("#gsap-marquee span", {
            xPercent: -100,
            ease: "none",
            duration: 10,
            repeat: -1
        });
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In this example, GSAP animates the inside the #gsap-marquee container. The text scrolls from right to left, creating a marquee effect. The gsap.to method moves the text by 100% of its width (xPercent: -100) over 10 seconds, and this animation repeats indefinitely (repeat: -1). The ease: "none" ensures a constant speed throughout the animation.

.
Output :-

Output of the Marquee effect Implementation using GSAP

.
This setup ensures the text scrolls smoothly and continuously across the screen, mimicking the classic marquee effect with modern animation capabilities.

.

2. Using CSS Animation 🤩

.

CSS Official Logo

Don't underestimate the power of Cascading Style Sheets. CSS alone can make powerful and interactive animations. People who have some hands on over CSS animation know it very well. If you are somewhat skeptical then consider this HTML code:-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Example</title>
    <style>
        .scrolling-text {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            background-color: deeppink;
            border-radius: 10px;
            color: white;
            margin:48vh 0;
        }

        .scrolling-text span {
            display: inline-block;
                      line-height: 2.5em;
     font-size:48px;
          font-weight:400;
          font-smooth: always;
            padding-left: 100%;
            animation: scroll-left 20s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="scrolling-text">
        <span>This is a scrolling text created with CSS animations.</span>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This code creates a scrolling text animation using CSS animations.

.
Output :-
.

Output of the Marquee effect Implementation using CSS

This code creates a scrolling text animation using CSS animations. Here's how it works. The div with class name scrolling-text contains a span where the intended text is. The desired styling is applied to the div. A deeppink background, white text, rounded corners, and hidden overflow to ensure the text scrolls within the container. The text is styled with a large font size, specific line height, and smooth font rendering. Now here comes a few points to remember:-
.
CSS Animation:

  • The span element is given an inline-block display, ensuring it takes up space and aligns correctly.
  • The padding-left: 100% ensures that the text starts off-screen to the right.
  • The animation: scroll-left 20s linear infinite applies a keyframes animation called scroll-left to the span element. This animation lasts for 20 seconds, runs in a linear fashion, and loops infinitely.

Keyframes Animation:

  • The @keyframes scroll-left defines the animation named scroll-left.
  • 0% { transform: translateX(100%); } sets the initial position of the text to be completely off-screen to the right.
  • 100% { transform: translateX(-100%); } moves the text to be completely off-screen to the left by the end of the animation.

How's it happening

.

  • The animation starts with the text positioned off-screen to the right (transform: translateX(100%)).
  • Over 20 seconds, the text moves horizontally to the left (transform: translateX(-100%)), making it appear as if the text is scrolling across the screen.
  • Once the text reaches the left side and moves off-screen, the animation restarts, creating an infinite scrolling effect.

.

3. Using JavaScript 🙂

.
JavaScript Logo

If you are a fan of using JavaScript in your project then you can consider this implementation might sound interesting to you. Here in this implementation we will be using animation like the last example but by using JavaScript.

Consider this HTML code:-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Scroller Example</title>
    <style>
        #scroll-container {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            background-color: royalblue;
            border-radius: 10px;
            color: white;
            margin:48vh 0;

        }

        #scroll-text {
            display: inline-block;
            line-height: 2.5em;
            padding-left: 100%;
            font-size:48px;
            font-weight:400;
            font-smooth: always;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">This is a scrolling text created with JavaScript.</div>
    </div>

    <script>
        function scrollText() {
            const text = document.getElementById('scroll-text');
            let position = text.offsetLeft;
            function animate() {
                position -= 1;
                if (position < -text.offsetWidth) {
                    position = text.parentElement.offsetWidth;
                }
                text.style.transform = `translateX(${position}px)`;
                requestAnimationFrame(animate);
            }
            animate();
        }

        document.addEventListener('DOMContentLoaded', scrollText);
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

.
Here JavaScript is used to create a scrolling text effect similar to the <marquee> tag.

Output :-

Output of the Marquee effect Implementation using Javascript

The #scroll-container holds the text and ensures it stays within a defined area. The #scroll-text element is positioned within this container and moved continuously from right to left using the animate function. This function updates the position of the text and resets it once it has fully scrolled out of view, creating an infinite scrolling effect. The styling applied ensures the text and container have a visually appealing design with a blue background, white text, and rounded corners as we did in the last example.

.

4. Using jQuery 🤔

.

jQuery Logo
.
It is also a JS implementation but by using a library called jQuery. If you have been working with JS from a while long then must have heard about it somewhere, right? or may be did not. Let me tell you something about it.
.
A small intro to jQuery:-
.
This also a JavaScript implementation but using a JS library this time
jQuery is a popular JavaScript library that simplifies working with web pages. It makes common tasks like grabbing elements, adding animations, and handling events much easier with shorter code. This lets developers focus on functionality instead of the nitty-gritty of JavaScript. It's free, open-source, and used on millions of websites! Launched in 2006, jQuery offered a much simpler way to interact with web pages compared to raw JavaScript. This led to its rapid adoption by developers. A steady rise in jQuery's usage throughout the late 2000s specifically 2006 onwards. By the late 2000s, jQuery had a well-established community, numerous plugins, and a mature codebase. This solidified its position as a dominant web development tool. That was a period of significant influence of jQuery.

This implementation gives an output similar to the previous one but using the jQuery library. Now consider this code :-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Scroller Example</title>
    <style>
        #scroll-container {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            background-color: blue;
            border-radius: 10px;
            color: white;
            margin: 48vh 0;
            line-height: 2.5em;
            font-size: 48px;
            font-weight: 400;
            font-smooth: always;
        }

        #scroll-text {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">This is a scrolling text created with jQuery.</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var position = $('#scroll-text').offset().left;
            var containerWidth = $('#scroll-container').width();

            function animate() {
                position -= 1;
                if (position < -$('#scroll-text').width()) {
                    position = containerWidth;
                }
                $('#scroll-text').css('transform', 'translateX(' + position + 'px)');
                requestAnimationFrame(animate);
            }

            animate();
        });
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

.
See what's happening:-
.
Using basic jQuery functions and CSS. Here's a brief overview of the key steps:

  1. Initialization: When the document is ready ($(document).ready()), the script initializes. This ensures the DOM is fully loaded before running the script.
  2. Element Selection: It selects the scrolling text element (#scroll-text) and calculates its initial position and the width of its container.
  3. Animation Logic: The animate() function updates the position of the text to create a scrolling effect. When the text scrolls out of view, it resets its position to create a continuous loop.
  4. CSS Transformation: The code applies a CSS transform: translateX() to the text element to move it horizontally. 5.** Frame Rate:** The animation loop continuously runs in sync with the browser's rendering cycle, ensuring smooth animation.

.
Output :-
.

Output of the Marquee effect Implementation using jQuery

.
Overall, the script continuously moves the text element horizontally within its container, creating a scrolling effect similar to the traditional marquee tag.

.

5. Using jQuery.Marquee Plugin 😏

.

jQuery.Marquee plugin image

Hope you are aware of the concept of plugin. So in jQuery, plugins are essentially pre-written Javascript code that extend jQuery's functionalities. They provide additional methods that you can use to achieve specific tasks on your web page, often simplifying complex interactions.

This jQuery plugin under animation category by AamirAfridi.com let's you scroll the text like the old traditional marquee. You can find this plugin here. So let's plug in to jQuery.

.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Marquee Plugin Example</title>
    <style>
        #scroll-container {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            background-color: SlateBlue ;
            border-radius: 10px;
            color: white;
            margin: 48vh 0;
            padding: 10px; /* Add some padding for better visual presentation */
        }

        #scroll-text {
            font-size: 48px;
            font-weight: 400;
            font-smooth: always;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">This is a scrolling text created with jQuery Marquee Plugin.</div>
    </div>

    <!-- Include jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Include jQuery Marquee Plugin -->
    <script src="https://cdn.jsdelivr.net/npm/jquery.marquee/jquery.marquee.min.js"></script>

    <script>
        $(document).ready(function(){
            $('#scroll-text').marquee({
                // Configuration options
                duration: 10000,
                gap: 50,
                delayBeforeStart: 0,
                direction: 'left',
                duplicated: true
            });
        });
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

After adding the latest version of jQuery and the jQuery Marquee plugin from a CDN the document is ready to add the marquee() function and is called on the #scroll-text element. The configuration options are set for the marquee, such as duration, gap, delayBeforeStart, direction, and duplicated.

.
Output :-
.

Output of the Marquee effect Implementation using jQuery Marquee Plugin

.

By using this plugin, you can easily create a scrolling marquee effect with customizable options, making it a simple yet effective solution for adding animations to your web projects.

There are some similar jQuery plugins out there, that you can try your hands on. One such is jquery.simplemarquee

.

A Use Case : A CSS Scroll Snap 👌

.
Now, let's play around a use case where we need to show some elements moving from the right to the left. When we want to showcase company names in the partner section or display moving testimonials, we can use CSS Scroll Snap with Automatic Scrolling. Here's a simple implementation using CSS for this use case.

Now consider this code :-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Scroll Snap with Automatic Scrolling</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .scroll-snap-container {
            display: flex;
            overflow: hidden;
            width: 80%;
            height: 10vh;
            border-radius: 10px;
            background-color: #f5a4d7;
            position: relative;

        }
        .scroll-snap-wrapper {
            display: flex;
            width: calc(10 * 100% / 5); /* Two sets of items (5 original + 5 duplicates) */
            animation: scroll 30s linear infinite;
        }
        .scroll-snap-item {
            flex: 1 0 20%; /* Flex-grow: 1, Flex-shrink: 0, Flex-basis: 20% (5 items fit in 100%) */
            text-align: center;
            color: white;
            background: #f5a4d7;
            box-sizing: border-box;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
          font-weight:400;
          font-smooth: always;

        }
        .scroll-snap-item img {
            max-width: 25%;
        }
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div class="scroll-snap-container">
        <div class="scroll-snap-wrapper">
            <div class="scroll-snap-item"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo"></div>
            <div class="scroll-snap-item">Item 2</div>
            <div class="scroll-snap-item">Item 3</div>
            <div class="scroll-snap-item">Item 4</div>
            <div class="scroll-snap-item">Item 5</div>
            <div class="scroll-snap-item"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo"></div>
            <div class="scroll-snap-item">Item 2</div>
            <div class="scroll-snap-item">Item 3</div>
            <div class="scroll-snap-item">Item 4</div>
            <div class="scroll-snap-item">Item 5</div>
        </div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here we create an automatic scrolling effect using CSS animations combined with the flexbox layout.

  • HTML Structure:

    • The HTML contains a div with the class scroll-snap-container, which acts as the container for the scrolling items.
    • Inside the container, there is another div with the class scroll-snap-wrapper, which holds multiple scroll-snap-item elements.

  • CSS Styling:

    • The scroll-snap-container is styled to have a fixed size, with hidden overflow, rounded corners, and a background color.
    • The scroll-snap-wrapper is given a width that is double the container’s width to create a seamless loop (two sets of items), and it uses the scroll keyframes animation to move its content.
    • Each scroll-snap-item is styled to be equally distributed within the container, with centered text and images.

  • CSS Animation:

    • The @keyframes scroll defines the animation named scroll.
    • 0% { transform: translateX(0); } sets the initial position of the wrapper to the start.
    • 100% { transform: translateX(-100%); } moves the wrapper to the left by 100% of its width over the duration of the animation.

  • Animation Mechanism:

    • The scroll-snap-wrapper uses the scroll animation to move all items horizontally from right to left continuously.
    • This movement is achieved by setting the wrapper's initial transform to 0% and then moving it to -100% over 10 seconds, creating a looped effect. .

Output :-
.

Output of the Use case: CSS Scroll Snap

.
How It Works:

  • The scroll-snap-wrapper contains two sets of items to ensure a seamless loop, moving from right to left over a set duration (10 seconds).
  • The transform: translateX(-100%) moves the content of the wrapper from its initial position to the left by 100% of its width, creating a continuous scrolling effect.
  • The animation: scroll 10s linear infinite ensures this movement is smooth, consistent, and repeats indefinitely, simulating a marquee-like animation using modern CSS techniques.

.

Adding another effect: Pause When Hover

And if we add want to pause the animation when we hover over the element we can add this in the style:-

.scroll-snap-wrapper:hover { animation-play-state: paused; }
Enter fullscreen mode Exit fullscreen mode

Use case with pause on hover

.

Final Call: The Conclusion 😶‍🌫️🫥😮🤔🤯🫡😜

.
We have explored several alternatives to the traditional <marquee> tag, each offering unique advantages and enhanced control for creating scrolling effects. From CSS animations and JavaScript scrollers to advanced solutions like GSAP and CSS Scroll Snap, these methods cater to modern web development standards and practices.

Final Giphy

via GIPHY

Let me know which method is your favorite! I'll keep sharing examples where marquee-like effects are used efficiently in contemporary designs. Your feedback and experiences are invaluable, so please share your preferred method and any insights or stories about working with the <marquee> tag. Let's continue this conversation in the comments and inspire each other with creative scrolling effects.

Happy coding, and I look forward to reading your thoughts and experiences!

Suggested explorations on the same topic:-

Top comments (1)

Collapse
 
harshitads44217 profile image
Harshita Sharma D • • Edited

There's this website wildsouls.gr/en/. Shows remarkable work. see how they use this Marquee animation in different sections! Product section, Buttons, Footer ...

Image description

Read next

naymhdev profile image

Mastering Advanced TypeScript: A Deep Dive into Dynamic Types, Asynchronous Programming, and Utility Types

Naym Hossen -

balaharinath-dev profile image

From 2500 to Top 10! Our Team Advances to the Grand Finale of Tata InnoVent 2024!

Balaharinath C -

wafa_bergaoui profile image

Optimizing React Components with useMemo and useCallback

Wafa Bergaoui -

samarpankc profile image

Tim Berners-Lee : The Man Behind the Web

Samarpan KC -