Movie-style credits using the built-in webvfx feature - how can I make it scroll faster?

Hi folks,
I’ve been experimenting with the overlay html/webvfx “Movie-Style scrolling credits” feature (without using Elusien’s webvfx framework js) - and have had significant success.

By adding my following HTML code I have been able to create the video below. I have used multiple fonts on purpose in order to experiment.

Here is my style (CSS) and body code (divs) which I pasted into the bottom of the complex code given in SC :

<style>
    body {
       		text-align:center;
		color:white;
		width:1800px;
		left:50%;
		margin:0 0 0 -900px;
	        }
#main_title {
		
		font-size:100px;
		height:150px;
		position: absolute;
		}	

#pilots_2018 {	
  	                font-family:Bellota;
		font-size:70px;
		position: relative;
		top:0px;
		height:100px;
					
		}	

#pilot_title {	font-family:Permanent Marker;
		font-size:50px;
		position: relative;
		margin-top:50px;
		height:60px;
		}
#pilot_name {		font-family:Bahnschrift SemiCondensed;
		font-size:60px;
		position: relative;
		height:100px;
		}	
</style>

</head>

 <body <div="" id="main_title" style="font-family: Elephant;">The Red Arrows
<div id="pilots_2018">Pilots (2018 season):</div>
<div id="pilot_title">Red 1 - Team Leader</div>
<div id="pilot_name">Squadron Leader Martin Pert</div>
<div id="pilot_title">Red 2</div>
<div id="pilot_name"> Flight Lieutenant Jon Bond</div>
<div id="pilot_title">Red 3</div>
<div id="pilot_name"> Squadron Leader Mike Ling</div>
<div id="pilot_title">Red 4</div>
<div id="pilot_name">Flight Lieutenant Chris Lyndon-Smith</div>
<div id="pilot_title">Red 5</div>
<div id="pilot_name">Flight Lieutenant Dan Lowes</div>
<div id="pilot_title">Red 6 - Synchro Leader</div>
<div id="pilot_name">Flight Lieutenant Si Taylor</div>
<div id="pilot_title">Red 7 - Synchro Two</div>
<div id="pilot_name">Flight Lieutenant Toby Keeley</div>
<div id="pilot_title">Red 8</div>
<div id="pilot_name">Flight Lieutenant Matt Masters</div>
<div id="pilot_title">Red 9</div>
<div id="pilot_name">Flight Lieutenant Mike Bowden</div>
<div id="pilot_title">Red 10 - Supervisor</div>
<div id="pilot_name">Squadron Leader Adam Collins</div>
  </body>

… which gives this result:

https://streamable.com/elf8x

However, I have question for @shotcut:

How do I tweak the in-built code to achieve faster scrolling? At present the text moves way too slowly. I tried altering the length of the clip the filter was applied to, but it didn’t change the speed of scrolling. I tried changing a few values in the code but I really have no idea what I am doing! I’d love a solution to this! Thank you.

Why not use the Webvfx Javascript extension? With it the speed of the scrolling is adjusted exactly how you tried to do it by either shortening or lengthening the clip.

Hi @DRM, yes, I could do that using Elusien’s excellent webvfx framework add-on - however I was intrigued to find out how to use the in-built code within Shotcut.

Jon, Can you tell me where I can find the code and I’ll have a look at it for you?

Hi, there’s a development - all seems to be working OK today. Just tried again on my desktop (I was on my laptop yesterday) and I got it to work. The scrolling text now adjusts speed according to the length of clip it’s applied to.
Not sure what was going wrong yesterday, but I’m delighted to report it works OK now, just like it did when using elusien’s framework js:

Just to confirm, this is produced using the built-in webvfx “Movie style credits” feature within the overlay html filter:

https://streamable.com/s9rst

Thanks! Jon

Hi Neil, good to hear from you! I was referring to the webvfx code (movie style credits template) that appears in the SC HTML editor automatically when an overlay html filter is applied. But as you can see in my above post, all is working now :grinning: Thanks!

This topic was automatically closed after 90 days. New replies are no longer allowed.