Marquee Effect in HTML and Javascript – No library

In this article, we are going to teach you how you can display a custom marquee tag effect on your website without downloading any library. You can check the demo from here.

The problem with the HTML marquee tag

Right now, with the default <marquee> tag, you will notice that its animation is not smooth. This is the default behavior of browsers in how they treat marquee tag. Not having smooth animation is definitely not good for your user’s experience.

Solution

There are several solutions on the internet, but they all require downloading a jQuery library to achieve this. So we have created a more simple solution for this. You just need to give a unique ID or class to the node where you want to add the marquee effect.

<div id="marquee"></div>

Then write the following Javascript code to display the message like a marquee effect.

<script>
    (function () {
        const script = document.createElement("script");
        const s0 = document.getElementsByTagName("script")[0];
        script.async = true;
        script.src = "https://api.adnan-tech.com/public/js/at.js";
        script.setAttribute("crossorigin", "*");
        s0.parentNode.insertBefore(script, s0);

        script.onload = function () {
            at.loadMarquee("#marquee", "Your message goes here", {
                duration: 30, // seconds
                direction: "rtl"
            });
        };
    })();
</script>

at.loadMarquee is the function that does all the magic. It accepts three parameters:

1. the selector (ID, class, or tag name)
2. the message that will be displayed
3. (optional) custom options. It has the following options:
   1. duration: (number) It is the number of seconds that will take to complete the effect.
      • type: number
      • default: 40
   1. direction: Its value can be either “rtl” (right to left) or “ltr” (left to right).
      • type: string
      • default: rtl
      • possible values: “rtl” or “ltr”

So that’s how you can display a custom marquee effect on your website without downloading any third-party library. This code has been tested on 10 websites having different frameworks. But if you are having any problems following this, feel free to contact us.

If this tutorial helps you, you can also check our Custom auto-complete view tutorial as well.