Bling Machine

(BlaB! AX Pro v21.05+)

Bling Machine displays in chat fullscreen content with sound - fullscreen animations, announcements, fullscreen or part-screen advertisements. You can build your blings from scratch or start with the provided templates. Certain chatters can trigger the blings directly from chat (group permission T is required) or it can be combined with Aunt Hedwig or TheGodFather. For example a TGF subset with a keyword happy birthday and the bling key of the Happy Birthday animation in phrases will trigger the Happy Birthday bling everytime someone posts happy birthday in chat. Regular blings are not triggered if the receiving users are chatting privately or in another room. A super bling appears to everyone in chat - use with caution. Any mp3 file from the subfolder /bling can be selected as a Bling sound file.

To create a new BLING go to AdminCP » Machines » Bling Machine and hit New Bling which would create a blank disabled entry called NEWBLING. Select any of the predefined templates and adjust the text, the sound and the colors to your liking.

Your own BLING from scratch

Our templates often use vw and vh as measurement units for width, height and CSS font-size attribute of the text of the blings. It's important to understand what vw and vh are. 1vw is equal to 1% of the chat window width. 1vh is equal to 1% of the chat window height. Using vw and vh you can precisely adjust your animations so they look the same or very similar on desktop screens (landscape) and mobile devices (portrait).

1. Go to AdminCP » Machines » Bling Machine and hit New Bling

2. In the Bling elements box enter: <div class="mybling_01">BLING!</div>

3. Preview - you should see a tiny text BLING! in the top/left corner of the window

4. In the Bling CSS box enter a selector called .mybling_01 save with OKAY and preview:

   .mybling_01{position:fixed; left:0; right:0; top:0; height:100vh; font-size:15vw; 
   line-height:100vh; color:#FFFFFF; background-color:#AD1457; text-align:center}

5. Now you have a DIV element that covers the whole window and a vertically and horizontally centered text in it.

• left:0; right:0 - the DIV begins at 0px from the left border and ends at 0px from the right border of the window
• top:0; height:100vh - the DIV begins at 0px from the top border of the window and covers 100% of the window
• text-align:center; line-height:100vh - puts the text centered in the middle of the window

6. Let's animate it. In the Bling CSS box replace the selector mybling_01 save with OKAY and preview:

   .mybling_01{position:fixed; left:0; right:0; top:-100vh; 
    height:100vh; font-size:15vw; line-height:100vh; color:#FFFFFF; 
    background-color:#AD1457; text-align:center; 
    animation: myframes_01 3s linear 1 forwards}
    @keyframes myframes_01{20%{top:-100vh}30%{top:0}90%{top:0}100%{top:100vh}}

7. Now the DIV slides from the top, stops in the middle and disappears to the bottom of the window.

• top:-100vh - puts the DIV above the visible area of the window
• animation: myframes_01 3s linear 1 forwards - tells the browser to use an animation myframes_01 with length 3sec
• @keyframes myframes_01{20%{top:-100vh}30%{top:0}90%{top:0}100%{top:100vh}}
  • 20%{top:-100vh} - from 0% to 20% of the animation time don't do anything - the position doesn't change: -100vh
  • 30%{top:0} - from 20% to 30% of the animation time move the DIV from -100vh to 0
  • 90%{top:0} - from 30% to 90% don't do anything as the position of the DIV stays the same: 0
  • 100%{top:100vh} - from 90% to 100% move the DIV from 0 to 100vh

More? Here: CSS Animations - w3schools