What steps can be taken to prevent alternate scrolling text from extending beyond the boundaries of its parent element?

I'm attempting to create a scrolling effect where the text moves back and forth within its container. The current issue I'm facing is that the text goes beyond the width of the parent container before scrolling back. I want the text to smoothly scroll from left to right and right to left as soon as it reaches the edges of the container.

Can someone assist me in modifying the code below so that I can achieve the desired result:

.text_scroll {
  border: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
}

.text_scroll_alt > p {
  width: max-content;
  padding-left: 100%;
  border: 1px solid red;
  animation: scroll_alt 5s linear infinite alternate;
}

@keyframes scroll_alt {
  to {transform: translateX(-100%);}
}
<div class="text_scroll text_scroll_alt">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

htmlcss

Answer №1

To achieve this effect, you can set the position of the element to absolute and use keyframes to animate its left position.

I have utilized translateX to dynamically adjust the width of the element.

.text_scroll {
  border: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  position:relative;
  min-height:50px
}

.text_scroll_alt > p {
   width: max-content;
   position:absolute;
   border: 1px solid red;
   animation: scroll_alt 5s linear infinite alternate;
}

@keyframes scroll_alt {
    from {transform:translateX(0);left:0;}
    to {transform:translateX(-100%);left:100%}
}
<div class="text_scroll text_scroll_alt">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Answer №2

Check out this cool example I found. Source: 

 .example5 {
     height: 50px;
     overflow: hidden;
     position: relative;
}
 .example5 h3 {
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0;
     line-height: 50px;
     text-align: left;
    /* Applying animation to this element */
     -moz-animation: example5 5s linear infinite alternate;
     -webkit-animation: example5 5s linear infinite alternate;
     animation: example5 5s linear infinite alternate;
}
/* Defining the movement animation */
 @-moz-keyframes example5 {
     0% { 
        -moz-transform: translateX(70%);
    }
     100% {
         -moz-transform: translateX(0%);
    }
}
 @-webkit-keyframes example5 {
     0% {
         -webkit-transform: translateX(70%);
    }
     100% {
         -webkit-transform: translateX(0%);
    }
}
 @keyframes example5 {
     0% {
         -moz-transform: translateX(70%);
        /* Fixing Firefox bug */
         -webkit-transform: translateX(70%);
         transform: translateX(70%);
    }
     100% {
         -moz-transform: translateX(0%);
         -webkit-transform: translateX(0%);
         transform: translateX(0%);
    }
}
 
<div class="example5">
  <h3>Text that bounces..</h3>
</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

What impact does including lang=less in a Vue component's style have on its behavior?

Exploring ways to scope the CSS of my Vue component, I initially considered using less to encapsulate my styles. However, after discovering the scoped attribute as the recommended method, I realized that my approach needed adjustment. In my original setup ...

cssvue.jslessvue-component

Customized input field design for a discussion board platform

I am in the process of creating a forum-style website and I am in search of a unique open source HTML template that includes an editable text box where users can input their posts, similar to what is seen when posting a question or answer. I believe there ...

javascriptjqueryhtml

Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

I'm currently working on a website and I have a question regarding how to make text stay in position while hovering over it (inside a span), and at the same time, display an image in the background that allows the text to overlay it. HTML: <ht ...

htmlcssimagebackgroundhover

Show the extracted data on the following web page once it has been cleaned

I am looking to connect a python file with an HTML page using Flask application. On the first page (upload.html), the user is required to select the job field and job title from two dropdown menus. Afterwards, the user needs to upload a file containing a l ...

pythonhtmlpandasflask

The checkbox filter in Angular 6 has the ability to replace the previously selected

I've been working on creating a filter system using checkboxes. Below is a snippet of the code I'm currently using: filter.pipe.ts import { Pipe, PipeTransform, Injectable } from '@angular/core'; @Pipe({ name: 'filter2' }) ...

javascripthtmlangularfilter

Tips for toggling the visibility of an element when a button is clicked in React

