Question 184038 in Html Question posted in
Some basic documentation can be found here.

Html – Move an image from left to right, then again from left to right

I am working on a css for some images, basically what i want to achieve is that there is a image it should come out of the left side move towards the right side, when it reaches the right end it should again come out of the left side and so on, i was able to achieve this using the following code.

@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>

This works for desktop and not for mobile css it adds scroll to my page even though the image comes out of left again when it reaches the right side but the image container’s width is 100vw, and image is in the start of the container and when image reaches the extreme right side there is a scroll that because of the container width, which is effecting my other absolute elements on the page, can i somehow disable that scroll, or achieve the same thing using some different way because its effecting my other absolute elements as well.

Tags:

2

Answers


  1. 0

    Getting elements to move at all has been answered here: CSS transition effect makes image blurry / moves image 1px, in Chrome?

    As for resetting back to the left hand side, have you considered a script that checks if the image’s location exceeds the pixel width of the window, and if so, resets it back to the left hand side?

    Login or Signup to reply.
  2. 0

    The issue you’re facing is due to the fact that the animated element is moving outside the viewport, causing the page to scroll. One way to prevent this is to hide the overflow on the parent container. However, since you mentioned that this is affecting other absolute elements on your page, another approach might be to use CSS transform property instead of changing 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 slideAnimation keyframes are using translateX to move the image from left to right. The image starts off the screen (-100%) and moves to the right side of the screen (100%). The overflow: hidden on the .row-1 class will prevent any horizontal scrolling caused by the animation.

    This should give you the desired effect without causing any unwanted scrolling

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search