What is the best way to make a text scroll smoothly from left to right on my website?

I am currently working on my upcoming website and I could use some guidance in this area.

My goal is to create a seamless horizontal scrolling effect on the page at a readable speed, but I'm having difficulty achieving this.

*,
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  --color-text: #dedede;
  --color-bg: #060606;
  color: var(--color-text);
  background-color: var(--color-bg);
}

.hero {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10vh 0 25vh;
  --marquee-width: 100vw;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  --item-font-size: 8vw;
  counter-reset: hero;
}

.marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--marquee-width);
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
}

.marquee__inner {
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(var(--move-initial), -0, 0);
  animation: marquee 5s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.1s;
}

.marquee .marquee__inner {
  animation-play-state: running;
  opacity: 1;
  transition-duration: 0.4s;
}

.marquee span {
  text-align: center;
  white-space: nowrap;
  font-size: var(--item-font-size);
  padding: 0 1vw;
  font-weight: 900;
  line-height: 1.15;
  font-style: regular;
  color: #FFFB00;
}

@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }
  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
<div>
  <nav class="hero">
    <div class="hero__item">
      <div class="marquee">
        <div class="marquee__inner" style="--tw: 189ch; --ad: 12s;">
          <span>Logo Design • Brand Identity • Illustration • Icon Design • UX/UI • Logo Design
              </span>
        </div>
      </div>
    </div>
  </nav>
</div>

I've attempted to adjust the keyframes and animation for the marquee, but I'm unsure why it's not scrolling smoothly.

Here is the link to the code on CodePenhttps://codepen.io/onuohaui/details/JjvNyaJ

Thank you for your assistance.

htmlcssfrontend

Answer №1

To ensure the proper functioning of this slider, it is essential to have precise knowledge of the width required. Here is my personalized version of the slider:

:root {
         --eachWidth: 250px;
         --item-font-size: 3vw;
      }

      body {
         display: grid;
         place-items: center;
         min-height: 100vh;
      }

      .slider {
         height: 200px;
         /* container width */
         width: 90%;
         position: relative;
         margin: auto;
         overflow: hidden;
         display: grid;
         place-items: center;
      }

      .slide-track {
         display: flex;
         /* slide track width = total number of slides 9*2 = 18 * individual width (250px) */
         width: calc(var(--eachWidth) * 18);
         background-color: red;
         /* control the speed */
         animation: scroll 20S linear infinite;
      }

      /*
        .slide-track:hover {
            animation-play-state: paused;
        }
      */
      @keyframes scroll {
         0% {
            transform: translateX(0)
         }

         100% {
            transform: translateX(calc(var(--eachWidth) *9 *-1))
         }
      }

      .slide {
         height: 100px;
         width: var(--eachWidth);
         display: flex;
         align-items: center;
         padding: 15px;
         font-size: var(--item-font-size);
         padding: 0 1vw;
         font-weight: 900;
         line-height: 1.15;
         font-style: regular;
         color: #FFFB00;
      }
<div class="slider">
      <div class="slide-track" id="slideTrack">
         <div class="slide">text 1</div>
         <div class="slide">text 2</div>
         <div class="slide">text 3</div>
         <div class="slide">text 4</div>
         <div class="slide">text 5</div>
         <div class="slide">text 6</div>
         <div class="slide">text 7</div>
         <div class="slide">text 8</div>
         <div class="slide">text 9</div>

         <!-- you need to add the same amount again so it appears seamless -->

         <div class="slide">text 1</div>
         <div class="slide">text 2</div>
         <div class="slide">text 3</div>
         <div class="slide">text 4</div>
         <div class="slide">text 5</div>
         <div class="slide">text 6</div>
         <div class="slide">text 7</div>
         <div class="slide">text 8</div>
         <div class="slide">text 9</div>
      </div>
   </div>

I would also advise defining all CSS variables in the :root for better organization and accessibility.

Answer №2

Your Variables are not functioning as intended. It is advisable to either correct them or avoid using them altogether for a straightforward task like this.

Modifications: adjust the text 38% to the right usingtranslate: 38%; at the beginning and then shift it back to the left by 110% withtranslate: -110%; at the end of the animation.

You can easily control the speed of your text by increasing or decreasing the animation time.

Lower the number for faster speed
Higher the number for slower speed

:root {
  --marquee-width: 100vw;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  --item-font-size: 8vw;
  --color-text: #dedede;
  --color-bg: #060606;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
}

.hero {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10vh 0 25vh;
  counter-reset: hero;
}

.marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--marquee-width);
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
}

.marquee__inner {
  width: fit-content;
  display: flex;
  position: relative;
  translate: 38%;
  animation: marquee 11s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.1s;
}

.marquee .marquee__inner {
  animation-play-state: running;
  opacity: 1;
  transition-duration: 0.4s;
}

.marquee span {
  text-align: center;
  white-space: nowrap;
  font-size: var(--item-font-size);
  padding: 0 1vw;
  font-weight: 900;
  line-height: 1.15;
  font-style: regular;
  color: #FFFB00;
}

@keyframes marquee {
  0% {
    translate: 38%;
  }
  100% {
    translate: -110%;
  }
}
<div>
  <nav class="hero">
    <div class="hero__item">
      <div class="marquee">
        <div class="marquee__inner" style="--tw: 189ch; --ad: 12s;">
          <span>Logo Design • Brand Identity • Illustration • Icon Design • UX/UI • Logo Design
                        </span>
        </div>
      </div>
    </div>
  </nav>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show JSON data as choices in a dropdown menu

