Animating Text with CSS for Different Message Lengths

I have been exploring alternatives to the marquee tag and discovered a way to achieve this through CSS. However, the messages I am working with vary in length. Is there an alternative to setting the '45s' attribute to maybe 100% so that regardless of the message length, it will display the entire message and loop once it has been shown?

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  background-color: #000000;
  font-family: Arial Rounded MT Bold;
}

.marquee span {
  display: inline-block;
  padding-left: 100%; 
  animation: marquee 45s linear infinite;
}


@keyframes marquee {
  from  { text-indent:  0%}
  to    { text-indent: -150% }
}
<p id="PassengerNews_Scrollbar" class="microsoft marquee" style="height: 95%; width: 90%; left: 5%; top: 2%; font-size: 7%;">
  <span>|*NewsData*|</span>
</p>

htmlcssmarquee

Answer №1

To add a scrolling effect to your website, consider using the jQuery.Marquee plugin which is available under the ISC license. However, if you prefer not to use the plugin, you can implement the following code snippet from the plugin to calculate the delay:

// Calculation for delay: (Width of text node + Width of main container / Width of main container) * speed;
o.delay = ((parseInt(textWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.delay;

The initial value for o.delay is set to 5000, equivalent to 5 seconds.

Answer №2

Are you seeking something similar to this design?

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    color: #ffffff;
    background-color: #000000;
    font-family: Arial Rounded MT Bold;
    
    height: 90%;
    width: 90%;
    left: 5%;
    top: 5%;
    font-size: 7%;
}
.marquee .line__wrap {
    display: block;
    position: absolute;
    width: auto;
    left: 0;
    animation: marquee__wrap 2s linear infinite;
    
    font-size: 18px;
}
.marquee .line {
    position: relative;
    margin-left: -100%;
    animation: marquee 2s linear infinite;
}
@keyframes marquee__wrap {
    from {
        margin-left: 100%;
    }
    to {
        margin-left: 0%;
    }
}
@keyframes marquee {
    from {
        left: 100%;
    }
    to {
        left: 0%;
    }
}
<p id="PassengerNews_Scrollbar" class="microsoft marquee">
    <span class="line__wrap">
        <span class="line">|*NewsData*|</span>
    </span>
    
    <span class="line__wrap" style="top: 30px;">
        <span class="line">|*NewsData*|long long long long message</span>
    </span>
</p>

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

Erase embedded frame from a Google Sheets document

Is there a way for me to customize the frame and replace it with my own design? Click here to view the Google Sheet embedded frame ...

htmlcssgoogle-sheets

"Troubles with directing on websites using jQuery, CSS,

I have been struggling with creating this navigation bar for weeks now and I keep running into issues. What I am attempting to achieve is a primary navigation bar that, when hovered over, displays a secondary navigation menu below and slightly to the righ ...

jqueryhtmlcssnavigation

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

I am attempting to create this layout using CSS grid: https://i.sstatic.net/Ktbnm.png The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column shou ...

csscss-grid

``Incorporating best practices: Setting the height of the parent container equal to the height of

When designing a container, is it considered beneficial to assign each child within the container its own height property, even if the parent container has already been allocated a specific height? If not, are there alternate methods available for transfer ...

cssheightparent-child

JavaScript code to verify if a checkbox is selected

Having some trouble making a text box value change based on checkbox status. I've attached a function to the onclick event of the checkbox, but it's not quite working as expected. <div> MyCheckbox <input type="checkbox" id="Check1" name ...

javascripthtmlcheckbox

Unable to apply border radius to the div containing the video

Currently, I am attempting to create a video with rounded corners by wrapping the <video> tag in a div element with rounded corners. This method works perfectly in Chrome and Firefox, but unfortunately does not work in Safari. It seems like this ma ...

csshtmlhtml5-video

I would like to have the div completely fill the page on my website

How can I make a div fill the entire height of my website using Bootstrap? I want to ensure that the div extends all the way down Please provide guidance on how to accomplish this. ...

htmltwitter-bootstrap

Is CSS Transition smoothly easing in, but not out?

On the image gallery of this website , I have applied transitions to the images, where they ease in (fade in), but revert back to their original state instantly when the mouse moves off the image. Is there a way to make the transition reverse when the mo ...

htmlcss

Why does getElementById work when getElementsByClassName doesn't?

I created a script with the purpose of hiding images one and two, while keeping image 3 visible and moving it into their place. The script functions correctly when using div Id's instead of div Classes. However, I prefer to use div classes for groupin ...

javascripthtmlcssfunctiongetelementsbyclassname

How to effectively utilize Python to compare HTML files

Can the HTML be compared differently as shown below? html_1 = "<h1>text<h1>" html_2 = "<h2>text<h2>" Using Google's diff_prettyHtml may not yield accurate results. If I want to say that 1 has changed to 2: <h <del styl ...

pythonhtmldiff

Switch up the text when the image link is being hovered over

Is there a way to change the text color of the "a" tag when it is not wrapping the img link? <li> <a href="# WHEN I HOVER THIS IMG LINK I WANT A TAG BELOW TO CHANGE COLOR"> <img alt="Franchise 16" src="#"></img> < ...

javascriptjquerycss

What is the best way to switch the CSS style of a button that has been mapped

I'm currently working on toggling the CSS class for an individual button that is created from a mapped array. Although my code is functional, it toggles the CSS class for all buttons in the mapped array instead of just the one selected. ...

javascriptcssreactjs

An HTML webpage that automatically refreshes but does't display the iframe content when the underlying HTML page is being updated

I have a script that updates a text file with completed tasks, creating log files in the process. I then use another script to format these logs with HTML code for tables, headings, banners, etc., saving the formatted version as Queue.html. To display this ...

htmlbatch-fileiframecommand-linepage-refresh

Dynamic jQuery backstretch feature: automatic image cycling and reversing

I am currently using backstretch on my website and attempting to create a continuous loop of the moving image by automatically shifting it from left to right and back. However, I am facing difficulties as the background only moves in one direction. I am se ...

javascriptjquerycssjquery-backstretch

The luminosity of MeshBasicMaterial in Three.js

In my current setup with threejs, I am utilizing MeshBasicMaterial for lighting effects. Each element contains a simulated point light within. I have assigned a variable named color, defined as rgb(random value, random value, random value). I am looking ...

javascripthtmlcolorsthree.jsrgb

developing a loading animation with progress indicator in CSS3

I have been working on creating a preloader, but I am having trouble embedding the percentage with the CSS circle. So far, I have tried various plugins without success. Can anyone help me with this issue? Here is my current progress. Below is the HTML co ...

javascriptjqueryhtmlcsspreloader

"Want to know how to control a JavaScript onClick event to play and pause? Find

Being new to JavaScript, I am curious about how I can Play and Pause a JavaScript on an HTML page. In my first JavaScript file, I have a toggle button that onClick show/hides a div element tag, as shown below: $(function () { $(".toggleSideba ...

javascriptphphtmltwitter-bootstrapcodeigniter

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

cssangularjsfont-awesome

Unable to locate the sibling element using CSS Selector with Selenium

When using a CSS Selector to click on the next sibling element in Selenium WebDriver, an InvalidSelectorException is thrown. If we consider my DOM structure: <div class="checkbox-group"> <div> <span class="checkbox">::aft ...

cssseleniumselenium-webdrivercss-selectorsautomated-tests

positioning two text sections on the left side of an image

I am attempting to create a page layout with text that should look like this: Team Name My Team Name +-------------+ Division Team Division| | Current Ranki ...

htmlcss