Marquee Effect in HTML and Javascript – No library

0
(0)

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.

Problem

Right now, with the default <marquee> tag, you will notice that its animation is not smooth. This is the default behavior of browsers 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 the marquee effect. 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 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 in marquee
  3. (optional) custom options. It has the following options:
    1. duration: (number) It is the number of seconds that will take to complete the marquee 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.

How useful was this post

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post





Please disable your adblocker or whitelist this site!