My latest creation - HTML/Webvfx imported into Shotcut:
Let me know if you would like me to post the HTML code.
Jon
2 Likes
Definitely. That’s really slick, great job. 
I’d swap that for Manchester in a heartbeat.
1 Like
Please, share, it is very elegant, congratulations.
1 Like
Uwe and dreamkatcha,
Full HTML code below. Remember to download Elusien’s WebVfx.js file from his website :http://www.elusien.co.uk/shotcut/
and make sure it’s in the same folder as the HTML file.
Regards,
Jon
<html>
<head>
<title>Sidmouth video title</title>
<style >
body {
background-color:powderblue:
}
#container {
height: 1080px;
width: 1920px;
padding: 0;
top: 50%;
left:50%;
position: absolute;
margin: -540px 0 0 -960px;
background-color:#000567;
overflow:hidden;
opacity:1;
}
#global_fade {
height: 1080px;
width: 1920px;
padding: 0;
top: 50%;
left:50%;
position: absolute;
margin: -540px 0 0 -960px;
background-color:transparent;
overflow:hidden;
opacity:1;
}
#text_container {
position:absolute;
display:inline;
top:30%;
height: 350px;
width:1600px;
left:50%;
margin:0 0 0 -800px;
overflow: visible;
background-color:transparent;
text-align:center;
}
#lettertemplate01,#lettertemplate02,#lettertemplate03,#lettertemplate04,#lettertemplate05,
#lettertemplate06,#lettertemplate07,#lettertemplate08 {
position: relative;
display:inline;
font-family: 'A Song for Jennifer';
color: white;
background-color: transparent;
font-size: 300px;
text-shadow: 2px 2px #000000;
text-align:center;
top:10%;
opacity:0;
}
#line {
position: absolute;
height: 6px;
width: 1000px;
background-color: white;
top:55%;
left:50%;
margin-left:-500px;
opacity:0;
}
#subtitle {
position: absolute;
width: 500px;
font-family: 'Arial';
color: white;
background-color: transparent;
font-size: 50px;
text-shadow: 2px 2px #000000;
text-align:center;
top:63%;
left:50%;
margin-left:-250px;
opacity:0;
}
</style>
<body >
<div id="container">
<div id="text_container" >
<div id="lettertemplate01" data-control="5:60" class='webvfx' data-animate='{start: 0.0, end: 0.1, ease:
"easeInOutSine",
0% : {opacity:0; left:-400px; top: 0px;},
100% : {opacity:1; left:0px; top: 0px;}
}'
data-animate2='{start: 0.64, end: 0.74, ease: "easeInOutSine",
0% : {opacity:1; left:0px; top: 0px;},
100% : {opacity:0; left:200px; top: 0px;}
}'>S</div>
<div id="lettertemplate02" class='webvfx' data-animate='{start: 0.02, end: 0.12, ease: "easeInOutSine",
0% : {opacity:0; left:-450px; top: 0px;},
100% : {opacity:1; left:0px; top: 0px;}
}'
data-animate2='{start: 0.62, end: 0.72, ease: "easeInOutSine",
0% : {opacity:1; left:0px; top: 0px;},
100% : {opacity:0; left:200px; top: 0px;}
}'>i</div>
<div id="lettertemplate03"class='webvfx' data-animate='{start: 0.04, end: 0.14, ease: "easeInOutSine",
0% : {opacity:0; left:-450px; top: 0px;},
100% : {opacity:1; left:0px; top: 0px;}
}'
data-animate2='{start: 0.60, end: 0.70, ease: "easeInOutSine",
0% : {opacity:1; left:0px; top: 0px;},
100% : {opacity:0; left:200px; top: 0px;}
}'>d</div>
<div id="lettertemplate04" class='webvfx' data-animate='{start: 0.06, end: 0.16, ease: "easeInOutSine",
0% : {opacity:0; left:-450px; top: 0px;},
100% : {opacity:1; left:0px; top: 0px;}
}'
data-animate2='{start: 0.58, end: 0.68, ease: "easeInOutSine",
0% : {opacity:1; left:0px; top: 0px;},
100% : {opacity:0; left:200px; top: 0px;}
}'>m</div>
<div id="lettertemplate05" class='webvfx' data-animate='{start: 0.08, end: 0.18, ease: "easeInOutSine",
0% : {opacity:0; left:-450px; top: 0px;},
100% : {opacity:1; left:0px; top: 0px;}
}'
data-animate2='{start: 0.56, end: 0.66, ease: "easeInOutSine",
0% : {opacity:1; left:0px; top: 0px;},
100% : {opacity:0; left:200px; top: 0px;}
}'>o</div>
<div id="lettertemplate06" class='webvfx' data-animate='{start: 0.1, end: 0.20, ease: "easeInOutSine",
0% : {opacity:0; left:-450px; top: 0px;},
100% : {opacity:1; left:0px; top: 0px;}
}'
data-animate2='{start: 0.54, end: 0.64, ease: "easeInOutSine",
0% : {opacity:1; left:0px; top: 0px;},
100% : {opacity:0; left:200px; top: 0px;}
}'>u</div>
<div id="lettertemplate07" class='webvfx' data-animate='{start: 0.12, end: 0.22, ease: "easeInOutSine",
0% : {opacity:0; left:-450px; top: 0px;},
100% : {opacity:1; left:0px; top: 0px;}
}'
data-animate2='{start: 0.52, end: 0.62, ease: "easeInOutSine",
0% : {opacity:1; left:0px; top: 0px;},
100% : {opacity:0; left:200px; top: 0px;}
}'>t</div>
<div id="lettertemplate08" class='webvfx' data-animate='{start: 0.14, end: 0.24, ease: "easeInOutSine",
0% : {opacity:0; left:-450px; top: 0px;},
100% : {opacity:1; left:0px; top: 0px;}
}'
data-animate2='{start: 0.5, end: 0.6, ease: "easeInOutSine",
0% : {opacity:1; left:0px; top: 0px;},
100% : {opacity:0; left:200px; top: 0px;}
}'>h</div>
</div>
<div id="line" class='webvfx' data-animate='{start: 0.15, end: 0.36, ease: "easeInOutSine",
0% : {opacity:0; },
100% : {opacity:1; }
}'
data-animate2='{start: 0.70, end: 0.84, ease: "easeInOutSine",
0% : {opacity:1;},
100% : {opacity:0;}
}'></div>
<div id="subtitle" class='webvfx' data-animate='{start: 0.18, end: 0.4, ease: "easeInOutSine",
0% : {opacity:0; },
100% : {opacity:1; }
}'
data-animate2='{start: 0.70, end: 0.84, ease: "easeInOutSine",
0% : {opacity:1;},
100% : {opacity:0;}
}'>East Devon</div>
<script src="WebVfx.js"></script>
</div>
</body>
</html>Great thanks for sharing your work and approach.
I think this is the first serious little step to attack Apple Motion.
Thanks a lot.
Thanks, dreamkatcha and Uwe.
The great thing about HTML overlay is that by using the above code as a template, with just a few tweaks you can change the result to whatever you like… I just did this especially for dreamkatcha from Manchester…
Hi,
Sorry, I don’t know why, but none of the videos here will play for me.
When the site loads, I see a wheel turn, but apart from that, there is nothing I can click on. I use Google Chrome.
Any help will be much appreciated.
Unfortunately, these video embeds are using streamable.com and no longer exist because streamable removes videos that have been inactive for 3 or more months.
Hi, yep, as @shotcut says, unfortunately the video is now gone. But I just re-did a similar one using the HTML code above, and uploaded it to Streamable. Here it is:
https://streamable.com/va31b
Thanks!!
There’s a problem viewing Streamable videos on this forum anyway. See this thread:
Jon
OK Jon.
Thanks for that.
I wasn’t aware of the expiration.