My animated video title #5 (BACH) using Overlay HTML and Webvfx

Hi, I created another animated video title (no audio yet…):

https://streamable.com/31yx4

I’m planning to use it for a video presentation for my music students.

It’s all done using HTML code applied to the Overlay HTML to a clip in shotcut.

There’s quite a bit going on: text fading in, a rectangle that “reveals”, changes of text colour, animated glow effect, and some text getting larger (using scale) at the end.

Below is another video of the same animation - however watch out for the moving red rectangles - in the final animation (above) these are coloured the same blue as the background, but I’ve made them red to show how the revealing rectangle works.


https://streamable.com/hbpfe

I’m happy to post the html code if anyone would like to play around with it. Please let me know!
Jon

2 Likes

That’s pretty slick!

Thanks! Took a while to get the timings right but it’s fun! …

I like :slight_smile: You’re putting some good stuff together.

Thanks, QDSOV! I’ve got a little obsessed with doing these animations recently - they’re really fun to create. Not too difficult when you’ve learned a bit about HTML and CSS and how to add the webvfx animations. Thanks for your feedback, and john_solo’s - really nice to know someone out there is responding to it!!! J
P.S. Still happy to post the HTML code if anyone would like to see it.

If you want to share your HTML code so much, just share it. :slight_smile:
I’ve been experimenting with Overlay HTML, and using your code examples as a starting point. So far, all of the examples that I’ve seen of yours are, I’m pretty sure, not overlaid on top of video, and everything I’ve wanted to do so far requires a transparent background… can’t seem to get that to work with just the Overlay HTML filter, but it worked when I also applied a ChromaKey. My experiments are slow going, though, due to somewhat random crashes. I’ve definitely been benefiting from your posts.

Hi john,
Change the background colour of the container (and any other divs) to “transparent” and it should work - so for example change:
background-color:#000567;
to:
background-color:transparent;

Hope this helps. My Scotland - land of mountains title was overlaid:
https://streamable.com/emzaa
https://streamable.com/emzaa

Great to know you are making use of these video titles.
Jon

Ah, thanks, I had been forgetting some basic principles of CSS and had neglected to include background-color:transparent in all of the divs; I had expected the property to be inherited but didn’t actually code it that way (duh).

Still, this only seems to work when applying the Overlay HTML filter to the video in question – when applied to a transparent color clip, nothing appears, unlike with the Text filter, that ignores the opacity of the clip it’s applied to.

Or just create a black, a white and a transparent png with full HD image size and your good to go for all that stuff and more !!!

@Keno40, were you replying to me? If so, have you witnessed the Overlay HTML filter work on a transparent png? It’s not working for me – just blank (though a Text filter works fine). And once again, if you were replying to me, I’m not sure what you mean by “good to go for all that stuff and more,” please explain.

I use it a lot for all the title and 3D text I do. I’ll test further with Webvfx on the weeks coming.

Using titles on a separated track on a transparent png is usefull because it’s easier to apply fade in & out, to move it if you change your mind and change intro clip for ex…

Good job. About a composer who is still my favorite one;)
Did you make your code available somewhere?

Hi Francois. Thanks. Will post the code on here when I get a free moment or two, later today or tomorrow.

Here is the full html code I devised for my Bach Video title:

<html lang="en">
<head>
<meta charset="utf-8" />
<title>J. S. Bach</title>
<style>
body {
background-color: powderblue;
}
div {
	overflow: visible; 
	position: absolute;
    text-shadow:    
    0 0 10px white, 
    0 0 20px white, 
    0 0 30px white, 
    0 0 40px powderblue, 
    0 0 70px powderblue, 
    0 0 80px powderblue, 
    0 0 100px powderblue, 
    0 0 150px 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;
}
#top_title {
            width: 100%;
            position: absolute;
            padding: 0;
            top: 150px; 
            left:50%;
            margin: 0 0 0 -50%;
            font-family:arial;
            font-size:90px;
            color:white;
            background-color:transparent;
            border:1px solid transparent;
            text-align:center;
            text-shadow:none;
			opacity:0;
            z-index:2;
}
#Main_title_white {
            height:400px;
            line-height:400px;      
            width: 1000px;
            position: absolute;
            padding: 0;
            top: 50%; 
            left:50%;
            margin: -200px 0 0 -500px;
            font-family:arial;
            font-size:200px;
            color:white;
            background-color:transparent;
            border:1px solid transparent;
            text-align:center;
            text-shadow:none;
			opacity:0;
}
#Main_title_yellow {
            height:400px;
            line-height:400px;      
            width: 1000px;
            position: absolute;
            padding: 0;
            top: 50%; 
            left:50%;
            margin: -200px 0 0 -500px;
            font-family:arial;
            font-size:200px;
            color:yellow;
            background-color:transparent;
            border:1px solid transparent;
            text-align:center;
            text-shadow:none;
			opacity:0;
}
#title_glow {
            height:400px;
            line-height:400px;      
            width: 1000px;
            position: absolute;
            padding: 0;
            top: 50%; 
            left:50%;
            margin: -200px 0 0 -500px;
            font-family:arial;
            font-size:200px;
            color:white;
            background-color:transparent;
            border:1px solid transparent;
            text-align:center;
			opacity:0;
}
#boundary_box_01 {
            height: 400px; 
            width: 1000px;
            margin: -200px 0 0 -500px;
            text-align:center;              
            padding: 0;
            top: 50%; 
            left:50%; 
            position: absolute;
            background-color:transparent;
            border:1px solid white;
            opacity:0;
}
#boundary_box_02_wide {
            height: 440px; 
            width: 1040px;
            top:314px;
            left:434px;
            text-align:center;              
            padding: 0;
            position: absolute;
            background-color:transparent;
            border:8px solid white;
            opacity:0;
            z-index:0;
} 
#cover_box_left {
            height: 800px; 
            width: 20px;
            position: absolute;
            background-color:#000567;
            opacity:1;
}
#cover_box_top {
            height: 20px; 
            width: 1000px;
            position: absolute;
            background-color:#000567;
            opacity:1;
}
#cover_box_right {
            height: 800px; 
            width: 20px;
            position: absolute;
            background-color:#000567;
            opacity:1;
}
#cover_box_bottom {
            height: 20px; 
            width: 1000px;
            position: absolute;
            background-color:#000567;
            opacity:1;
}
#bottom_text {
            width: 100%;
            position: absolute;
            padding: 0;
            top: 850px; 
            left:50%;
            margin: 0 0 0 -50%;
            font-family:arial;
            font-size:80px;
            color:white;
            background-color:transparent;
            text-align:center;
            text-shadow:none;
    opacity:0;
}
</style>
</head>
<body>
<div id="container">
  <div id="centered_box"></div>
  <div id="top_title" class='webvfx' data-control="10:60"
  data-animate='{start: 0.03, end: 0.2, ease: &quot;linearTween&quot;, 
  0% : {opacity:0;}, 
  100% : {opacity:1;} 
  }'>Composers of the Baroque period</div>
  <div id="Main_title_white" class='webvfx' data-control="10:60"
  data-animate='{start: 0.15, end: 0.3, ease: &quot;linearTween&quot;, 
  0% : {opacity:0;}, 
  100% : {opacity:1;} 
  }'>J. S. Bach</div>
  <div id="title_glow" class='webvfx'
  data-animate='{start: 0.2, end: 0.3, ease: &quot;linearTween&quot;, 
  0% : {opacity:0;}, 
  100% : {opacity:0.6;} 
  }'>J. S. Bach</div>
  <div id="Main_title_yellow" class='webvfx' data-control="10:60"
  data-animate='{start: 0.25, end: 0.4, ease: &quot;linearTween&quot;, 
  0% : {opacity:0;}, 
  100% : {opacity:1;} 
  }'>J. S. Bach</div>
  <div id="boundary_box_01" class='webvfx'  data-animate='{start: 0, end: 0.3, ease: &quot;linearTween&quot;, 
  0% : {opacity:1; }, 
  100% : {opacity:1;} 
  }'></div>
  <div id="boundary_box_02_wide" class='webvfx'
  data-animate='{start: 0.46, end: 0.52, ease: &quot;linearTween&quot;, 
  0% : {opacity:0; }, 
  100% : {opacity:1;} 
  }'></div>
  <div id="cover_box_left" class='webvfx'
  data-animate='{start: 0.0, end: 0.25, ease: &quot;linearTween&quot;, 
  0% : {bottom: 336; left:452;}, 
  100% : {bottom: 336; left:452;} 
  }'
  data-animate2='{start: 0.25, end: 0.31, ease: &quot;linearTween&quot;, 
  0% : {bottom: 336; left:452;}, 
  100% : {bottom: 770; left:452;} 
  }'></div>
  <div id="cover_box_top" class='webvfx'
  data-animate='{start: 0, end: 0.31, ease: &quot;linearTween&quot;, 
  0% : {bottom: 730; left:462;}, 
  100% : {bottom: 730; left:462;} 
  }'
  data-animate2='{start: 0.31, end: 0.36, ease: &quot;linearTween&quot;, 
  0% : {bottom: 730; left:462;}, 
  100% : {bottom: 730; left:1500;} 
  }'></div>
  <div id="cover_box_right" class='webvfx'
  data-animate='{start: 0, end: 0.36, ease: &quot;linearTween&quot;, 
  0% : {top: 336; left:1450;}, 
  100% : {top: 336; left:1450;} }'
  data-animate2='{start: 0.36, end: 0.41, ease: &quot;linearTween&quot;, 
  0% : {top: 336; left:1450;}, 
  100% : {top: 775; left:1450;} 
  }'></div>
  <div id="cover_box_bottom" class='webvfx'
  data-animate='{start: 0, end: 0.41, ease: &quot;linearTween&quot;, 
  0% : {bottom: 320; left:462;}, 
  100% : {bottom: 320; left:462;} }'
  data-animate2='{start: 0.41, end: 0.46, ease: &quot;linearTween&quot;, 
  0% : {bottom: 320; left:462;}, 
  100% : {bottom: 320; left:-580;} 
  }'></div>
  <div id="bottom_text" class='webvfx'
  data-animate='{start: 0, end: 0.52, ease: &quot;linearTween&quot;, 
  0% : {opacity:0; }, 
  100% : {opacity:0;} 
  }'
  data-animate2='{start: 0.52, end: 0.6, ease: &quot;linearTween&quot;, 
  0% : {opacity:0; webkitTransform: scale(0.9, 0.9); }, 
  100% : {opacity:1; webkitTransform: scale(1, 1);} 
  }'>1685 - 1750</div>
</div>
<script src="WebVfx.js"></script>
</body>
</html>

I am new to shortcut, I am just playing around with overlay. if you don’t mind sharing your HTML Overlay; I will really appreciate it.
Thanks
Lali

Thanks Jonray,
I will try it out
Lsr70