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);
}
}
Thank you !
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.