It is currently 22 Jun 2017, 19:31



HTML Scroll ( Crawl )

CasparCG Server, Client and development

Moderators: Macey, Jonas Hummelstrand, didikunz

HTML Scroll ( Crawl )

Postby Sentropy » 01 Jun 2017, 18:43

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. :-(
Sentropy
 
Posts: 13
Joined: 16 Jun 2012, 12:39

Re: HTML Scroll ( Crawl )

Postby sonny_xny » 02 Jun 2017, 03:39

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

viewtopic.php?f=5&t=839&p=28536&hilit=ticker#p28532
User avatar
sonny_xny
 
Posts: 112
Joined: 06 Jul 2015, 08:59

Re: HTML Scroll ( Crawl )

Postby didikunz » 02 Jun 2017, 09:03

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
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: HTML Scroll ( Crawl )

Postby Sentropy » 02 Jun 2017, 11:21

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...
Sentropy
 
Posts: 13
Joined: 16 Jun 2012, 12:39


Return to Tech and Development

Who is online

Users browsing this forum: julusian, Yahoo [Bot] and 6 guests