Bencius

Continuous news ticker

Recommended Posts

Hello, 

 

I'm creating news ticker by few PEN examples which are in this forum, and I got few problems. 

 

1. I need, that all ticker start from right side of web, not center, and when I add for example padding or margin, code crashes and ticker begins to jump and does not go fluently to the end. 

 

2. Ticker speed depends on how much li tags are in ul, is it possible to get one constant speed no matter how many li's are? 

 

Thanks for the answer.

Share this post


Link to post
Share on other sites

Hi @Bencius,

 

Without a Codepen showing your code, it is hard to know what is going wrong. But, here is a quick Pen I put together that may help.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Thanks, I will check, otherwise, I will post code in codepen ;)

Share this post


Link to post
Share on other sites

Good morning, @Shaun Gorneau. Still I have one problem. When loop of spans starts, there is a glitch, when a row jumps back. I'm using same code as yours, and can't understand where is problem... There is a video: 

And here is my pen: 

 

Share this post


Link to post
Share on other sites

Hi @Bencius,

 

Yeah, the problem here is that the tween is always moving "-=50" and can overshoot that amount before resetting. The reason for the constant "-=50" is because of the need for a "constant speed" regardless of the length of the text. We can tackle that another way with some math by defining a "speed" and letting the math determine the duration of the tween. That means we can move the ticker a predefined total amount  (the width of the span) in a single tween before restarting.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Now it seems working fine. Thanks again! 

Share this post


Link to post
Share on other sites

You're welcome @Bencius. I hope you see why the first method caused the snapback and the second method is more precise.

Share this post


Link to post
Share on other sites

One more question. Is it possible to add blur to text moving? So make it look more smoother?

Share this post


Link to post
Share on other sites
1 hour ago, Bencius said:

One more question. Is it possible to add blur to text moving? So make it look more smoother?

 

You certainly can "blur" the text using either some layering of text-shadow .. or css filter blur(). But these don't really achieve what you're looking for which is motion blur. I'm not sure there is much to do but play with the speed variable to get something that produces more or less of what you're looking for. FWIW ... Chrome is buttery smooth, Safari is not too far off of smooth, but there is a little flicker to the text ... and Firefox it a bit jumpy with text positioning. So, each browser will present its own issues.

  • Like 2

Share this post


Link to post
Share on other sites

Sad, but blur didn't help me... There are some problems with CasparCG playout... 

 

Also I would like to ask, if it's possible to add to your script, that on sent command to html I could update content of news ticker without noticing, that something changed? I mean, if first span is shown, while ticker goes, I append to cloned span new content, and while cloned span is showed it changes hidden one? 

Share this post


Link to post
Share on other sites

Hi @Bencius,

 

You can certainly update the ticker content anytime and fire of the clone, position, duration logic for new content. But to have it update without noticing entirely depends on where the content is updated. If it's within the first visible portion of ticker, that would switch quickly at the start of the Tween and be noticed. If the affected text is outside of the visible area, then it would go unnoticed.

 

If you are going to be dealing with dynamic content, I would look at creating content containers adhoc, appending them to a timeline, and calculating their duration based on their width. And "looping" would mean circling around and appending the same content again ... not repeating the tween. It would be one long ever changing timeline full of dynamic tweens.

 

Hope this helps.

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.