Creating a running text (marquee) with CSS is a simple and efficient way to make

I encountered a significant challenge while delving into CSS animation.

My goal is to create a "transform: translate" animation that displays text overflowing the content width as depicted in the image below. https://i.stack.imgur.com/sRF6C.png
See it in action (Youtube video link)

var div1 = document.getElementById("div1");
var cont = document.getElementById("content");
var inf = document.getElementById("inf");

inf.innerHTML = "<p> Does the text inside h1 cut off? : " + (cont.offsetWidth < cont.scrollWidth) +
  "<br><b>Length of text overflow</b>: " + (cont.offsetWidth - cont.scrollWidth) +
  "<br> h1 width: " + (cont.offsetWidth) + ", h1's text length: " + (cont.scrollWidth) + "</p>";


div1.style.backgroundColor = "#A13DAF";
cont.style.webkitAnimationName = "moving";
cont.style.animationName = "moving";

cont.style.animationDuration = "3s";
cont.style.webkitAnimationDuration = "3s";

cont.style.animationTimingFunction = "linear";
cont.style.webkitAnimationTimingFunction = "linear";
#div1 {
  margin: 10px;
  width: 300px;
  background: rgb(40, 40, 40);
  white-space: nowrap;
  overflow: hidden;
}

#content {
  color: white;
  width: 100%;
}

@keyframes moving {
  0% {
    transform: none;
    -webkit-transform: none;
  }
  65% {
    transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
    -webkit-transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
    transform: translate( -668px, 0);
    -webkit-transform: translate( -668px, 0);
  }
  100% {
    transform: translate( -668px, 0);
    -webkit-transform: translate( -668px, 0);
  }
}
<div id="div1">
  <h1 id="content">
    The only thing that matters now is everything You think of me
  </h1>
</div>
<div id="inf"></div>

Inspired by the above code,
I am aiming to devise a mechanism where the text within the content (h1) shifts left precisely by the amount of overflow. Yet, I'm struggling to reference values of content directly in CSS.

Does a method exist to adjust a CSS value based on another element's specific value without relying on JavaScript??

I am striving to minimize reliance on Javascript for altering keyframes despite its potential complexity.

Your guidance is greatly appreciated.

javascripthtmlcsscss-animations

Answer №1

One suggestion is to animate both the transform property and the margin-left property simultaneously, ensuring that the animation ends precisely at the end of the text:

.marquee {
  position: relative;
  overflow: hidden;
  background: rgb(161, 61, 175);
  color: #fff;
}

.marquee span {
  display: inline-block;
  min-width: 100%; /* prevent shorter text from animating beyond right edge */
  white-space: nowrap;
  font-size: 2.5em;
  animation: marquee 4s ease-in-out forwards;
}

@keyframes marquee {
  from {transform: translateX(0);     margin-left: 0;}
  to   {transform: translateX(-100%); margin-left: 100%; }
}
<h1 class="marquee">
  <span>Focus on what truly matters--everything you believe about me.</span>
</h1>

<p class="marquee">
  <span>Be cautious with short texts!</span>
</p>

Answer №2

Presented here is an alternative concept that relies solely on the transform property for animation:

.marquee {
  overflow: hidden;
  background: rgb(161, 61, 175);
  color: #fff;
}

.marquee > span {
 display:block;
 animation: marquee 4s ease-in-out;
 transform: translateX(100%);
}
.marquee > * > span {
 display: inline-block;
 min-width: 100%;
 white-space: nowrap;
 font-size: 2.5em;
 animation:inherit;
 transform: translateX(-100%);
}

@keyframes marquee {
 from {
   transform: translateX(0);
 }
}
<h1 class="marquee">
  <span>
    <span>The only thing that matters now is everything You think of me</span>
  </span>
</h1>

<h1 class="marquee">
  <span>
    <span>The only thing that matters now is everything</span>
  </span>
</h1>

<p class="marquee">
  <span>
    <span>Beware of short texts!</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

Obtain the JSON data from the body of the current post request in Express.js

I have been working on retrieving the actual request body JSON in express.js but haven't been successful so far. Most of the resources I found online only show how to access the body of type ReqBody, whereas I am looking for a way to retrieve the actu ...

javascriptjsonexpresshttphttp-post

Injecting multiple instances of an abstract service in Angular can be achieved using the following techniques

I am fairly new to Angular and currently trying to make sense of the code written by a more experienced developer. Please excuse me if I'm not adhering to the standard communication practices and vocabulary. There is an abstract class called abstract ...

javascriptangulartypescriptdependency-injectionangular-directive

Combining ng-repeat with manipulating the DOM beyond the scope of a directive

I'm struggling to understand Angular Directives and how they work. I have a simple array of objects in my controller, but creating the desired DOM structure from this data model is proving challenging. Any advice on best practices would be greatly app ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Tips for declaring the project npm registry within the package.json configuration file

