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

Ajax activates a slider

One element I have is a menu div, along with a content div Initially, when the slider (which is a jquery plugin) is placed in the index.php, everything appears to be working well, as shown in the image below However, my objective is to have each page&apo ...

jqueryhtmlajaxslider

Position the table at the bottom of the page using CSS

I'm experiencing an issue where my HTML is not rendering correctly. I need to move the table with the ID "footer" to the bottom of the page. Here's the structure of the situation: <div id="container"> <table id="footer"></tabl ...

htmlcss

What's the solution for aligning these progress bars side by side if floating them doesn't produce the desired result?

I am looking to place two progress bars next to each other, but I have tried using float: left and inline-block without success. I am open to a solution using flex, but I believe there must be a simple fix for this issue. Here is a link to the fiddle for ...

htmlcss

Retrieve data from a specific page on a URL using AJAX

window.onload= function(){ var page = window.location.hash; if(window.location.hash != ""){ page = page.replace('#page:', ''); getdata('src/'.page); } } Once the window has loaded, I want to check ...

javascripthtmlajax

Implementing Content-Security-Policy with React and Material-UI v4 for secure styling requirements

Utilizing a React UI with material-ui version 4, the web server is embedded within a JVM application during Production. Following npm build for the UI, the bundle is deployed alongside the server side code. An essential requirement involves implementing C ...

cssreactjsmaterial-uicontent-security-policy

Modify the color of the designated Tab in the PRIMENG TabMenu - customize the style

Currently, I am utilizing the Primeng tab menu component and facing an issue. Unfortunately, I seem to be unable to identify a method to alter the color of the selected tab to a different shade. If anyone has any insights or suggestions on how to achieve ...

cssangularionic-frameworkprimengtabmenu

Having trouble getting CSS Animation to work in a React project?

I am currently developing a Next.js application using React. const partyButton = useRef(null) const handleParty = () => { setTimeout(() => { partyButton.current.classList.add('party-time'); console.log(party ...

javascriptcssreactjsnext.jsreact-hooks

aligning a form vertically in a container

<div class="parent"> <div class="left-child"> <img src="logo.jpg" alt="logo"> </div> <div class="right-child"> <form action="#"> <input type="text" value="search"> &l ...

htmlcssforms

allowing absolutely positioned region to expand

For further information, please visit this page: test page In the process of designing a website, I have implemented a sidebar featuring an accordion style vertical navigation bar. The sidebar is set to be absolutely positioned in relation to its containi ...

jquerycsspositioningcss-position

Placing a Div wrapper around the contents of two corresponding elements

I am currently attempting to wrap a div with the class name 'wrapped' around two other divs containing innerHTML of 'one' and 'two'. <div class='blk'>one</div> <div class='blk'>two</di ...

javascriptjqueryhtmlcss

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

javascriptjqueryhtmlajaxcheckbox

Utilize Python (specifically with the Pillow library) to remove transparent backgrounds

When using the python module html2image to convert html to an image, I encountered an issue with fixed image size causing the html to break or get cut off, leaving a blank space. Is there a Python-based solution to fix this problem? (I am using chat export ...

pythonhtmlimagediscordpython-imaging-library

Show only the image source (img src) and do not display the audio and video sources using jQuery

In my code, I need the following conditions to be met: when an image is posted from the backend, the video and audio sources should automatically hide; when a video is posted, the image and audio sources should hide; and when an audio file is posted, the v ...

javascripthtmljqueryajaxcoding-style

Place the Div directly above a distinct Div

Hey there! I'm currently working on positioning one div on top of another div programmatically (using javascript or css). These divs are completely separate and have the following structure: <div class="bottom"> <img src="image"></i ...

javascripthtmlcss

In Javascript, navigate to a specific section by scrolling down

Currently, I am in the process of enhancing my portfolio website. My goal is to incorporate a CSS class once the user scrolls to a specific section on the page. (I plan to achieve this using a JavaScript event). One approach I am considering is initially ...

javascripthtmlcssdom

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

Beginner: Bootstrap Sass 3.3.6 - Incorporating Javascript - Issue with Navbar Dropdown Not Expanding application.html.erb Head: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> ...

javascriptcssruby-on-railstwitter-bootstrapsass

What could be causing my div to display a horizontal scrollbar in Firefox?

Here's a straightforward test scenario: <html> <body> <div style="border:2px solid black; overflow: auto;"> x </div> </body> </html> Upon rendering, a horizontal scrollbar appears! I was using F ...

htmlcsslinuxfirefox

What is the best way to incorporate external HTML content while ensuring HTML5 compatibility? Exploring the different approaches of using PHP, HTML

While this may seem like a simple task to the experts out there, I have been struggling for over an hour without success... My objective is to use a single footer file and menu file for all my webpages while considering blocking, speed, and other factors. ...

phpjavascriptperformancehtml

Woocommerce Dual Column Payment Portal

I prefer a two-column layout for the checkout process on www.narwal.shop/checkout Here is the code I added: /* Large devices (large desktops, 1200px and up) */ @media (min-width: 993px) { /* --------------------- WOOCOMMERCE -------- ...

csswordpresswoocommercecheckout

Add a fading transition feature to images that are loaded at a later time

I used a clever technique to create a blur effect by loading a small, lightweight image first. Once the main background image is loaded, it swaps out the 'data-src' with the actual image. However, I am facing an issue with the abrupt transition, ...

javascripthtmlcssimagedeferred