javascriptjquerycsswrapperslideup

Black background slide up


It is probably very simple but i'm stuck trying to make a homepage automatic background slider like here : https://www.jackdavison.co.uk

That's probably Jquery but I found a way to have something similar with html and Css, only it keeps repeating.

Any help ?

You can see my code here:

HTML

<div class="wrapper">
  <div class="sliding-background"></div>
</div>

CSS:

.wrapper {
  overflow: hidden;
}

.sliding-background {
  background-color: black; 
  height: 560px;
  width: 100%;
  animation: slide 2s linear infinite;
  animation-delay: 4000ms;
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);

  }
  100%{
    transform: translate3d(0px, -2000px, 0px);

  }

}

See on Codepen here

Thank you !


Solution

  • You just need a minor change in your CSS. Just change animation: slide 2s linear infinite; to animation: slide 0.6s ease-out forwards;. Also, I have changed in -2000px to 100% in @keyframes in case if you have a full-height background.

    animation-fill-mode: forwards; Let your element retain the style values from the last keyframe when the animation ends.

    .wrapper {
      overflow: hidden;
    }
    
    .sliding-background {
      background-color: black; 
      height: 560px;
      width: 100%;
      animation: slide 0.6s ease-out forwards;
      animation-delay: 2000ms;
    }
    
    @keyframes slide{
      0%{
        transform: translate3d(0, 0, 0);
      }
      100%{
        transform: translate3d(0px, -100%, 0px); 
      }
    }
    <div class="wrapper">
      <div class="sliding-background"></div>
    </div>

    Please let me know if this helps.