Coder Social home page Coder Social logo

animated-lower-thirds's Introduction

Animated-Lower-Thirds

Animated Lower Thirds with dockable Control Panel - OBS Tool

Description

With this tool you can use a control panel to add and change your own lower thirds on the fly. Feel free to customize. Basic knowledge of HTML, Javascript and CSS is required. For communication between control panel and browser layer it use BroadcastChannel API.

This project is based on Lower thirds in HTML/CSS, and Animated lower thirds with control panel.

Lower Thirds Screenshot

Features

  • Include dynamic content to streaming app with browser support (like OBS)
  • 4 differents Lower Thirds at same time
  • 10 slots for each Lower Third (Same configuration but with different title, description and logo)
  • 3 predefined styles
  • Highly customizable (colors, fonts, timing, automation, ...)

Installation

  1. Download the Zip file, unzip it.
  2. See how to install and new features: https://youtu.be/tddMYWya7O0

Requiriments

Unfortunately, OBS doesn't support browser panels on MacOs. It only works on Windows, but can be used on Linux using the snap installation of OBS (More info here)

Usage

See previus features: https://youtu.be/cQ0_1GwpwB0

Support

You can find all videotutorials on this Youtube Channel

Translations

Portugues (Brasil)
Inglês

Contributing

I am a designer and my scripting knowledge is few. I made this tool (Frankenststool) because I needed it and I want to share it. You are welcome to improve it. I am aware that many parts of the code can make any expert cry. I'm really sorry :P

Donations

If you like the extension and you want to support the development - please consider to donate by Paypal. Any donations are greatly appreciated.

License

The Animated Lower Thirds source code is made available under the MIT license.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.