I've been attempting to implement a scroll-up behavior in WordPress, but I'm facing difficulties in pausing the animation when hovering over it. I've experimented with both jQuery and CSS methods, but have not been successful so far. Any assistance would be greatly appreciated. Below is the CSS code I am working with:
.sliderz {
position: absolute;
list-style-type: none;
text-align: center;
animation: sliderz linear infinite;
}
.sliderz li { line-height: 50px; width: 100vw; }
@keyframes sliderz {
0% { transform: translateY(100vh) }
100% { transform: translateY(-100%) }
}
HTML
<div class=sliderz>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>
jquery:
window.onload = function() {
var lineHeight = document.querySelector(".sliderz li").clientHeight;
var viewHeight = window.innerHeight;
var sliderz = document.querySelector(".sliderz");
var time = (sliderz.offsetHeight * 2.0 + viewHeight * 2) / 100.0; // 500px / sec
sliderz.style.animationDuration = time + "s";
}
I've been trying to incorporate jQuery functionality like this, but have been unsuccessful:
var sL = 4000;
$('.sliderz').animate({
scrollup : su
},100000, 'linear');
$(".sliderz").on("click",function(){
$(this).stop(true,false);
});
$(".sliderz").on("mouseenter",function(){
$(this).stop(true,false);
});
$(".sliderz").on("mouseleave",function(){
$(this).animate({
scrollup : su
},100000, 'linear');
});
I seem to be at an impasse here. Thank you in advance for any help.