Response title
This is preview!
Infinite Animated Vertical Circular Scrolling
in Getting Started
•
9 years ago
I have a container that has a dynamically generated table inside and I want the container to have an infinite scrolling animation effect that wraps around and is circular in nature. I have created a script that does automatically scroll the data in a somewhat circular pattern, but there is too much of a gap from when it gets out of view at the top and comes back up at the bottom. How can I modify my code to somehow create a better wrap around effect, where once the data scrolls about halfway through or so, it starts coming back up from the bottom? Below is what I have so far.. I greatly appreciate any advice!
- <html>
<head>
<title>Rotate Scroll</title>
<style>
.widget
{
position: absolute;
top: 50px;
left: 50px;
background-color: orange;
overflow: hidden;
width: 200px;
height: 100px;
}
.scrollPanel
{
position: relative;
height: 180px;
overflow: hidden;
}
.data
{
position: absolute;
font-size: 24px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
rotateScrollWidgetDataTop( $(".widget") );
function rotateScrollWidgetDataTop( _widget )
{
var animationDuration = 5000;
var scrollableData = _widget.find( ".data" );
var destinationTopPosition = "-" + ( scrollableData.height() + 10 ) + "px";
var startingBottomPosition = ( _widget.height() - 5 ) + "px";
scrollableData.animate(
{
"top" : destinationTopPosition
},
{
duration: animationDuration,
complete: function()
{
$( this ).css( "top", startingBottomPosition );
rotateScrollWidgetDataTop( _widget );
}
});
}
});
</script>
</head>
<body>
<div class="widget">
<div class="scrollPanel">
<div class="data">
<table class="dataTable">
<tbody>
<tr>
<td>Item1</td>
</tr>
<tr>
<td>Item2</td>
</tr>
<tr>
<td>Item3</td>
</tr>
<tr>
<td>Item4</td>
</tr>
<tr>
<td>Item5</td>
</tr>
<tr>
<td>Item6</td>
</tr>
<tr>
<td>Item7</td>
</tr>
<tr>
<td>Item8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
1