Sliding an image from the left side to the right, and then repeating the movement from left to right

I am currently working on a CSS effect for some images. My goal is to have an image appear from the left side, move towards the right side, then reappear from the left and repeat this cycle. I managed to achieve this using the code below:

@keyframes slideAnimation {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.row-1 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.image-container {
  position: absolute;
  top: 4%;
  width: 100vw !important;
  overflow: hidden;
  animation: slideAnimation 18s linear infinite;
}
<div class="row-1">
  <div class="image-container">
    <img class="img" src="/src/assets/image.svg" alt="img">
  </div>
</div>

While this works fine for desktop screens, it causes scrolling issues on mobile devices. Even though the image properly loops back from the left after reaching the right side, the container's width of 100vw creates unwanted horizontal scrollbars. This affects other positioned elements on my page as well. Is there a way to disable this scroll or achieve the same effect in a different manner without impacting other elements on the page?

javascripthtmlcsscss-animations

Answer №1

The problem you're encountering stems from the animated element extending beyond the viewport, leading to unintended scrolling on the page. To address this issue, one solution is to hide the overflow within the parent container. However, if this approach interferes with other absolute elements on your page, an alternate method could involve utilizing the CSS transform property instead of adjusting the left or right properties.

@keyframes slideAnimation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.row-1 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.image-container {
  position: absolute;
  top: 4%;
  width: 100%;
  animation: slideAnimation 18s linear infinite;
}

The keyframes in the slideAnimation specify using translateX to shift the image horizontally from left to right. The image begins off-screen at -100% and then slides onto the right side of the screen at 100%. By setting overflow: hidden on the .row-1 class, any horizontal scrolling induced by the animation will be prevented.

Implementing these adjustments should achieve the desired visual effect without triggering any unwarranted scrolling behavior.

Answer №2

If you're struggling to make elements move, check out this solution provided here: CSS transition effect makes image blurry / moves image 1px, in Chrome?

Additionally, have you thought about using a script that monitors the position of the image and resets it to the left side once it exceeds the width of the window?

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

Struggling to populate dropdown with values from array of objects

My issue is related to displaying mock data in a dropdown using the SUIR dropdown component. mock.onGet("/slotIds").reply(200, { data: { slotIds: [{ id: 1 }, { id: 2 }, { id: 3 }] } }); I'm fetching and updating state with the data: const ...

javascriptreactjsecmascript-6

Contrasts in characteristics of CSS images versus SVG graphics

I'm curious if there are distinctions between CSS images and SVGs on your website. When referencing CSS images, I mean images constructed with div elements in HTML and then styled using CSS (such as this: https://codepen.io/andrewrock/pen/jOEZxrY). ...

htmlcssperformancesvgdifference

Implementing Laravel pagination to retrieve data through ajax calls

I am currently working on setting up a pagination feature using Laravel. When it comes to the backend, I have set up my JSON response in the following way: if(isset($request->myDate)) { $request->validate([ ' ...

javascriptajaxlaravelpagination

Ways to modify the cursor of a disabled ImageButton on an ASP.Net webpage

Within a ListView, I have dynamically generated ImageButtons. If an image does not have a link, I want to make it disabled. In the ItemDataBound event, I attempted the following approach: img.Enabled = False img.DescriptionUrl = "javascript:void(0);" img. ...

htmlasp.netcsscursorimagebutton

`Carousel nested within tabbed interface`

I am currently facing an issue with my website's tabs and carousels. I have 4 tabs, each containing a carousel, but only the carousel in the first tab seems to be working properly. When I activate the second tab, all the carousel divs collapse. For r ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a function to manipulate an element on a different webpage

Upon clicking a button on Page1, a function is triggered which then calls another function to generate HTML and append it to a div with the #lista id. The issue here is that #lista belongs to Page2, so I am unsure if there is a syntax similar to ajax where ...

javascriptjquery

Attention: The index value is not defined:

This is the main page with a date picker that links to index.php, where the data table is located. Everything works fine when I select a date, but if I make any changes on the index.php page or try to access it directly, I encounter this error: Notice: ...

phphtmlsql

The error message "Property 'push' of undefined in AngularJS" occurs when the push method is being called

I'm currently working on developing a basic phonebook web application to enhance my knowledge of Angular, but I've encountered an issue with this error message - "Cannot read property 'push' of undefined". Can anyone help me identify th ...

javascriptangularjs

tips for utilizing namespaced getter filtering within a Vuex module in vueJs

In my custom module named ShopItemCategory, I have a Getter getters: { shopItemsCategories: state => state.ShopItemsCategories.data, }, Inside the component, there is a computed function I defined computed: { shopItemsCategories ...

javascriptvue.js

Store a JSON object without creating a reference to it

My issue is presented in a much simpler manner. Here is the json (you can view it here if you wish) {"resource":[{"id":"1408694994","obj":[{"id":"1","action":[{"name":"ON","id":"301"},{"name":"OFF","id":"302"}]},{"id":"2","action":[{"name":"ON","id":"303 ...

javascriptjson

Reveal Visual Content upon Hovering

Is there a way to show an image only when the mouse hovers over it? Additionally, can we underline the adjacent text at the same time? If the mouse moves away from the image, I'd like it to hide again and revert the text back to its original state. T ...

javascriptjqueryhtmlcssmouseover

CSS: Hover below the designated target to reveal an expanding dropdown menu

My initial solution involved toggling the visibility on and off when hovering. However, this approach is not optimal as the menu should smoothly transition into view. When the visibility is toggled, the user does not experience the intended transition effe ...

javascripthtmlcss

Is there a way to send JSON using ExpressJS in UTF-8 encoding?

Currently facing an issue with my new web app that I haven't encountered in the past. Experimenting with a simple code snippet like this: var jsonToSend = {hello: "woørld"}; app.get('/someUrl', function(req, res) { res.setHeader('Co ...

javascriptjsonexpressencodingutf-8

Ways to incorporate JavaScript code within Reactjs

I am currently working with Reactjs and using Nextjs. I am facing a challenge regarding integrating "index.html" with "index.js". At the bottom of "index.html", there is some JavaScript code that I need to transfer to another file. Can you advise me on w ...

javascriptnode.jsreactjsnext.js

Bypassing 403 error in redux and react application

It appears that Redux or express is failing to handle an error scenario where a user updates their password using a reset password link token. An error message should be displayed as follows: if (this.props.error) { return ( <div> ...

javascriptreactjsexpressredux

Extracting the color of a text layer with PSD.JS

Currently, I am utilizing PSD.JS (an efficient photoshop PSD file parser designed for both NodeJS and browsers) to decode several PSD files. Upon extraction of information from a text layer by the parser, color data is returned in the form of an array. Fo ...

javascriptnode.jspsd

Is there a way to run only one instance of puppeteer.launch() and simply forward pages to it in Node.js?

I have a concern regarding the code snippet below. It appears to be launching the browser on every request, potentially causing server issues on Heroku. I would like to modify it so that puppeteer is launched as a Singleton instance, where it only needs ...

javascriptnode.jsherokupuppeteer

The <hr> tag is not displaying properly within the <option> element

I'm facing an issue with a selection element in my Vue project <div class="resultContainer"> <section> <option class="resultBtn" v-for="exchange in finalExchanges"> {{exchange}} <hr></option> </section> ...

htmlcss

How can I take a screenshot from the client side and save it on the server side using PHP?

Currently, I am exploring the possibility of screen capturing at the client side. It appears that the "imagegrabscreen()" function can only capture screens on the server side. After some research, I discovered a new function that allows for screen capture ...

phpjavascripthtmlscreenshot

Height Difference Caused by Textarea Overflow with Auto Scrollbars

Displayed below is code that generates a textarea with 3 visible rows: <textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea> Unexpectedly, in Firefox (version 20.0.1), the textarea displays 4 rows instead of 3. To view ...

htmlcssfirefoxtextarea