Another video title done with overlay HTML/WebVfx


#1

My latest creation - HTML/Webvfx imported into Shotcut:

https://streamable.com/svu4l

Let me know if you would like me to post the HTML code.
Jon


#2

Definitely. That’s really slick, great job. :slight_smile:

I’d swap that for Manchester in a heartbeat.


#3

Please, share, it is very elegant, congratulations.


#4

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>

#5

Great thanks for sharing your work and approach.
I think this is the first serious little step to attack Apple Motion.
Thanks a lot.


#6

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…:grinning::grinning:


Keyframes in action - slideshow. Also featuring overlay HTML/WebVfx
#7

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.


#8

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.


#9

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


#10

OK Jon.
Thanks for that.
I wasn’t aware of the expiration.