Developing a never-ending marquee effect using CSS that adjusts to different screen sizes

Trying to create an infinite looping marquee that looks good on desktop, but experiences spacing and element disappearance issues on mobile or window adjustments.

The code I used can be found here. You can see what I have so far on this CodePen link.


<div class="bannerone">
    <span>Dragon</span>
    <span>Element</span>
    // Other spans here...
</div>

// CSS CODE

.banner {
    height: 40px;
    position: relative;
    overflow: hidden;
    font-family: Roobert;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 36px;
    width: 100%;
}

// More CSS styles here...

@keyframes bannermove {
    0% {
        right: 100%;
    }
    50% {
        right: -100%;
    }
    100% {
        right: -100%;
    }
}

Answer №1

Having multiple copies of the texts is a step in the right direction.

To simplify things, imagine all the text lined up in one banner. With an even number of copies, translating the entire banner to the left (negative X direction) by 50% on each animation iteration will create a continuous appearance as the second half overlaps the first at x=0.

You may be able to achieve the desired effect with just two copies, but I have included 4 copies for wider screen flexibility.

.banner {
  height: 40px;
  position: relative;
  overflow: hidden;
  font-family: Roobert;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 36px;
  min-width: 200vw;
  /* ADDED */
  animation: bannermove 40s linear infinite;
  display: flex;
  justify-content: space-between;
}

.banner:hover {
  animation-play-state: paused;
}

@keyframes bannermove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.banner div {
  padding: 10px;
  /* just to ensure there is space between even on small devices */
}
<div class="banner">
  <div>Dragon</div>
  <div>Element</div>
  <div>Charger</div>
  <div>ZipDrive</div>
  <div>LightHouse</div>
  <div>Exxtra</div>
  <div>Hub</div>
  <div>iOS15</div>
  <div>File Drive</div>
  <div>Netherverse</div>
  <div>CLpool</div>
  <div>Dragon</div>
  <div>Element</div>
  <div>Charger</div>
  <div>ZipDrive</div>
  <div>LightHouse</div>
  <div>Exxtra</div>
  <div>Hub</div>
  <div>iOS15</div>
  <div>File Drive</div>
  <div>Netherverse</div>
  <div>CLpool</div>
  <div>Dragon</div>
  <div>Element</div>
  <div>Charger</div>
  <div>ZipDrive</div>
  <div>LightHouse</div>
  <div>Exxtra</div>
  <div>Hub</div>
  <div>iOS15</div>
  <div>File Drive</div>
  <div>Netherverse</div>
  <div>CLpool</div>
  <div>Dragon</div>
  <div>Element</div>
  <div>Charger</div>
  <div>ZipDrive</div>
  <div>LightHouse</div>
  <div>Exxtra</div>
  <div>Hub</div>
  <div>iOS15</div>
  <div>File Drive</div>
  <div>Netherverse</div>
  <div>CLpool</div>
</div>

Adjust the timing of the animation according to your preferences.

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

premature submission alert on button press

I'm encountering an issue where my form is being submitted prematurely when I click on the button. The desired behavior is for the button to create a textarea upon clicking, allowing me to write in it before submitting by clicking the button again. Ho ...

React Form Hook: restoring uniform width to selectors once more

Looking to create a form using React form hooks and Material UI? Check out this link to codesandbox to see the code in action. In the CreateEmployee.tsx file under components\execute folder, you'll find the necessary code. There's also a UI ...

Problem displaying images in Mean stack app using CSS background-image and Webpack

Currently, I am enhancing my skills by working on my own projects. One of the projects I'm focused on right now is designing a MEAN-stack app that utilizes Webpack. In the past, I encountered an issue where I couldn't display images in my app. Ho ...

Struggling with generating forms using AJAX, Javascript, and HTML depending on the selection made from a drop-down menu

I am in need of a simple web form for work submissions within my organization. These submissions will fit into 4 Categories, each requiring unique information. Currently, I have a basic form set up with fields such as Requested Name, Requested Date, Acquis ...

