Эффект пролистывания

<!--Эффект пролистывания-->
<!--https://mt-webdesign.ru/slide-->
<script>
$('.line-slide-1, .line-slide-2, .line-slide-3, .line-slide-4, .line-slide-5').addClass("line-slide");
</script>
<style>
.line-slide {
position: absolute;
overflow: hidden;
}
.line-slide:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: #00FF01;
position: absolute;
top: 100%;
left: 0;
transform: translateY(0%);
}
.line-slide-anim-top:before {
animation: slide-top 300ms cubic-bezier(.76,.37,.34,.77) forwards;
}
.line-slide-anim-bottom:before {
animation: slide-bottom 300ms cubic-bezier(.76,.37,.34,.77) forwards;
}
@keyframes slide-top {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100.5%);
}
}
/* Определяем анимацию для слайда снизу */
@keyframes slide-bottom {
from {
transform: translateY(-100.5%);
}
to {
transform: translateY(-200.5%);
}
}
</style>
<script>
// Анимация для 1 линии
$(".trigger-line-hover-1").on("mouseover", function(){
$('.line-slide-1').addClass("line-slide-anim-top").removeClass("line-slide-anim-bottom");
}).on("mouseout", function(){
$('.line-slide-1').removeClass("line-slide-anim-top").addClass("line-slide-anim-bottom");
});
// Анимация для 2 линии
$(".trigger-line-hover-2").on("mouseover", function(){
$('.line-slide-2').addClass("line-slide-anim-top").removeClass("line-slide-anim-bottom");
}).on("mouseout", function(){
$('.line-slide-2').removeClass("line-slide-anim-top").addClass("line-slide-anim-bottom");
});
// Анимация для 3 линии
$(".trigger-line-hover-3").on("mouseover", function(){
$('.line-slide-3').addClass("line-slide-anim-top").removeClass("line-slide-anim-bottom");
}).on("mouseout", function(){
$('.line-slide-3').removeClass("line-slide-anim-top").addClass("line-slide-anim-bottom");
});
// Анимация для 4 линии
$(".trigger-line-hover-4").on("mouseover", function(){
$('.line-slide-4').addClass("line-slide-anim-top").removeClass("line-slide-anim-bottom");
}).on("mouseout", function(){
$('.line-slide-4').removeClass("line-slide-anim-top").addClass("line-slide-anim-bottom");
});
// Анимация для 5 линии
$(".trigger-line-hover-5").on("mouseover", function(){
$('.line-slide-5').addClass("line-slide-anim-top").removeClass("line-slide-anim-bottom");
}).on("mouseout", function(){
$('.line-slide-5').removeClass("line-slide-anim-top").addClass("line-slide-anim-bottom");
});
</script>