On my webpage, I want to display a dropdown list populated with objects from a JSON file using JavaScript. Here is the structure of my HTML and JSON: HTML <html> <body> <select id="myid">MyList</select> <script src="m ...

javascripthtmljsonhtml-select

Footer at the bottom and a sticky navigation bar

I have experimented with various CSS guides in order to place the footer at the bottom of the page, and I have found the example below to be the simplest method. html, body, #root { height: 100%; } #root { display: flex; flex-direction: column; } ...

htmlcss

What is the best way to utilize variables in order to style this image inside a selector?

Struggling with adding dynamic styling to an image inserted into a div through a selector. Despite successful testing of the style changes, I am stuck on how to assign variable values for the properties. Various syntax attempts have failed so far. functi ...

javascriptjqueryhtml

Using jQuery to target adjacent elements excluding those that are separated by other text

I have been attempting to locate and combine adjacent em tags within paragraphs, but it has proven to be a more challenging task than I initially anticipated. Let's explore some examples to illustrate this issue: <p><em>Hello</em>&l ...

javascriptjqueryhtmltraversal

Modify the background color of four results with the help of PHP

With php, I am looking to dynamically change the background color of a td based on the number within it. While this can be achieved using CSS by assigning different classes to each td with specific colors, I prefer a more straightforward method for mainten ...

phpcssbackground-color

Obtain several dropdown menus without their items displaying beneath the correct element

I'm currently in the process of setting up multiple drop down menus within a navigation element. The issue I'm facing is that when a user hovers over the menu items, the displayed elements appear below the first item instead of the selected one. ...

htmlcssdrop-down-menu

Leveraging jQuery to automatically fill in a time field while excluding other buttons

I've been working on using jQuery to automatically fill in a time input field. The functionality is working properly, but the time is also being applied to my other button. How can I make sure it only gets assigned to the time input field? I would re ...

javascriptjqueryhtmldomjquery-plugins

The labels displayed on ChartJs are inaccurate

As a student who has been learning programming for about a month, I must admit that there may be many mistakes in my code. In developing a website, I have incorporated a chart from the ChartJs library. The chart consists of an outer circle representing ho ...

javascripthtmlchartschart.js

Preserve text input from a multi-line textarea

Having an issue with a form that includes a <textarea>....</textarea> field. When saving the text, it displays the result in another form but as one continuous line within a paragraph <p>...</p>. The problem arises when trying to e ...

jqueryhtmlcss

Is there a way to customize the checkout page using JavaScript?

I'm working on a checkout page where fields need to change based on a selected radio button. There are two options: A and B. When A is selected, I want certain fields to remain visible while others disappear, and vice versa for option B. Although I p ...

javascripthtmlcsswordpressweb

Locate the nearest span element and update its CSS class

On my page, there is a section with the following code: <h5 class="text-center" id="findStore" style="width:260px"> <a data-toggle="collapse" data-parent="#accordion" href="#@item.ProductId" aria-expanded="true" aria-controls="@item.ProductId ...

javascriptjqueryhtmlcss

Is there a way for me to use an ajax xmlhttprequest to submit all the selected values from my radio buttons?

Here's the situation: I have four input forms [A-D] and I have selected options A and B. I want to transfer this information to another page, but I'm not sure how to do it. I've tried searching for tutorials on AJAX, but most of them focus ...

javascripthtmlajax

When dalekjs attempted to follow a hyperlink with text in it, the link failed to function properly

My goal is to retrieve an element from a list by clicking on a link containing specific text. Here is the HTML code snippet: <table> <td> <tr><a href='...'>I need help</a></tr> <tr><a href=&a ...

javascripthtmlcssdalekjs

Learn how to incorporate a consistent header and footer across multiple pages on a website with Node.js, ExpressJS, and either hbs or ejs templates

Creating a common header (navbar) and footer page to be included in multiple/several pages of a website. I want to create a dynamic website using Node.js and Express.js. The code for the navbar and footer will be placed in a common file named header.html ...

javascripthtmlnode.jsexpress

What could be the reason for the content of my navBar not showing up?

Using Bootstrap and additional CSS for styling has been working well, except for the issue with the Dropdown Menu not displaying its content on hover. Within the head tag, the following scripts are included: <!--Jquery--> <script type="text ...

htmljquerycssbootstrap-4drop-down-menu

Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...

htmlcsstailwind-css

JavaScript tip: Improve the way you highlight the current navigation page while scrolling by finding alternative methods to using "scrollY > x"

Currently, my webpage layout is divided into 4 sections - HOME, ABOUT, SKILLS, and CONTACT. Below is the JavaScript code I am using to highlight a specific section on the navigation bar based on the scroll position: let home = document.querySelector(" ...

javascripthtmlcssscroll

Unable to load the Bootstrap CSS file from the specified import path: "bootstrap/dist/css/bootstrap.min.css"

I am currently working on a React application where I have a page that utilizes components from the react-bootstrap library. The issue I'm facing is related to styling, even though I have already imported the necessary bootstrap CSS file: import "boot ...

cssreactjscomputer-sciencereact-bootstrapvisual-web-developer

Choosing an option in Angular 2 based on a specific condition

My question is about a select element: <select id="position"> <option *ngFor='#contactType of contactTypes' [attr.value]='contactType.contactTypeId'> {{contactType.description}} </option> </select ...

htmlselectangular

The "hover" effect is not activating on a carousel

I'm having trouble with the hover effect inside the orbit slider. It's not working at all. What am I missing here? Check out the code and fiddle: http://jsfiddle.net/Bonomi/KgndE/ This is the HTML: <div class="row"> <div class="la ...

htmlcsszurb-foundationorbit