CSS transformation incomplete

I am currently creating a scrolling ticker animation for my website.

Here is the HTML code:

<div class="top-news">
    <div class="t-n-c">         
        <div class="textwidget">Latest News: Our first 20 customers get 20% off their first order! Order now with the coupon 20FOR20 to use this offer!
        </div>
    </div>
</div>

Here is the corresponding CSS code:

.top-news{
    <!-- Style properties here -->
}

.top-news > .t-n-c{
   <!-- Additional style properties here -->
}

.top-news > .t-n-c > .textwidget{
    <!-- More style properties here -->
}

<!-- Animation keyframes and hover effects included -->

After implementing this, I noticed that the text does not fully scroll towards the left on my laptop. While it appears to work correctly on my iPhone due to the smaller screen size, if you view the live demo at: https://codepen.io/anon/pen/RRGvgG you will see the issue on laptops.

The problem seems to be that the animation stops once all the text has scrolled. How can I modify it to continue scrolling even when there is no more text present?

htmlcss

Answer №1

The animation stops once it hits 100% and displays all the text. To achieve this, I made a simple adjustment.

-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);

I modified it to:

-webkit-transform: translate3d(-250%, 0, 0);
transform: translate3d(-250%, 0, 0);

After this change, everything worked perfectly.

Answer №2

The functionality of the translate3d method is unique in that it calculates percentages based on the actual element's width, rather than the width of its container. As a result, if the screen size is smaller than the ticker's width (which is approximately 800px), it may appear to loop back abruptly to the starting point.

To ensure smooth rotation across all screen sizes, you'll need to adjust the percentage value accordingly and slow down the animation. Keep in mind that this adjustment may affect the accuracy of the looping effect. In my solution, I increased the animation duration to accommodate the extended distance covered. Check out the updated code snippet below:

https://codepen.io/thecox/pen/pbEGVQ

.top-news > .t-n-c > .textwidget {
    animation-duration: 45s;
}

@keyframes ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);

    }
    100% {
        -webkit-transform: translate3d(-300%, 0, 0);
                transform: translate3d(-300%, 0, 0);
    }
}

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

Proper Alignment of Div Elements

Just starting out with coding and currently practicing display and positioning. I've created a webpage with multiple divs containing the same content, displayed in a vertical scroll order. Now, I'm looking to position these divs side by side in r ...

htmlcss

Displaying videos in full screen using HTML5

I am attempting to create a fullscreen webpage with a video using the following code: <video id="backgroundvideo" autoplay controls> <source src="{% path video, 'reference' %}" type="video/mp4"> </video> ...

htmlcsshtml5-video

Tips for centering the second content within a div block

<div style="height: 100%; background: red"> <div style="height: 100px; background: green"> </div> <div style="background: blue;"> <h1>Content</h1> </div> </di ...

htmlcss

What is the best way to adjust the placement of this object so it is anchored to the left side?

I'm struggling to position one of my divs more to the left within a flex container. No matter what I try, changing the class of the div doesn't seem to have any effect. Here's the code snippet: import React from 'react' import &apo ...

cssreactjs

Having trouble adding a custom font with override to MuiCssBaseline in react-admin, the @global @font-face seems

I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this: ty ...

cssreactjsmaterial-uifont-facereact-admin

Running PHP code within an HTML file served by PHP

A unique and innovative approach was taken by incorporating a DIV element in the HTML code, which dynamically populates with content from the main_login.php file. The main_login.php file plays a crucial role in loading the homepage with member-specific con ...

phphtml

How can I include inline CSS directly within a string instead of using an object?

Is there a way to write inline CSS in a string format instead of an object format? I attempted the following, but it did not work as expected: <div style={"color:red;font-weight:bold"}> Hello there </div> What is my reason for want ...

javascriptcssnext.jssassnext.js13

Looking to enhance the size of pagination icons for previous and next pages on a Material-UI React table?

I am looking to adjust the size of the previous page and next page icons in a material table implemented in React. Below is the code snippet: localization = { { body : {} , toolbar: { searchTooltip: 'Search'} , pagination: ...

cssreactjsmaterial-uimaterial-table

React Transition for Mui Menu

I'm having trouble implementing a Mui menu on my website and adding a transition effect from the right side. Here is the code I have tried: <Menu transitionDuration={1} open={Open} onClose={Close} MenuListProps={} className="nav"> ...

cssreactjsmaterial-uimenu

Implementing both fancybox and a hover remove icon functionality on a single image

I came across a solution on this question here, outlining how to implement an overlay hover remove icon on thumbnails. I tried incorporating it into my page, along with fancybox, but unfortunately, I'm encountering issues getting both functionalities ...

jquerycssfancybox

Completes a form on a separate website which then populates information onto a different website

Creating a website that allows users to login and view various complaint forms from government websites or other sources. When a user clicks on a link to file a complaint, they will be redirected to the respective page. However, I am looking for a way to ...

javascripthtmlnode.jsformsexpress

Issue with checkboxes preventing submission of form

Currently working on a website project for a company that requires certain steps to be completed for deliveries. Unfortunately, I am facing issues with the submit button, and I apologize as I am still new to this. The code I have pasted is divided into tw ...

javascriptphphtmlcss

How can I adjust the size of posts on the Tumblr Official Theme?

The size of posts on the Tumblr Official Theme caught my attention recently. It seems they are set at 500px, causing photos posted on the blog at the original dash post size of 540px to be compressed. I've examined the coding for the theme but can&apo ...

htmlcsstumblr

Values do not appear as expected post PDF conversion using wkhtmltopdf

Currently, I am updating certain values within my HTML page by following this process: The function: function modifyContent(){ var newTitle = document.getElementById('myTextField1').value; if( newTitle.length==0 ){ alert('Plea ...

javascriptphphtmlpdfwkhtmltopdf

Limiting the size of textboxes in Twitter Bootstrap

I am currently working with bootstrap text boxes in the following manner: <div class="row"> <div class="col-lg-4"> <p> <label>Contact List</label> <select class="form-control" id="list" name="li ...

htmlcsstwitter-bootstraptextbox

Apply the active class to only one element at a time

Presented here is a table showcasing available dates and times. Users can select a specific time by clicking on the "Choose" link. Currently, when a user selects a time, the class "active" is applied. However, the desired behavior is to remove the previous ...

jqueryhtmlcssonclick

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

I am facing an issue with setting the top icon of a notification sent from a website in Microsoft Edge. Let's consider this code as an example: Notification.requestPermission(function (permission) { if (permission == "granted") { new ...

javascripthtmlnotificationswindows-10microsoft-edge

The captivating logo animation of Google Chrome

For optimal viewing experience, it is recommended to use Chrome or any WebKit browser. https://www.google.com/intl/en/chrome/browser/ Hovering over the chrome logo reveals an amazing effect. I tried downloading the page source, but got lost in it. The s ...

javascriptjquerycsswebkit

Shifting and positioning the card to the center in a React application

I am currently constructing a React page to display prices. To achieve this, I have created a Card element where all the data will be placed and reused. Here is how it appears at the moment: https://i.stack.imgur.com/iOroS.png Please disregard the red b ...

javascripthtmlcssreactjs

Having trouble displaying the Order List in Tailwind CSS and Next.js?

I am having trouble displaying an ordered list on my page. I have tried using the <ol> tag, but for some reason the numbers are not showing up. Even when I switch to the <ul> tag, it's still not working properly. Take a look at this scree ...

htmlnext.jstailwind-css