Currently, I am juggling multiple projects simultaneously and facing the issue of each project having a different node module registry. For instance, project A sources its modules from http://registroy.foo.com, while project B pulls modules from http://re ...

javascriptnode.jsnpmnpm-registry

Positioning the div in the center

Having trouble centering a div inside a 100% wide container. Here is the HTML code: <div id="body-outside"> <div id="body-inside"> content </div> </div> And here is the CSS: #body-outside{ width:100%; flo ...

htmlcss

Implementing AngularJS to display different divs according to the selected value

I am attempting to utilize the value of an HTML select element to toggle the visibility of specific div tags using AngularJS. Below is the code snippet I have been working with: <body ng-app="kiosk" id="ng-app" > <div class="page" ng-controll ...

javascripthtmlangularjshtml-selectng-show

Utilizing Local Storage in Vuex Store with Vue.js

I have been working with localStorage for storing and retrieving items in my JavaScript code housed within a .vue file. However, I am now looking to find a way to transfer this stored data into my Vuex store, specifically within the mutations section locat ...

javascriptvue.jslocal-storagevuexmutation

Displaying Text and Images on a Sliding Carousel with a Static Background Image

I am currently experimenting with the Materializecss Image Slider. My goal is to have a fixed full-screen background image while the texts and images slide over it. Initially, I tried setting the background-color of the slider class as transparent, but un ...

javascripthtmlcssslidermaterialize

Utilize a WCF Service with HTML and JavaScript

FILE WebService.svc.vb Public Class WebService Implements IWebService Public Function Greetings(ByVal name As String) As String Implements IWebService.Greetings Return "Greetings, dear " & name End Function End Class FILE IWebServ ...

javascriptvb.netwcfweb-services

Error in React Native - Invalid component type provided

I'm encountering an issue while building a React Native app with Expo CLI. Every time I test it, I receive an error message. How can I troubleshoot and resolve this problem? Error: Element type is invalid: expected a string (for built-in components) ...

javascriptreactjsreact-native

What is the process for setting up a new router?

When it comes to templates, the vuestic-admin template from https://github.com/epicmaxco/vuestic-admin stands out as the perfect fit for my needs. However, I have a specific requirement to customize it by adding a new page without displaying it in the side ...

javascriptvue.jsvuejs2

How can I position an element at the bottom of a page using VueJS and Bootstrap CSS?

I am trying to move my footer (Copyright statement) to the bottom of the page. However, it is creating some extra white space beneath the footer. How can I eliminate this additional white space? This issue is occurring in a VueJS project that I am working ...

cssvue.jsvuejs2bootstrap-4

What is the best way to incorporate an external .css file into my Angular project by referencing its URL?

I'm managing a collection of CSS files online and I need to incorporate each one into my project based on its specific requirements. One component in particular is connected to different numerical IDs in the router. I am looking for a way to dynamica ...

cssangulartypescriptsass

Manipulating latitude and longitude variables from Javascript Geolocation in an ASP.NET environment

Attempting to retrieve user location using geolocation in JavaScript, I am able to see the current location. However, when trying to assign the coordinates variable to a C# object label, it does not return anything. Below is my JavaScript code snippet: ...

javascriptc#asp.net

Unwrapping the Angular ngForm Mystery: Resolving

I was attempting to retrieve values using ngOnInit and initializing the form with default values, but for some reason the form is returning as undefined. I also tried using patchValue, but since the form is undefined, it doesn't work. It's intere ...

htmlangularangular-forms

How can the formatResult and formatItem options enhance the functionality of JQuery Autocomplete?

I'm a bit puzzled here - can someone explain what the formatResult and formatItem functions do in the JQuery Autocomplete plugin? I have a function that returns a comma-separated string from Django, but I'm having trouble getting my autocomplete ...

javascriptjquerydjango

The Faux-Dynamic News Feed on a stationary website

As I work on revamping my employer's static website, it has become clear that a news section needs to be integrated. The site is being built using the Bootstrap 3.0 framework. My plan is to implement the following strategy: I aim to have a JavaScrip ...

javascriptjsonhtmltwitter-bootstrap

What causes the presence of a boundary around the svg?

I have been encountering an issue while attempting to incorporate my logo into the header of my webpage. Specifically, when viewed on smaller screens, I noticed that there is a margin surrounding the SVG image. Below is my HTML file: <html lang="e ...

htmlcsssvgcss-selectorshtml5-canvas

Is there a way to update a todo list on the same input field where I initially added it in a React application?

I am new to using React js and currently working on a project that I found on YouTube. The issue I am facing is related to editing tasks - I would like to be able to edit them within the same input field where I add tasks. Unfortunately, I am not sure how ...

javascriptreactjsformsinput

Encountering a problem during the creation of a fresh Angular 2 project

After installing AngularJs with the command npm install -g angular-cli, I encountered an error when trying to create a new project: Cannot find module 'reflect-metadata' How can I resolve this error? ...

javascriptangularjsangular-cli