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

Help/How To
26

Jonray,

My framework can handle the animation of anything that has a number in it e.g.

  • 100px animated to 222.75px;
  • 10em to 15.5em
  • 0.5 to 0.83
  • 100% to 55.832%
  • #FFF to #0a7e92
  • rgba(256, 128, 53, 1) to rgba(113, 205, 177, 0.554)
  • hsl(30, 100%, 40.5%) to hsl(75, 90.7%, 82%)

Regarding the small square DIVs etc, the “left” position will be relative to the left-hand side of the centred div. If you have “overflow: hidden” specified for the centred div, then the small squares will not appear outside that box. Position 0px will be right up against the edge of the centred box.

The default is “overflow: visible”, so then, if you have left: -50px, the squares would be visible, even when they are outside the centred box.

Once you have everything set positioned correctly relative to the centred box it should then also be positioned correctly in the browser and in Shotcut. the size of the browser page or resolution of the Shotcut frames shouldn’t in theory matter.

Using percentages is a good idea, as it allows the animation to grow in size to match any resolution you use.

I haven’t thought of using the size/position filter of Shotcut to achieve centring, it might be worth trying it to see if it makes it easier to do.

27

Once again, thank you for your speedy and comprehensive reply, Elusien, I look forward to experimenting! I will post on the forum soon to report how I get on…

28

Hi Elusien,
I wondered if you could help me? I’ve made great progress getting to use your HTML WebVfx framework, and solved the problem of centering the text, using your invaluable advice (3 posts above): actually I did it by wrapping the animation divs in a container div and setting the css to :
#container {
height: 1080px;
width: 1920px; /* (the default resolution in shotcut) /
padding: 0;
top: 50%;
left:50%;
position: absolute;
margin: -540px 0 0 -960px; / (half the height/width) */
background-color:#63a2d8;
opacity:1;
}

THEN: I set the main title div (“Bournville”) to width:100%; text-align:center; (and the same for the sub-title div). This centres the text nicely.

I’ve tweaked my “Bournville” animation accordingly and also made a few extra changes - but I’ve hit a problem.

When viewed in Chrome (with data-control=“8:60”) the animation looks like this (this is a screen capture):

But when imported into Shotcut’s HTML Overlay filter and exported, it comes out much slower:

Is there an easy way of speeding up the exported animation? I tried reducing the length of the clip which the HTML Overlay filter was applied to - in the timeline, but it didn’t seem to make any difference. The only way I could get it to speed up was to change the start and end times of each div. - but I don’t really understand what I’m doing with this aspect.
Also am I right in thinking that (for example) a start time of 0.1 would equate to 1 second in Shotcut and so on (ie ten times the value)?

Thanks. I hope to find a little more time today and over the weekend to experiment further…
Thanks
Jon.

29

Oops, I just tried to post the full html code of the above animation but it didn’t work. Perhaps I reached the maximum character limit? Is there a good way of attaching .txt files to posts on here?
Thanks!
Jon

30

Just trying to attach the .txt file of the above animation.Video Title Animation by Jon Raybould HTML and WEBVFX - Bournville fade in with moving white boxes.txt (3.7 KB)
Did it work OK? I used the upload button.

31

Just read your posts. I’ll have a look. The animation ON THE EXPORTED VIDEO should only last as long as the clip is. So if the clip is 10 seconds long it should only be 10 seconds long on the exported video.

It will vary when you look at the clip IN REALTIME depending on how much work Shotcut has to do to show the frames.

Can I double-check that the video you posted above was the exported video file and not a video capture of the Shotcut application with the setting “Realtime (frame dropping)” unset?

The uploading worked by the way, so I can have a look at it on my Surface Pro after dinner tonight.

Regarding the query about a time of 0.1, this equates to 10% (0.1) of the length of the clip to which the filter is applied. So for a 10 second clip it means 1 second, for a 60 second clip it equates to 6 seconds.

32

Just ran your WebVfx Overlay HTML filter in Shotcut on a 10 second clip. The display in Shotcut took about 18 seconds to run, but the exported clip took 10 seconds, as expected.

