Good heavens, it works!! My latest idea!! Woo HOO (excited)…
So I took my “grid” mask idea and took it a stage further, creating this Matte (black and white) video:
I made it with an HTML/CSS file. Then I captured it an saved it as an MP4 using @elusien’s OBS method.
In Shotcut, I imported this matte video onto V2. Then, on V1 I dragged out a transition between 2 clips (the same length as the matte video) and applied a Diagonal Top Right transition, set to “Invert”, with softness cranked up to full.
Then I applied a Blend Mode (ADD) filter to the matte clip:
I have plans to make similar variants of the matte file by tweaking the HTML, but first I’m going to use this transition for my next “flute” video. I’ll post it when finished…
If anyone would like the matte video and/or HTML file, just holler.
I got it from YouTube, but I guess the original file will be better.
We’ve all heard horror stories about what atrocities YouTube does to video clips.
Thanks! (again)
Hi @elusien, here it is (remove the fake .txt extension). To your expert eye you’ll notice it’s untidy code with lots of unused keyframes etc. - because I’m experimenting with other variations. Also, I’m sure I could have condensed the code a lot - or done it in a better way - I created it using my amateur coding logic!
I also created each square as a separate div and positioned it with absolute position. I’m sure I could have used display:grid; but I wasn’t sure how to !
Also, I decided for each square to nest each black square (div) inside a white square (div) with 100% width and height, so I can experiment with moving the black square around and applying overflow:hidden; to make different variations.
Another point - I used the “column select” feature (alt + select) in Notepad++ in conjunction with the column/multi-selection editor(alt+c) to easily input the incremental values.
I have a question - when I record this using OBS, I get scroll-bars. How do I amend the code so there are no scroll-bars? Thanks for taking a look!
Jon, thanks for the HTML file, I’ll use it in one of my videos. I did a bit of a tidy-up and converted it to use “display: grid”. It was quite easy to do this, the code being:
I also made the CSS more concise by giving each black square an “animation position” CSS variable (–P) and then there was only need for 1 animation declaration:
You can then change the order of the animated squares just by changing the positions.
I tried it in OBS And it works without showing any scrollbars, which of course is as it should be. However, I tried your original and that didn’t show scrollbars either. Are you sure you’d set the output to 1920x1080? Try my changed version - below - and let me know how you get on.
(which is 1 pixel more than the calculation (1920 / 5 = 384, 1080/3 = 360) because I was getting that odd 1 pixel line appearing. Could that be something to do with it?
Not sure why it worked for me with OBS using your version. Mine used the the unit “1fr”, which means “1 fraction”, so 3 x 1fr means each div is 1/3 of the whole, rather than an exact pixel count.
Just a thought - try adding the following line at the front of your CSS styles: