Skip to content

Instantly share code, notes, and snippets.

@apipkin
Last active August 29, 2015 14:04
Show Gist options
  • Save apipkin/561841f84a8515dd799b to your computer and use it in GitHub Desktop.
Save apipkin/561841f84a8515dd799b to your computer and use it in GitHub Desktop.
.marquee {
width: 80%;
overflow: hidden;
}
.message {
white-space: nowrap;
position: relative;
}
function model () {
this.someText = "Suspendisse at orci ac metus fermentum cursus. Donec eleifend dapibus tellus, in vestibulum nunc cursus nec. ";
}
ko.applyBindings(new model());
function marquee (message) {
var $message = $(message),
parentWidth = $message.parent().width(),
width = ($message[0].scrollWidth) + (parentWidth / 2),
time = width * 10,
_timer;
function reset () {
parentWidth = $message.parent().width();
width = ($message[0].scrollWidth) + (parentWidth / 2);
time = width * 10;
}
function run () {
console.log('run');
console.log(parentWidth);
$message.css('left', parentWidth);
$message.animate({
left: -(width) + 'px'
}, time, 'linear', function () {
console.log('done');
});
}
function stop () {
console.log('stop');
$message.finish();
clearInterval(_timer);
}
return {
run: function () {
run();
_timer = setInterval(function () {
console.log('...');
run();
}, time + 200);
},
stop: stop,
reset: reset
};
}
var m = marquee($('.message'));
m.run();
console.log(m);
$('button').click(function () {
m.stop();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment