数日前、私はあなたの問題に似たものが必要でした。マーキーは標準的な要素ではないことがすぐにわかりました。そのため、クロスブラウザーソリューションでは使用できません。
ソリューションで使用したjQueryに基づいてアニメーション部分を抽出しました。このjsFiddleで効果を確認できます。
HTML
<div id="container">
<div id="mytext">
this is a simple text to test custom marquee
</div>
</div>
CSS
#container
{
display: inline-block;
background-color: #cccccc;
width: 100px;
height: 100px;
overflow: hidden;
}
#mytext
{
display: inline-block;
position: relative;
white-space: nowrap;
}
JavaScript
$(function() {
var txt = $("#mytext");
txt.bind('scroll', function () {
var el = $(this);
// Scroll state machine
var scrollState = el.data("scrollState") || 0;
el.data("scrollState", (scrollState + 1) % 4);
switch (scrollState) {
case 0: // initial wait
el.css({ left: 0 });
el.show();
window.setTimeout(function () {
el.trigger("scroll");
}, 5000);
break;
case 1: // start scroll
var delta = el.parent().width() - el.width();
if (delta < 0) {
el.animate({ left: delta }, 2000, "linear", function () {
el.trigger("scroll");
});
}
break;
case 2: // delay before fade out
window.setTimeout(function () {
el.trigger("scroll");
}, 2000);
break;
case 3: // fade out
el.fadeOut("slow", function () {
el.trigger("scroll");
});
break;
}
}).trigger("scroll");
});
要件と同じように正確に機能するわけではありませんが、コードを読んでステートマシンに変更を加えると、機能するようになります:)