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

Html – How to make an infinite ticker line with only one image?

I have it almost working as expected. However, since there is only one image, when animates to the left side, a gap opens up on the right side. What I need is that the ticker line would always be filled in with the same image, without any gaps.
If image is narrower than the container, it should repeat to left and right.

Any help or guidance is much appreciated.

const tickerImage = document.getElementById('ticker-image');
const tickerLink = document.getElementById('ticker-link');

let isRotating = true;

tickerLink.addEventListener('click', function(e) {
  if (isRotating) {
    e.preventDefault(); // Prevent the link from navigating if it's rotating
  }
});

tickerLink.addEventListener('mouseover', function() {
  isRotating = false;
  tickerImage.style.animationPlayState = 'paused';
});

tickerLink.addEventListener('mouseout', function() {
  isRotating = true;
  tickerImage.style.animationPlayState = 'running';
});
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

.ticker-content {
  text-decoration: none;
  display: block;
  width: 100%;
  /* Set the width to 100% */
  height: 100%;
  /* Set the height to 100% */
  position: relative;
  overflow: hidden;
}

.image-container {
  display: flex;
  width: 100%;
  white-space: nowrap;
  animation: slideImage 10s linear infinite;
}

.image-container img {
  display: inline-block;
  width: 100%
}

@keyframes slideImage {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
<div class="ticker">
  <a href="https://example.com" target="_blank" class="ticker-content" id="ticker-link">
    <div class="image-container">
      <img src="https://images.all-free-download.com/images/graphiclarge/beach_cloud_dawn_horizon_horizontal_landscape_ocean_601821.jpg" alt="Rotating Image" id="ticker-image">
    </div>
  </a>
</div>
Tags:

3

Answers


  1. 0

    background-size: cover; you can try this property in the .tickercontent

    Login or Signup to reply.
  2. 0 
          * {
        overflow: hidden;
      }
      .test {
        display: flex;
        background-image: url("https://images.all-free-download.com/images/graphiclarge/beach_cloud_dawn_horizon_horizontal_landscape_ocean_601821.jpg");
        background-repeat: no-repeat;
        background-size: contain;
      }
      #ticker-image {
        width: 100%;
        animation: slideImage 10s linear infinite;
      }
      @keyframes slideImage {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
    <div class="test">
<img
        src="https://images.all-free-download.com/images/graphiclarge/beach_cloud_dawn_horizon_horizontal_landscape_ocean_601821.jpg"
        alt="Rotating Image"
        id="ticker-image"
      />
    </div>
    Login or Signup to reply.
  3. 0

    JavaScript and CSS to create a ticker effect with an image that animates from right to left. I noticed that you are using only one image element, which causes a gap when it reaches the left side of the container.

    To fix this issue, you could try using two image elements instead of one, and position them next to each other. Then, you can use CSS animations to move them both to the left by the width of one image, and then reset their positions to the right. This way, you will always have one image visible on the screen, and the other one ready to replace it.

    Here is an example of how you could do this:

    HTML file :

    <div id="ticker-container">
  <a id="ticker-link" href="https://www.dummyLink.com">
    <img id="ticker-image-1" src="https://www.dummy.com" alt="logo">
    <img id="ticker-image-2" src="https://www.dummy.com" alt=" logo">
  </a>
</div>

    CSS file :

    #ticker-container {
  width: 300px;
  height: 100px;
  overflow: hidden;
}

#ticker-link {
  display: flex;
  align-items: center;
}

#ticker-image-1,
#ticker-image-2 {
  width: 300px;
  height: auto;
  animation: ticker 5s linear infinite;
}

#ticker-image-2 {
  margin-left: -300px; /* Position the second image to the left of the first one */
}

@keyframes ticker {
  0% {
    transform: translateX(0); /* Start from the right */
  }
  100% {
    transform: translateX(-300px); /* Move to the left by the width of one image */
  }
}

    Js file : 

    const tickerLink = document.getElementById('ticker-link');
const tickerImage1 = document.getElementById('ticker-image-1');
const tickerImage2 = document.getElementById('ticker-image-2');

let isRotating = true;

tickerLink.addEventListener('click', function(e) {
  if (isRotating) {
    e.preventDefault(); // Prevent the link from navigating if it's rotating
  }
});

tickerLink.addEventListener('mouseover', function() {
  isRotating = false;
  tickerImage1.style.animationPlayState = 'paused';
  tickerImage2.style.animationPlayState = 'paused';
});

tickerLink.addEventListener('mouseout', function() {
  isRotating = true;
  tickerImage1.style.animationPlayState = 'running';
  tickerImage2.style.animationPlayState = 'running';
})

    ;

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

Back To Top
Search