Video Title made with Elusien's Textflow feature and Overlay HTML filter

@elusien - I like your “TEXTFLOW” feature (part of your latest (1.9) version of the WebVfx framework) so much that I’ve done some experimenting with it - if that’s OK with you.

I copied your code from your “Textflow - HTML overlay examples” webpage - and wondered if I could make it work within a more simple html/css file.

(my limited html brain was getting a little confused with the border:collapse thing, and the “nth child” thing as well, and also the table tags etc…)

So I created some html/css code which had just:

  1. a full screen container div (1920 x 1080 pixels)
  2. a text container div nested and centred inside 1,
    and
  3. a third nested div with the textflow animation applied to the text.

It worked! So this is the result after applying it in Shotcut using the Overlay HTML filter, with the code below.

https://streamable.com/lp8bv

Code:

<html>
<head>
	<style>
	body  {background:lightblue;}
	#full_screen_container {
		position:absolute;
		width: 1920px;
		height: 1080px;
		background-color:purple;
		top:50%;
		left:50%;
		margin:-540px 0 0 -960px; 
		}
		
	#text_container {
	    position: absolute;
		width: 80%; 
		height: 80%;
		top:0; left: 0; bottom: 0; right: 0;
		margin: auto;
		background-color:transparent;
		}
	
	#textflow {
			position: relative;
			top:33%;
			background-color: transparent;
			font-family:arial;
			font-size:100px;
			color:white;
			text-shadow: 2px 2px black;
			text-align:center;
			  
		}
	
	</style>
</head>
<body data-control='8:30'>
<div id="full_screen_container">
<div id="text_container">

<div id="textflow" class='webvfx' data-textflow ='{start: 0.0 , end: 0.4, begin: hidden, finish: visible, 
ease: easeInOutSine, type: 0, 0%: flow,  90%: wait}'>
		<b>The Smith Family<br>Holiday - 2018</b><br><br><br>(Animation Type 0)</div>
		</div>
</div>
</body>
<script src='./WebVfx.js'></script>
</html>

Users might like to copy this text and change some values (eg text content, text size, text colour etc) to suit.

1 Like

@elusien - I made a demo showcasing all 12 of your Textflow animated text styles (all set to Arial typeface at 100px - with a 2px text shadow applied). I used a different made-up text for each Type:

https://streamable.com/p23p7

They look great!! I noticed, though, that some of the styles are not appearing quite like those on your original demo which you posted in your thread:

[HTML Filters: Titles, Scrolling Credits, Stopwatches, Gauges etc]

For example, Type 4 and Type 11 look quite different - in Type 4 for example the text does not originate from the right and swirl across to the left.

I was wondering - is this intentional or could it be a glitch or bug?

3 Likes

I’ll look into it and let you know what I find.

Brilliant demo of the Textflow filter.

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