As I said earlier, the Shotcut display will take a varying amount of time to run the clip, unless you tick the setting "Realtime (Dropping Frames), in which case it will take 10 seconds, but will appear to be jerky as frames get dropped in order to run the clip in real-time. The exported video is always correct (10 seconds).

I created the 10 second clip by using:

  • File -> Open Other -> Color -> OK

Then I used the slider to whittle it down to 10 seconds before adding it to the timeline. Then I rewound the clip to get the play/record head to the beginning of the clip and I then applied the filter.

33

Great, thanks for your replies, Elusien. Yes, firstly, the first video I posted above was a screen capture, using ShareX, of the html rendered in Chrome. I just started ShareX recording and double-clicked the html file so it opened up in Chrome, capturing the whole process. I then edited the resulting mp4 using Shotcut by cropping the edges out. Maybe I shouldn’t have cropped it, to make it clear.

Ah, that might be where I was going wrong. I may not have done this, and I think it could be important. I’ll have a play with that.

Thanks for your help - this is really helpful. Meantime, I did some work on a couple more animations this afternoon. I’ll post them and I’d value your comments, but Is it OK with you if I start a new thread with this since I feel I’ve hi-jacked your thread far too much already!!?
Regards
Jon
PS Thanks for the heads-up about the “Realtime (Dropping frames)” setting. I just checked - it’s on by default in my version. That would answer my next question about why the Shotcut display was very choppy and fragmented.

34

A - HA! Success! Thank you. Here is the animation applied to a 10-second clip:

… and the same animation applied to a 20 - second clip:

  • much slower, although I don’t think the second clip appears exactly twice as slow as the first (just an observation without actually timing it). [EDIT -actually I think it IS going half- speed - the dots finish their travel at 3 seconds in the first slip and at 6 seconds in the second clip ].

I think your advice about applying the filter whilst the playhead is at the beginning of the clip is probably crucial.

35

Here’s another animated video title I just created. I did it to experiment with making the HTML background transparent to see if it would work over a movie clip. Woo Hoo - it works!

Here it is:

https://streamable.com/emzaa

The animation consists of fade-ins, fade-outs, and the main Scotland title has animated letter-spacing which perhaps I could have made more obvious. After the title shows, the whole text and line fades out. I did this in HTML by wrapping the content of the animation in a div called “Section” and applying a fade-out to the whole section.

I attach the full code as a .txt file in case anyone would like to experiment with it. Note - you’ll have to download a font called “Adequate” for the “Scotland” text to appear as it is in my video. Unless you change the font in the HTML code.

Text file:Scotland Land of Mountains HTML WbVfx experiment by Jon Raybould with fade out HTML.txt (2.1 KB)

36

Jon, very professional-looking. I’m glad to see you’re making good use of the framework I developed.

I am looking at one or two other things at the moment that might be useful to do with 3-D and so-on. I’ll post in a new thread when it’s ready for people to experiment with.

37

Brilliant, will look forward to seeing that.

38

@Elusien how would I use this for a css/jquery carousel? the css uses @keyframes for the rotation. I am able to view the html fine in browser but running with qmelt to with the html as a filter it doesnt animate at all. Not sure about how to use this with the current html/css I have. Should I be replacing items where transition: ease-out; is?

39

I assume you are trying to port the code shown here:

There are several problems:

Firstly, the images are provided using using HTTPS, which Shotcut does not support. Either copy the images in a local directory on your computer and use these or find images that are supplied using HTTP.

Secondly, CSS animations like “transform” won’t work, you have to use “-webkit-transform” syntax instead.

Thirdly, some CSS directives, such as “perspective: 1000px” won’t work even if you use the “-webkit-” syntax, as they are not (yet) supported in Shotcut.

Lastly, Shotcut does not handle CSS-only animations well. Simply taking an example that works in a browser and using that as a simple Overlay HTML filter is highly unlikely to work the same as it does in the browser and is more than likely going to hang Shotcut.

Your best bet is to convert the CSS-only animation to a Javascript one and use WebVfx to integrate it tightly into the video frames, but even then, with certain key CSS directives being supported you are limited to what you can do.

