DEV Community

Cover image for Green Screen Animation with CSS
Tayfun Erbilen
Tayfun Erbilen

Posted on

3

Green Screen Animation with CSS

Hello everybody, I'm a youtuber and recording web development lectures on my channel. A few days ago I decided to add "subscribe" animation into my videos but unfortunately my hardware wasn't enough to run video edit programs such as "Abobe Premier" or "Final Cut Pro".

So what did I do? I added "subscribe" template into my videos but how? I create a CSS template something like this;

And I added little animation to make sure looks pretty.


Demo: https://codepen.io/tayfunerbilen/pen/OJMOvZj

And I recorded this screen with Camtasia Studio, then edit with Camtasia Studio as well. Because Camtasia is working very well in my computer.

In camtasia, I used "Remove a Color" effect to remove green screen.

Alt Text

Here is the result, with low quality computer finally I can use "subscribe" template on my videos. Also I implemented more template such as "like" template. To take control is very easy and no need big video edit programs anymore :)

I'm not sure this is a good idea but it worked for me, may be one day it works for you. Happy coding!

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay