I rly need some help whit scroll or crawl ( news ticker ) template. I made my HTML ( PAL ) template, and use some code for scrolling that I found on this forum. Ofc, my problem is that scroll is jerky. Is there any solution that can make HTML template scroll nice and smooth? I need to send some news/info text that is pretty huge.
I try few tweaks, but nothing helps. I read all about Jq plugins crawler possibility, CSS Marquee, but still don't get good result. ( PC, i7, GTX1050...).
- Code: Select all
// Scroll
// #######################################################
var requestId = 0;
var my_pixels = 0;
var my_pixel = 2; // speed value
function init_scroll() {
my_width = document.getElementById("ScrollTxT2").clientWidth + 1;
document.getElementById("ScrollTxT2").style.left = window.innerWidth + "px";
document.getElementById("ScrollTxT2").style.visibility = "visible";
start_scroll();
}
function animate_scroll() {
document.getElementById("ScrollTxT2").style.left = ((window.innerWidth) - my_pixels) + "px";
my_pixels = my_pixels + my_pixel ;
if ((my_width + window.innerWidth) <= my_pixels) {
my_pixels = 0;
document.getElementById("ScrollTxT2").style.left = ((window.innerWidth) + 1) + "px";
start_scroll();
}else
{
if (stop_me_please != true) {requestId = window.requestAnimationFrame(animate_scroll);}
}
}
function start_scroll() {
stop_scroll();
stop_me_please = false;
requestId = window.requestAnimationFrame(animate_scroll);
}
function stop_scroll() {
if (requestId)
window.cancelAnimationFrame(requestId);
stop_me_please = true;
requestId = 0;
}
Any fast help, test template or code with smooth scroll will be very helpful, because of deadline. Thx
--------------------------------------------
EDIT: As I discover requestAnimationFrame is bug-ed in Chrome engine, because of bad VSYNC. You can test it if you run in CasparCG client, this page: http://www.vsynctester.com/index.html
Chrome ppl temporary fix this bug with faking fix HZ to 50/60 depend on refresh rate. In PAL, CasparCG run on 50Hz so I try to use this code:
- Code: Select all
function init_scroll() { // call this to start
my_width = document.getElementById("ScrollTxT2").clientWidth + 1;
document.getElementById("ScrollTxT2").style.left = window.innerWidth + "px";
document.getElementById("ScrollTxT2").style.visibility = "visible";
requestframe(loop);
}
var requestframe = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000/50) // fix call 50 times per sec.
};
})();
function loop(t) {
document.getElementById("ScrollTxT2").style.left = ((window.innerWidth) - my_pixels) + "px";
my_pixels = my_pixels + my_pixel ;
requestframe(loop); }
...but no luck for now, I can see some jerks in scroll, it's not super smooth. :-(