See: www.elusien.co.uk/shotcut

I’ve modified the HTML/CSS of the example to (almost) work, but as I said, key directives have to implemented before it will work properly.

I’ll have a look at improving this using my framework, but I’m a bit busy just now, so it will be a little while.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
/* 3D Slideshow */ 
* {
	margin: 0;
	padding: 0;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #6adecd;
}

#slideshow {
	margin: 0 auto;
	padding-top: 50px;
	height: 600px;
	width: 100%;
	background-color: #6adecd;
	box-sizing: border-box;
}

.slideshow-title {
	font-family: 'Allerta Stencil';
	font-size: 62px;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	margin-top: 25%;
	letter-spacing: 3px;
	font-weight: 300;
}

.sub-heading {
	padding-top: 50px;
	font-size: 18px;
} .sub-heading-two {
	font-size: 15px;
} .sub-heading-three {
	font-size: 13px;
} .sub-heading-four {
	font-size: 11px;
} .sub-heading-five {
	font-size: 9px;
} .sub-heading-six {
	font-size: 7px;
} .sub-heading-seven {
	font-size: 5px;
} .sub-heading-eight {
	font-size: 3px;
} .sub-heading-nine {
	font-size: 1px;
}

.entire-content {
	margin: auto;
	width: 190px;
	perspective: 1000px;
	-webkit-perspective: 1000px;
	position: relative;
	padding-top: 80px;
}

.content-carrousel {
	width: 100%;
	position: absolute;
	float: right;
	animation: rotar 15s infinite linear;
	transform-style: preserve-3d;
	-webkit-animation: rotar 15s infinite linear;
	-webkit-transform-style: preserve-3d;
}

.content-carrousel:hover {
	animation-play-state: paused;
	cursor: pointer;
}

.content-carrousel figure {
	width: 100%;
	height: 120px;
	border: 1px solid #3b444b;
	overflow: hidden;
	position: absolute;
}

.content-carrousel figure:nth-child(1) {
	transform: rotateY(0deg) translateZ(300px); 
	-webkit-transform: rotateY(0deg) translateZ(300px); 
} .content-carrousel figure:nth-child(2) {
	transform: rotateY(40deg) translateZ(300px); 
	-webkit-transform: rotateY(40deg) translateZ(300px); 
} .content-carrousel figure:nth-child(3) {
	transform: rotateY(80deg) translateZ(300px); 
	-webkit-transform: rotateY(80deg) translateZ(300px); 
} .content-carrousel figure:nth-child(4) {
	transform: rotateY(120deg) translateZ(300px); 
	-webkit-transform: rotateY(120deg) translateZ(300px); 
} .content-carrousel figure:nth-child(5) {
	transform: rotateY(160deg) translateZ(300px); 
	-webkit-transform: rotateY(160deg) translateZ(300px); 
} .content-carrousel figure:nth-child(6) {
	transform: rotateY(200deg) translateZ(300px); 
	-webkit-transform: rotateY(200deg) translateZ(300px); 
} .content-carrousel figure:nth-child(7) {
	transform: rotateY(240deg) translateZ(300px); 
	-webkit-transform: rotateY(240deg) translateZ(300px); 
} .content-carrousel figure:nth-child(8) {
	transform: rotateY(280deg) translateZ(300px); 
	-webkittransform: rotateY(280deg) translateZ(300px); 
} .content-carrousel figure:nth-child(9) {
	transform: rotateY(320deg) translateZ(300px); 
	-webkit-transform: rotateY(320deg) translateZ(300px); 
} .content-carrousel figure:nth-child(10) {
	transform: rotateY(360deg) translateZ(300px); 
	-webkit-transform: rotateY(360deg) translateZ(300px); 
} 

.shadow {
	position: absolute;
	box-shadow: 0px 0px 20px 0px #000;
	border-radius: 1px;
}

.content-carrousel img {
	image-rendering: auto;
	transition: all 300ms;
	-webkit-transition: all 300ms;
	width: 100%;
	height: 100%;
}

.content-carrousel img:hover {
	transform: scale(1.2);
	transition: all 300ms;
	-webkit-transform: scale(1.2);
	-webkit-transition: all 300ms;
}

@keyframes rotar {
	from {
		transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);
	} to {
		transform: rotateY(360deg);
		-webkit-transform: rotateY(360deg);
	}
}

</style>
</head>
<body>
<!-- 3D Slideshow Section --> 
<section id="slideshow">
			<div class="entire-content">
				<div class="content-carrousel">
<!--					<figure class="shadow"><img src="https://images.pexels.com/photos/758733/pexels-photo-758733.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/21261/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/776653/pexels-photo-776653.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/131046/pexels-photo-131046.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/302515/pexels-photo-302515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/301682/pexels-photo-301682.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/933054/pexels-photo-933054.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
		</div>
	</div> -->
			<figure class="shadow"><img src='http://trips.elusien.co.uk/2017c-New_Zealand/images/Day10a+Gannet_Colony.JPG'      ></figure>                                              
			<figure class="shadow"><img src='http://trips.elusien.co.uk/2017c-New_Zealand/images/Day10b+Gannets.JPG'            ></figure>
			<figure class="shadow"><img src='http://trips.elusien.co.uk/2017c-New_Zealand/images/Day10d+Bethells_Beach_Cave.JPG'></figure>
			<figure class="shadow"><img src='http://trips.elusien.co.uk/2017c-New_Zealand/images/Day10e+Karakare_Falls.JPG'     ></figure>

</section>
</body>
</html>
40

This gives me something to work with. Any help is appreciated as well. And what you have done so far is ten times better than what I had. Each image was stacked only showing one initially. Thanks again

41

I’ve played about a bit more. The main problem is the lack of support in Shotcut for the CSS directive:

	perspective: 1000px;  or  -webkit-perspective: 1000px;   and

transform-style: preserve-3d; or -webkit-transform-style: preserve-3d;

Without this you won’t get what you are hoping for I’m afraid and my framework cannot overcome this.

42

whats interesting is that I use qmelt from shotcut download from the website. I also built qmelt and the webvfx and utils from source. running with melt I actual see movement versus the downloaded qmelt. Wondering if it comes down to the version of qt used during compile

43

The following is my understanding, which may or may not be correct.

Development ceased on QT Webkit, which is used by Shotcut-MLT, in 2013, before the newer CSS animation features became supported. A new framework QT WebEngine, based on Chromium, was being touted as a better replacement.

In 2016 development of QT Webkit was restarted, but there was a lot of work needed to catch up and while it is not quite ready for production yet (there are still some issues with the Windows version) it is available for use and its official release is imminent.

See: http://lists.qt-project.org/pipermail/development/2017-May/029795.html and http://qtwebkit.blogspot.com.cy/2016/08/qtwebkit-im-back.html

Hopefully once this is officially released in QT it will be incorporated into Shotcut-MLT and we shall all reap the benefits of support for more modern HTML/CSS constructs.

44

Elusien, I love your webvfx.js stuff. I have found this for blender, https://www.blendermarket.com/products/25-professional-titles-for-blender . Do you think it would be doable also with your framework?

Thank you for considering.

45

I’ve looked at the website you gave and it may be possible to do something similar for Shotcut videos.

I did at one time think of putting together a set of HTML files as Overlay HTML filters for good looking film titles and film credits for use with my WebVfx.js stuff. People could then, with very little effort and very little knowledge of HTML/CSS/Javascript, modify these to produce some reasonably professional looking beginnings and endings for their Shotcut creations. I know that some people are a bit daunted with HTML and CSS and it would mainly help them.

Unfortunately I got sidetracked doing a fairly large project to produce an app to enable golf club competition secretaries to create and manage golf competitions.

I still have some work to do on the golf app, but it did get me thinking that I could also create an app to simplify creating these Overlay HTML filters. It would be a nice exercise for me to try to do. I’d have to look more closely at the feasibility of doing this, but if it proved too difficult I could always fall back to samples of HTML code that people could edit manually.

I suspect it will be a couple of months before I have the time to make a stab at it,