Beispiel: ohne großes Framework
Code:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ticker</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
<script type="text/javascript">
/* <![CDATA[ */
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
function getElementsByClassName(searchClass, tagName, domNode) {
if (domNode == null) domNode = document;
if (tagName == null) tagName = '*';
var el = new Array();
var tags = domNode.getElementsByTagName(tagName);
var tcl = " "+searchClass+" ";
for(var i=0,j=0; i<tags.length; i++) {
var test = " " + tags[i].className + " ";
if (test.indexOf(tcl) != -1) {
el[j++] = tags[i];
}
};
return el;
}
function jsTicker() {
}
jsTicker.prototype = {
init: function(ticker) {
var link = ticker.firstElementChild;
if (link) {
var width = (link.style.width ? parseFloat(link.style.width, 10) : link.offsetWidth) + 75;
ticker.insertBefore(link.cloneNode(true), link);
ticker.insertBefore(link.cloneNode(true), link);
var value = 0;
var tick = function() {
value--;
if (value < -width) {
value = 0;
ticker.appendChild(ticker.childNodes[0]);
};
ticker.childNodes[0].style.setProperty('left', value+'px');
ticker.childNodes[1].style.setProperty('left', width+value+'px');
ticker.childNodes[2].style.setProperty('left', 2*width+value+'px');
window.requestAnimationFrame(tick);
};
window.requestAnimationFrame(tick);
}
}
}
function init() {
var tickerList = getElementsByClassName("ticker", "div");
for (var i=0; i<tickerList.length; i++) {
var ticker = new jsTicker();
ticker.init(tickerList[i]);
};
}
function ready(f){/complete|loaded/i.test(document.readyState)?f():setTimeout("ready("+f+")",9)}
ready(init);
/* ]]> */
</script>
<style>
.ticker{border:1px solid black; width:400px; height:18px; overflow:hidden; position:relative; white-space:nowrap;}
.ticker a{display:inline-block; position:absolute; top:0; text-decoration:none;}
</style>
</head>
<body>
<div class="ticker"><a href="/Scheffau-2014">Bilder vom Urlaub in Scheffau am Wilden Kaiser 2014</a></div>
</body>
</html>