I am looking to create a marquee effect that scrolls from top to bottom, rather than the usual right to left direction.
I came across a code snippet online that utilizes jquery .animate, but I am having trouble modifying it to achieve the desired vertical scroll instead of horizontal movement.
jQuery(document).ready(function($) {
var marquee = function() {
var window_width = window.innerWidth;
var speed = 12 * window_width;
$('#marquee li:first').animate( {top: '-20px'}, speed, 'linear', function() {
$(this).detach().appendTo('#marquee ul').css('', "100%");
marquee();
});
};
if ($("#marquee li").length > 1) {
marquee();
}
});html,
body {
margin: 0;
padding: 0;
width: 100%;
}
#marquee {
background: #090;
font-family: Arial, Verdana, sans-serif;
color: #FFF;
font-size: 12px;
text-align: center;
font-weight: bold;
line-height: 20px;
width: 1035px;
}
#marquee ul {
width: 100%;
height: 20px;
position: relative;
overflow: hidden;
}
#marquee li {
width: 980px;
line-height: 20px;
height: 20px;
position: absolute;
top: 100%;
left: 0;
text-align: center;
list-style: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marquee">
<ul>
<li>test 1</li>
<li>test 2</li>
</ul>
</div>