HTML Scroll ( Crawl )

Sentropy

HTML Scroll ( Crawl )

#1 by Sentropy

Hi,
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. :-(

sonny_xny

Re: HTML Scroll ( Crawl )

#2 by sonny_xny

Using "gaussian blur" on the edge of the font maybe can improve little bit :

http://casparcg.com/forum/viewtopic.php ... ker#p28532

Re: HTML Scroll ( Crawl )

#3 by didikunz

Have you ried the Greensock animation library?

Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests

Sentropy

Re: HTML Scroll ( Crawl )

#4 by Sentropy

Didi: I try Greensock but not for scrolling. Anybody have some example for scroll? Greensock have BitBlt function that is perfect for scroll, but its for flash only....
Soony: Yes, using blur may help, but it's not like you have constant jitter so you can make fake motion blur, but it's start every few second, almost I can tell exact every 2-3 sec. Driving me crazy...

raugert

Re: HTML Scroll ( Crawl )

#5 by raugert

I use Greensock to do HTML animations such as scrollers (crawls and credit Rolls). It's fairly clean..

I generally don't use HTML Templates but rather use 'HTML pages' for crawls, supers, scoreboards etc. To do this, I run an Mamp server on my MacbookPro which is on the same network and the CasparCG simply reads the page. I use Livecode to make applications as a frontend to control and update HTML pages. Other folks use templates but it's a matter of preference. ..

If you wish to use this method, here is a link to download files to play with. Feel free to improve and share. I'm just a beginner so my HTML code might be a bit sloppy, but it works ! I've been using Live it on major broadcasters..

https://www.dropbox.com/sh/2acq6a4kw298 ... bzlUa?dl=0

For your crawl, you can play with the 'scroller' app if you like or modify the HTML to your needs. It was originally made for a Telethon but if you put you text in the bottom window, you can scroll that text instead of the datagrid.

cheers,
Richard