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="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.rawgit.com/vaakash/jquery-easy-ticker/master/jquery.easy-ticker.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!