What is the best way to use PHP to show a PDF in a new browser tab instead of downloading the file?

I am working on updating the code to change the action of opening a PDF file in a new browsing tab instead of downloading it locally. Can anyone provide guidance on how to make this update? public function openFileInNewTab($fileID) { $this->load-& ...

Formatting a specific portion of the content within the placeholder

I need to adjust the CSS style for a specific part of a placeholder, not the entire placeholder text. For example, if my placeholder text is: "Where (example: New York)" <label>Search:</label> <textarea placeholder="Where (example: New Yor ...

Looking to display dropdown menus on a new line along with a text input field using jQuery?

<script type="text/javascript"> var arr = [{ val: 1, text: 'Option 1' }, { val: 2, text: 'Option 2' }]; $(function () { $('a').click(function () { var sel = $('<select>&apo ...

I need the links to open up the content area on the website in HTML

Is it possible to have a fixed header that does not disappear when clicking links from the navigation bar? I tried dividing the page into tables to achieve this. Now, I want to open the links in the navigation bar in the right column (the main content col ...

HTML email for resetting your password

When a user forgets their password, I would like to send them an email with a link to a page where they can reset it. What is the best way to structure this link? Should I include the username as a parameter in the URL, and if so, how can I ensure that t ...

Jquery Droppable issue arising with dynamically added DIVs

I am facing a similar issue as described in this question and this one I am trying to implement drag-and-drop and resize functionality. It is working fine for static elements, but I encounter issues when adding dynamic divs. The resize property works prop ...

Obtain the full HTML code for a Facebook album

I am attempting to extract the HTML code from a Facebook album in order to retrieve the photo links. However, since not all photos load at once, cURL only retrieves the links of photos that are initially loaded. Is there a way to fetch the entire loaded H ...

The properties of the NextFont variable cannot be utilized in the CSS global scope when using the var() function

// font.ts file import { Quicksand, Syncopate } from 'next/font/google'; export const quickSandRegular = Quicksand({ subsets: ['latin'], variable: '--font-quicksand-reg', weight: '400', display: 'swap& ...

Arabic and Latin letters become intertwined

I am currently working on implementing an Arabic version of our website without affecting the other languages. The goal is to keep the changes to the markup minimal. Here is the English version: <div class="location_description"> <span itemscope ...

Display all nested <ul> and <li> elements inside an <li> tag by utilizing jQuery

I have a complex nested tree structure of 'ul' and 'li' elements. In one instance, I need to display specific 'li' items based on a certain name while hiding the rest. Here's an example of the tree: branch1 twig1 l ...

`Moving objects issue within a relative parent container`

Here's the issue I am facing - while using prototype and scriptaculous (although jquery may have the same problem), I have a list of draggable images within a div that is relatively positioned. The challenge arises when I try to drag these images out ...

Ensure that all elements are consistently kept within a DIV container

In my experience with web development, one recurring challenge is ensuring that everything stays contained within a div element. I often encounter situations where multiple nested divs and content cause styling nightmares when elements bleed out of their d ...

Is it possible to load a route first, and then proceed to load the static files from the public folder in a Node.js application?

When running the app.js file for Node.js, I am trying to ensure that the '/' route is loaded first. This route handles authentication and then redirects to the index.html file. However, I am encountering an error because the program cannot find ...

Discovering the element's color with angularJS

I've been trying to fetch the color of an element using AngularJS, but I'm not having any luck. Here is my code: function getColor() { var elements = document.getElementsByClassName("card-abbr"); $timeout(function() { angular.forEach(element ...

What is the best way to locate an element using text in xpath?

Having an issue with this HTML source code: <td class="specs_title"> Processortype <a href="#" class="info-link"> <img src="x.jpg" title="" height="16" alt="" width="16" /> <span class="info-popup"> <span class="hd">Processor ...

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

How can I achieve a layout similar to the one shown in this image: ul menu li tags Should I use two tags for each element? Here is an example: <ul class="menu"> <div class="outside"><li class="inside"><a href="#">Firefox</a ...