@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:
- a full screen container div (1920 x 1080 pixels)
- a text container div nested and centred inside 1,
and - 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.
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.