In my todo list, I need to display the details of each item when clicked on a button. There are two buttons available: "View Details" and "Hide Details". Below is the code snippet: class Todos extends React.Component{ construc ...

javascripthtmlcssreactjs

Place unchangeable elements both preceding and following an input field

At first glance, this question bears a striking resemblance to this specific one. However, the original poster indicated that it remains unanswered, prompting me to inquire about its feasibility and implementation. Here is what I aim to achieve: I am seek ...

htmlcssreactjsjsx

Tips for utilizing the <img src> tag within Google Apps Script

I am trying to incorporate an image into a google apps script using the src attribute. I have specified the folder id and path, but unfortunately the image is not displaying as expected. The folder has been shared here for reference. Any assistance with t ...

htmlgoogle-apps-script

Update the variable obtained from the user input and insert it into a new container depending on the input value

In reference to my previous inquiries, I refrain from adding more details to avoid confusion since it already received numerous responses. While I can successfully retrieve input from a text field with the ID 'test' and display it in the 'r ...

javascripthtml

Improve the way you manage the active selection of a button

ts isDayClicked: { [key: number]: boolean } = {}; constructor() { } setSelectedDay(day: string, index: number): void { switch (index) { case 0: this.isDayClicked[0] = true; this.isDayClicked[1] = false; this.isDay ...

htmlcssangulartypescriptionic-framework

Modify PHP script to extract the Document Object Model (DOM) from a specified URL

Hey there, I'm currently using this code to extract and display the HREFs of all "A" tags from a URL. However, my output includes the entire link when I only want the name portion after http://twitter.com/namehere So, I'm looking to clean up my ...

phphtml

What methods can I utilize to increase the speed of my JavaScript animation?

Recently, I implemented a Vue component designed to loop a div over the X axis. While it functions correctly, I can't help but notice that it is consuming an excessive amount of CPU. I am interested in optimizing this animation for better performance. ...

javascripthtmlcssvue.jscss-transitions

Inject HTML content with headers using PDO in PHP

With the power of PHP PDO: I want to generate an HTML table (including thead and tbody) by querying a MySQL database using a select statement. This will be done dynamically, only requiring basic credentials and the name of the table. ...

phphtmlpdotableheader

Challenges may arise when utilizing a variable query to showcase the outcomes within a div using ajax

Please assist me with this issue! How can I assign the value of a variable from a PHP file for comparison in my query? 2. The syntax is not correct. 3. Can I print data within the same div as "success" on my office's shed? ------ Contents of index.ht ...

phpjqueryhtmlpost

Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

I need to create a menu page with 5 equal columns, but I'm facing an issue with the layout. Here's my current CSS for the yellow divs: width:20%; height:100vh; background-color: yellow; display:inline-block; In addition, I have set margin:0;. ...

htmlcss

Image not found in Rotativa PDF document

We have implemented Rotativa to generate and save a PDF version of our web page on the server. Below is the ASP.NET MVC 4 code snippet used for this purpose: var pdfResult = new ActionAsPdf("Index", new { orderId = orderValidated.orderID }) { FileName = ...

cssasp.netasp.net-mvcpdfpdf-generation

Transitioning JS/CSS effects when the window is inactive

My latest project involved creating a small slider using JavaScript to set classes every X seconds, with animation done through CSS Transition. However, I noticed that when the window is inactive (such as if you switch to another tab) and then return, the ...

javascriptcss

The CSS file is not appearing, causing the styling not to be applied

I've included the following line in my html file: <link rel="stylesheet" href="css/styles.css"> Despite having the css file linked, the styling is not visible on the page. The HTML remains plain. The structure of my files is as follows: file ...

htmlcss

What is the best way to make a linear gradient that spans the entire vertical space that is visible (or shifts to a solid color)?

I'm trying to figure out how to apply a linear gradient to the body element of my webpage. Here's the CSS code I've been using: body { background: linear-gradient(0deg, white, lightgray); } The issue I'm facing is that the gradien ...

csshtmllinear-gradients

How can you retrieve input values from a form using a button click but without requiring a

I am facing an issue with the delete button on my form. The form has three buttons - one to edit the form on another page, one to add a value on the existing page, and one to delete a value. While the submit and edit buttons work fine, I am struggling wi ...

phphtmlajax