Vertical Scrolling News Ticker
Hallo,
ich möchte auf meiner Hompage gerne einen, vertikalen News Ticker einbauen.
Nun fand ich hierzu diese Anleitung:
https://codepen.io/erickarbe/pen/gyfFB
Der Ticker funktioniert prima.
Was mir allerdings nicht gefällt, ist die Lücke zwischen Ende und Anfang.
Ich würde das gerne ohne Unterbrechung "endlos" laufen lassen.
Kann mir vielleicht jemand sagen, was ich da am Code ändern muss?
Vielen Dank!
Der hier verwendete Code
<style>
.tick{
margin: 25px 0;
width:300px;
overflow:hidden;
border: 2px solid #06F;
border-radius: 5px;
}
ul{
padding: 0;
list-style: none;
}
li{
padding: 20px;
border-bottom: 1px dashed #ccc;
}
li.odd{
background: #fafafa;
}
li:after {
content: '';
display: block;
clear: both;
}
li a{
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #06f;
}
.et-run{
background-color: #0cf;
color: white;
border: 1px solid black;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/jquery.easy-ticker.min.js"></script>
<script src="/js_webseite/jquery.easing.min.js"></script>
<div class="tick">
<ul id="ticker01">
<li><span>10/10/2007</span><a href="#">The first thing that most Javascript programmers</a></li>
<li><span>10/10/2007</span><a href="#">End up doing is adding some code</a></li>
<li><span>10/10/2007</span><a href="#">The code that you want to run</a></li>
<li><span>08/10/2007</span><a href="#">Inside of which is the code that you want to run</a></li>
<li><span>08/10/2007</span><a href="#">Right when the page is loaded</a></li>
<li><span>05/10/2007</span><a href="#">Problematically, however, the Javascript code</a></li>
<li><span>04/10/2007</span><a href="#">The first thing that most Javascript programmers</a></li>
<li><span>04/10/2007</span><a href="#">End up doing is adding some code</a></li>
<li><span>04/10/2007</span><a href="#">The code that you want to run</a></li>
<li><span>03/10/2007</span><a href="#">Inside of which is the code that you want to run</a></li>
<li><span>03/10/2007</span><a href="#">Right when the page is loaded</a></li>
<li><span>01/10/2007</span><a href="#">Problematically, however, the Javascript code</a></li>
</ul>
</div>
<script>
$('.tick').easyTicker({
direction: 'up',
easing: 'linear',
interval: 1500,
height:400
});
</script>