Welcome Forums Download OBS Overlays OBS overlay – Animated Bottom Bar

This topic contains 0 replies, has 1 voice, and was last updated by  Dan N 2 months, 3 weeks ago.

  • Author
    Posts
  • #62811

    Dan N
    Keymaster

    OBS cover

    This OBS overlay shows a sticky bar at the very bottom of the screen with Model’s Name, animated editable text and current date.
    Model’s image from the left bottom corner is animated with help of CSS3 markup.
    With a delay, 3 additional boxes show up behind the sticky bar.
    Premium Username (editable text and crown icon), Twitter username (editable text and Twitter icon) and Email address used for those who want to send you gift cards.
    The email address can not be scrapped by bots because it is not an interactive, copy/paste element.

    OBS overlay type: browser
    Source: local
    Coded: HTML, CSS, Javascript
    Resources: images, font, .tif file (editable Photoshop file)
    bbtnfor

    Author notes:
    – the overlay is not interactive, it is not triggered by tips.
    – all editing process is made via source code
    – all resources run locally from your device (desktop/laptop)
    – the overlay is triggered manually by the model
    – to display the current date we’ve used a piece of javascript
    – to disable a certain element, use the precoded class none added to a HTML element
    – both the CSS and HTML markup is commented to make it easier for you to edit

    Install instructions and full documentation along with all necessary resources provided inside the downloaded file

    Download source code

You must be logged in to reply to this topic.