How do I make this static pills UI move infinitely like a marquee

Question

0.00/5 (No votes)

See more:

Okay, so I crated this pills UI which I intend to utilise in my website, however the problem is that at the moment it is static. I would like it to move and loop infinitely (exactly like the marquee element)

Please guys help me possible, please, thank you all.

What I have tried:

HTML

<pre><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>mousewheel question</title>
	<style>
		div#main_container{
			width: 100vw;
			font-family: 'Maven Pro';
			/*background-color: #8a5bcb;*/
		}
		#categories{
			width: 100%;
			display: flex;
			justify-content: center;
		}

		#inner_categories{
			width: 1200px;
			display: flex;
			/*flex-wrap: wrap;*/
			white-space: nowrap;
			overflow-y: hidden;
		}

		#inner_categories::-webkit-scrollbar{
		    height: 6px;
		}
		#inner_categories::-webkit-scrollbar-track{
		    background-color: transparent;
		}
		#inner_categories::-webkit-scrollbar-thumb{
		    background-color: #efefef;
		    border-radius: 10px;
		}
		#inner_categories::-webkit-scrollbar-thumb:hover{
		    background-color: #df00df;
		}

		.category{
			font-size: 12px;
			text-transform: capitalize;
			background-color: #ef00ef;
			padding: 2.5px 5px;
			border-radius: 5px;
			margin: 7px 0 9px 0;
		}

		.category:not(:last-child){
			margin-right: 6px;
		}

		.category:hover{
			cursor: pointer;
		}
	</style>
</head>
<body>
	<!-- ========== begin ========== MARQUEE TABS ========== begin ========== -->
	<div id="categories">
        <div id="inner_categories">
            <!-- ========== begin ========== CATEGORY TABS ========== begin ========== -->
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <div class="category">
            	<span>grocery item</span>
            </div>
            <!-- ========== end ========== CATEGORY TABS ========== end ========== -->
        </div>
    </div>
    <!-- ========== end ========== MARQUEE TABS ========== end ========== -->
</body>
</html>

Posted 13-Apr-22 20:53pm

User 15371251

Updated 13-Apr-22 22:15pm

Add a Solution

Comments

[no name] 14-Apr-22 12:37pm

Thank you so very much for helping me there sir.
Yes, I did say a marquee (I was referring mainly to the motion and speed at which the marquee moves), however, you'll notice that (from the examples you made available - thanks again), there is a great space left whenever the text has finished displaying (this was not what I wanted). I actually wanted it to loop through just the way they are (as in a carousel - without that much space after they have displayed).

Please forgive me for using "marquee" as a key reference here, I just wanted it to "move" like "a marquee", but "still maintain the spacing as a carousel".

Get the idea?

I feel so embarrassed writing this, thank you again. Please try helping me again if you can. Please...

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Answer 1 · 2022-04-13T22:15:00

Solution 1

A quick Google for "vanilla js marquee" came up with the following: GitHub - mattiacoll/vanilla-marquee: A modern replacement for jQuery.marquee[^] It uses vanilla Javascript and CSS3 animations to animate the text! You can install it via npm or just manually download the dist JS file.

Posted 13-Apr-22 22:15pm

Chris Copeland