CODEWITHSUNDEEP
javascripthtmlcss
Pepelius
Pepelius

Reputation: 1609

Animated background scroll between the ends of the image

I have spent half an hour trying to find a suitable background animation effect for a panoramic view over a very wide image.

My current HTML and CSS structure/properties:

/* Background image */
#bgImage {
	position: absolute;
	background-image: url('img/image.php?id=331266');
	background-position: center;
	height: 100%;
	width: 100%;
}
<!-- Panoramic image, 6480 x 1080 px -->
<div id="bgImage></div>

<div id="contentWrap">
  <div class="container>
    <div class="row>
      <div class="col-xs-12">
        <h1>Trying to get this to work</h1>
        <p>...and look cool!</p>
      </div>
    </div>
  </div>
</div>

Everything is up for a change at this point, but I would like to keep it simple. As said, I've already tried looking for solutions, but managed to find nothing of what I'm looking for. I don't necessarily need the background to interact with mouse movement on the screen, so the background could just scroll to the right, where the image ends, and then start turning back left - repeat.

Any ideas on how to accomplish such an animation? I'm sure it's quite simple, but my head is not providing me with enough intel on how-to.

Upvotes: 1

Views: 78

Answers (1)

MattHamer5
MattHamer5

Reputation: 1491

If I understand correctly what it is you're trying to do; you can just use CSS @keyframes to animate the background position back and forth.

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#bgImage{
  width: 200px;
  height: 250px;
  background-image: url(https://picsum.photos/id/524/500/250);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}
<div id="bgImage"></div>

Upvotes: 3

Related Questions