Camera Shutter greenscreen + HTML

Resources
1

I have created a small HTML file to create a camera shutter open-close effect. You can tailor it very simply to your requirements.

Just download the file below and remove the “.txt” suffix and run it in a browser. I used it as a browser-source in OBS Studio to creare the demo video below:

Camera_Shutter.html.txt (2.4 KB)

6 Likes
2

Cool! Thanks @elusien!

3

Wow, some pretty advanced* maths in there…

  --sin_cos_45    : 70.71068%;
  -theta         : 45deg;
  --to_x          : calc(var(--sin_cos_45));
  --to_y          : calc(100% - var(--sin_cos_45));

and I see you used clip-path:

  transform-origin: var(--to_x) var(--to_y);
  clip-path       : polygon(100% 0, 0% 100%, 100% 100%);

I really learned a lot from this. Thanks! :+1: :slightly_smiling_face:

*Well, advanced for my brain!

4

If you intend to use the CSS clip-path property check out the clippy webpage. It creates the various parameters for almost any shape you want. You just choose a shape and move the handles to your liking: Clippy — CSS clip-path maker

1 Like
5

Excellent!