Hello,
I successfully found/change/wrote a HTML5 page including CSS.
The goal is to start a Star Wars effect.
All is working fine using my Navigator.
Adding my html code into the Overlay HTML filter doesn’t run
Hi! You need to use WebVfx to get animations to run. I wrote a tutorial how to do this and posted it here:
Another useful thread:
It’s complex - but very powerful when you get it to work - I created these video titles using HTML Overlay a few months ago:
HTML5 is not really a fixed standard even though the W3C picked it up. It was a living, growing standard for many years with different browsers supporting different parts of it over time in different ways. Therefore, not everything you copy and paste into Overlay HTML is going to work. Definitely, if any of your code referred to any resources as https (or they redirected to https), it will not work because Shotcut does not yet include support for TLS/SSL. Also, you did not provide your code making it impossible for anyone to help.
I understand but how to provide you an html code ? this editor is interpreting it.
You can attach it here by renaming the file to add “.txt” extension or by putting it a zip file. Drag-n-drop the file into the editor is the easiest way to attach. Alternatively, if you have a GitHub account, make a Gist.
Since Shotcut uses an old version of WebKit, you must preface some CSS keywords (keyframes, animation-*, and transform) with “-webkit-” as explained in the following articles:
https://webkit.org/blog/130/css-transforms/
https://webkit.org/blog/324/css-animation-2/
Here is your revised code with those small changes:
code with -webkit-.html.txt (2.7 KB)
Also, CSS Animation like this does not work great in Shotcut due to seeking issues as explained in the following:
https://shotcut.org/howtos/tumult-hype/
As of version 18.08.01, Shotcut includes the Web Animations Polyfill when you choose the option to create a new file in Overlay HTML with WebVfx Javascript extensions. The blank document it creates is setup to provide classic, vertically-scrolling credits.
In Summary, web animation in Shotcut is for advanced users or web developers. With that said, you may get acceptable results for yourself when you export, but do not expect the animation to rewind during preview in Shotcut.
@Fadace Hi - (Bonjour!)
I have adapted your HTML file so that it works in Shotcut:
Full code is attached at the bottom of this post.
Note that to get it to work you must first download the webvfx framework js file from http://www.elusien.co.uk/shotcut/.
(I have renamed Elusien’s latest version WebVfx 1_8.js for clarity, so you should do the same) , and make sure it is in the same folder as the html file.
My code only works for a video in full HD mode (1920x1080px) but it can be adapted for 720 mode. This is because I made a “container” with height=1920px, and width=1080px, then centred all other divs within that container. Then I set the container to “transparent”.
There are lots of other ways to code it, but I find this method works well for me in Shotcut.
Hope this is useful. Jon
My adapted code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html, body {
background-color:transparent;
}
#big_container {
position: absolute;
width: 1920px;
height: 1080px;
background-color:transparent;
left:50%;
top:50%;
margin:-540px 0 0 -960px;
opacity:1; }
#static_text {
position:absolute;
left:50%;
width: 1000px;
height: 200px;
margin:0 0 0 -500px;
top:350px;
font-size: 80px;
text-align: center ;
color: #4bd5ee;
opacity: 0;
}
#crawl_container {
position: absolute;
top: 30%;
left: 50%;
width: 1800px;
margin: 0 0 0 -900px;
top: 200px;
bottom: 0;
height: 50em;
background-color:transparent;
overflow:hidden#;
-webkit-transform-origin: center bottom;
-webkit-transform: perspective(200px) rotateX(15deg);
}
#crawl_content {
position: absolute;
color: yellow;
font-size: 150px;
text-align: center;
opacity:0;
}
</style>
</head>
<body>
<div id="big_container">
<div id="static_text" data-control="35:30" class='webvfx' data-animate='{start: 0.01, end: 0.1, ease:
"easeInOutSine",
0% : {opacity:0;},
30% : {opacity:1;},
70% : {opacity:1;},
100% : {opacity:0;}
}'>
Samedi 18 août 2018<br><br>Dans notre proche galaxie...
</div>
<div id="crawl_container" >
<div id="crawl_content" class='webvfx' data-animate='{start: 0.06, end: 0.8, ease: "linearTween",
0% : {top:100%;opacity: 1;},
95% : {top: -400%; opacity: 1;},
100% : {top: -400%; opacity: 0;}
}' >
<p>
<u><b>Episode X</b></u>
</p>
<p>
Les 9 épisodes de la Guerre
des étoiles ont tous été
produits et présentés
par Georges Lucas
</p>
<p>
Rebels et Empire ont disparu
Seul subsiste un maître
Jedi que vous
connaissez tous...
</p>
<p>
Tous semble lui réussire...
</p>
<p>
Steve...
</p>
<p>
Stève...
</p>
<p>
Steeve...
</p>
<p>
Steeeve...
</p>
<p>
</p>
</div>
</div>
</div>
</body>
<script src="WebVfx 1_8.js"></script>
</html>