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

Storing the selected values from multiple checkboxes into an SQLite database with PHP PDO

Hi, I have two checkboxes named "Male" and "Female". If a person selects "Male" and does not select "Female", I want it to input nothing or false in the database. However, if "Female" is not selected, an error is returned: Undefined index: Female in /stora ...

phphtmlsqlitecheckboxpdo

Guide to using jQuery to load an image

I am using this code to load an image and display it within a dialog box. <div id="image_preview" title="Client Photo Preview"> <p><img src="" alt="client image" id="client_image_preview" /></p> </div> $("#client_image_p ...

javascriptjqueryhtmlcss

Displaying VueJS property inside an array of HTML elements

Currently, I am working with an HTML array that contains the following data: data-groups='["category_all", "data goes here"]' In my project, there is a prop named "title" that holds the specific string needed to be displayed in the "data goes he ...

htmlvue.js

Embedding PHP script within HTML code can enhance website functionality and

I am completely new to PHP and have never worked with it before. I'm interested in running a PHP script from within an HTML file on a Linux system. Can anyone guide me through the process? Below is the code from my HTML file: <!DOCTYPE HTML PUBLI ...

phphtmllinux

Vintage webpage utilizing Bootstrap 3.3.4

I've been working on updating my old website that was built with Bootstrap 3.3.4 a few years ago. Recently, I made some minor changes to the content and everything was working fine just last week. However, when I checked the website today using XAMPP, ...

htmltwitter-bootstraptwitter-bootstrap-3gridbootstrap-4

Converting a PHP array to a JavaScript array causes an issue of undefined variable when attempting to access a PHP array that has

I've been searching through other questions without finding the answer, so I'm reaching out for help with my specific issue. My problem is transferring a php array to a javascript array. In my code editor (phpStorm), I'm getting an error st ...

javascriptphpjqueryhtmllaravel

While in Safari, there seems to be a random issue where the embedded image in an SVG becomes blank when using the Canvas API to convert it to

My current approach involves generating a png from a valid svg string that contains an embedded image. The code snippet below illustrates this: <image xlink:href="data:image/png;base64,..." x="0" y="0" width="362" ...

javascripthtmlsvgcanvassafari

Using an external font in JavaFX CSS

Can you style a font with CSS in a JavaFX application? I have an FXML scene and corresponding CSS file. In Java code, you can set a font using the setFont method: text.setFont(Font.loadFont("file:resources/fonts/SourceSansPro-Bold.ttf", 12)); I've t ...

cssfontsjavafx

Importing D3 data from CSV files using the "%" symbol

I am trying to import a CSV file with the following data: Month, Ratio January, 0.19% February, 0.19% March, 0.19% April, 0.18% The current code snippet I'm using is as follows: d3.csv("month_ct.csv", function(d) { return { month: d ...

javascripthtmlcsvd3.jsimport

What steps can I take to minimize the excessive white space below the footer on my website?

I have been attempting to resolve this issue by using multiple methods, but none of them have successfully fixed it. overflow-x: hidden; min-height: 100%; margin: 0px; Code: body: background-color: White; margin: 0px; padding: 0px; box-sizing: border-b ...

javascripthtmlcss

I am experiencing issues with how the data from the database is being displayed

I'm trying to fetch all my users from the database. The code works, but I believe there is an issue with my syntax and how it's being echoed. As a result, it generates a separate table for each data entry. Check out the attached image for refer ...

phphtmlmysqlbootstrap-4

Can a substring within a string be customized by changing its color or converting it into a different HTML tag when it is defined as a string property?

Let's discuss a scenario where we have a React component that takes a string as a prop: interface MyProps { myInput: string; } export function MyComponent({ myInput }: MyProps) { ... return ( <div> {myInput} </div> ...

javascripthtmlreactjstypescriptecmascript-6

Image spotlight effect using HTML canvas

I am currently seeking a solution to create a spotlight effect on an HTML canvas while drawing an image. To darken the entire image, I used the following code: context.globalAlpha = 0.3; context.fillStyle = 'black'; context.fillRect(0, 0, image. ...

htmlimagecanvas

Achieving a centrally aligned flex container with left-aligned flex items

My goal is to center the flex items, but when they go onto a second line, I want item 5 (from image below) to be positioned under item 1 instead of centered in the parent container. https://i.sstatic.net/GhD1E.png Here's a sample of my current setup ...

htmlcssflexbox

Adjusting iframe height based on its source URL using JQuery

Currently, I have implemented a script to adjust the height of YouTube iframes in order to maintain a 16:9 aspect ratio while keeping the width at 100% of the container. The challenge I am facing is ensuring that the script only affects YouTube videos and ...

javascriptjqueryhtmlcssiframe

The background refuses to cooperate, soaring upward only to be abruptly sliced in two

I am in the process of creating a website login window with an image background, but I'm experiencing issues where the image is being cut in half and moved up. Here is the code snippet I am currently using: .loginbody { background: url(img/LoginB ...

htmlcssbackgroundbackground-image

Identify the position of a mouse click event when dots overlap

Experience this live demo on CodePen by visiting it here. 1) When you click on the grid, a first red point will be added. 2) Click on the grid again to add a second red point. 3) By clicking back on the first red point, you may notice that the coordinat ...

javascripthtmlcss

Display a preview of a React component

Currently facing a challenge where I need to create a form for users to adjust the title, background color, button background, text color, and other settings of a component. I want to provide a live preview of the component as the user makes changes. I en ...

javascriptcssreactjsreact-reduxstyled-components

implementing a collapsible sidebar menu with CSS tables

I am working on a layout with three columns created using css tables to perfectly fit the browser window. The first column serves as a menu and I want it to hide or move to the left when clicked, allowing the middle column to expand into its space. However ...

javascriptjquerycss

"Enhancing Layouts with Bootstrap: Implementing Spacing Between

Is there a way to add additional margin space between columns in my Bootstrap grid layout? I attempted to use a custom CSS class like this .classWithPad { margin: 10px; padding: 10px; } However, this did not resolve my issue. I also experimented w ...

htmlcsstwitter-bootstrapbootstrap-4