Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - Mr. Moustachio

Pages: [1]
1
Custom Notifications / Re: New Follow and Donation request
« on: February 05, 2015, 03:40:50 AM »
I could make a Gif of both the follower and Sub notification, but I would still need CSS code to make the name of the follower/sub animate with the image, wouldn't I?
I'll be the first to admit, I know nothing about CSS; this code was created by a friend of mine, meaning I could be incredibly wrong on all this.

2
Custom Notifications / Re: New Follow and Donation request
« on: January 27, 2015, 02:54:37 PM »
I apologize for the confusion, but I have a slight change to the original post:
Follower Notification stays the same, but the Donation Notification should be changed to Sub Notification, if at all possible.
So To show what I would like to do:

Follower Notification:

I'm looking to have this Picture: https://drive.google.com/file/d/0B6BUmK4-hbopdTVYWUlxSm9Hb1U/view?usp=sharing
Bounce in up and have the new Followers name in the middle of the moustache (Name can overlap a bit) (Current example of name placement can be seen at 28 seconds in: http://www.twitch.tv/thatmoustachio/c/5712120)
Could you also make the Font Sigmar One? https://www.google.com/fonts/specimen/Sigmar+One

Example of Animation:
.animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
    }
    80% {
        -webkit-transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        transform: translateY(-30px);
    }
    80% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}






Subscriber Notification

I have something built, but I would need it slightly modified if you could...
I would like to change this to a Sunscriber notification with the Name aligned where it is currently set in the CSS code. The Name should animate with the moustache image as it is currently coded, then image and text should stay on the screen for 40 seconds before fading out.

<style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Sigmar+One);

      ::webkit-scrollbar {
         visibility: hidden
      }
      body {
         background-color: rgba(0, 0, 0, 0);
         margin: 0px auto;
      }
      #follower-alert {
         background: url('http://tomking.net/mr-moustachio/moustach.png');
         width: 574px !important;
         height: 171px !important;
         animation: animationFrames linear 3s;
         animation-iteration-count: 1;
         transform-origin: 50% 50%;
         animation-fill-mode:forwards; /*when the spec is finished*/
         -webkit-animation: animationFrames linear 3s;
         -webkit-animation-iteration-count: 1;
         -webkit-transform-origin: 50% 50%;
         -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
         -moz-animation: animationFrames linear 3s;
         -moz-animation-iteration-count: 1;
         -moz-transform-origin: 50% 50%;
         -moz-animation-fill-mode:forwards; /*FF 5+*/
         -o-animation: animationFrames linear 3s;
         -o-animation-iteration-count: 1;
         -o-transform-origin: 50% 50%;
         -o-animation-fill-mode:forwards; /*Not implemented yet*/
         -ms-animation: animationFrames linear 3s;
         -ms-animation-iteration-count: 1;
         -ms-transform-origin: 50% 50%;
         -ms-animation-fill-mode:forwards; /*IE 10+*/
      }
         #new-follower {
            margin: 0 !important;
            padding: 0 !important;
            width: 574px !important;
            left: 0 !important;
            top: 52px !important;
            color: #ffffff !important;
            font-family: 'Sigmar One', sans-serif !important;
            font-size: 29px !important;
            font-weight: bold !important;
            line-height: 45px !important;
            position: absolute !important;
            text-align: center !important;
            text-shadow: 2px 2px 1px #000 !important;
            vertical-align: middle !important;
         }

      @keyframes animationFrames{
         0% {
            transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }
         14% {
            transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.20) scaleY(0.80) ;
         }
         17% {
            transform:  translate(5px,0px)  rotate(3deg) scaleX(0.20) scaleY(0.80) ;
         }
         18% {
            transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.20) scaleY(0.80) ;
         }
         20% {
            transform:  translate(4px,0px)  rotate(2deg) scaleX(0.20) scaleY(0.80) ;
         }
         75% {
            transform:  translate(4px,0px)  scaleX(0.30) scaleY(0.80) ;
         }
         82% {
            transform:  translate(4px,0px)  scaleX(0.30) scaleY(0.80) ;
         }
         84% {
            transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }
         86% {
            transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }
         100% {
            transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }

       

      @-moz-keyframes animationFrames{
         0% {
            -moz-transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }
         14% {
            -moz-transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.05) scaleY(0.80) ;
         }
         17% {
            -moz-transform:  translate(5px,0px)  rotate(3deg) scaleX(0.05) scaleY(0.80) ;
         }
         18% {
            -moz-transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.05) scaleY(0.80) ;
         }
         20% {
            -moz-transform:  translate(4px,0px)  rotate(2deg) scaleX(0.05) scaleY(0.80) ;
         }
         75% {
            -moz-transform:  translate(4px,0px)  scaleX(0.08) scaleY(0.80) ;
         }
         82% {
            -moz-transform:  translate(4px,0px)  scaleX(0.05) scaleY(0.80) ;
         }
         84% {
            -moz-transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }
         86% {
            -moz-transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }
         100% {
            -moz-transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }

       

      @-webkit-keyframes animationFrames {
         0% {
            -webkit-transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }
         14% {
            -webkit-transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.05) scaleY(0.80) ;
         }
         17% {
            -webkit-transform:  translate(5px,0px)  rotate(3deg) scaleX(0.05) scaleY(0.80) ;
         }
         18% {
            -webkit-transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.05) scaleY(0.80) ;
         }
         20% {
            -webkit-transform:  translate(4px,0px)  rotate(2deg) scaleX(0.05) scaleY(0.80) ;
         }
         75% {
            -webkit-transform:  translate(4px,0px)  scaleX(0.08) scaleY(0.80) ;
         }
         82% {
            -webkit-transform:  translate(4px,0px)  scaleX(0.05) scaleY(0.80) ;
         }
         84% {
            -webkit-transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }
         86% {
            -webkit-transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }
         100% {
            -webkit-transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }

      @-o-keyframes animationFrames {
         0% {
            -o-transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }
         14% {
            -o-transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.05) scaleY(0.0) ;
         }
         17% {
            -o-transform:  translate(5px,0px)  rotate(3deg) scaleX(0.05) scaleY(0.80) ;
         }
         18% {
            -o-transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.05) scaleY(0.80) ;
         }
         20% {
            -o-transform:  translate(4px,0px)  rotate(2deg) scaleX(0.05) scaleY(0.80) ;
         }
         75% {
            -o-transform:  translate(4px,0px)  scaleX(0.08) scaleY(0.80) ;
         }
         82% {
            -o-transform:  translate(4px,0px)  scaleX(0.05) scaleY(0.80) ;
         }
         84% {
            -o-transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }
         86% {
            -o-transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }
         100% {
            -o-transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }

      @-ms-keyframes animationFrames {
         0% {
            -ms-transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }

         14% {
            -ms-transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.05) scaleY(0.80) ;
         }

         17% {
            -ms-transform:  translate(5px,0px)  rotate(3deg) scaleX(0.05) scaleY(0.80) ;
         }

         18% {
            -ms-transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.05) scaleY(0.80) ;
         }

         20% {
            -ms-transform:  translate(4px,0px)  rotate(2deg) scaleX(0.05) scaleY(0.80) ;
         }

         75% {
            -ms-transform:  translate(4px,0px)  scaleX(0.08) scaleY(0.80) ;
         }

         82% {
            -ms-transform:  translate(4px,0px)  scaleX(0.05) scaleY(0.80) ;
         }

         84% {
            -ms-transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }

         86% {
            -ms-transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }

         100% {
            -ms-transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }
   </style>

3
Feature Requests / Re: New Donation Notification Functionality
« on: January 08, 2015, 05:51:59 PM »
PM has been sent, my friend!

4
Custom Notifications / New Follow and Donation request
« on: January 08, 2015, 05:05:37 PM »
Hi Deepcrew!

I am trying to set up Follow Notifications and Donation Notifications, and need your help! I have a bit of CSS code and a general idea of what I want, but I need help knowing where to put it/how to put it all together and how to make it work with xSplit. Would you be so kind as to assist?

Follower Notification:

I'm looking to have this Picture: https://drive.google.com/file/d/0B6BUmK4-hbopdTVYWUlxSm9Hb1U/view?usp=sharing
Bounce in up and have the new Followers name in the middle of the moustache (Name can overlap a bit) (Current example of name placement can be seen at 28 seconds in: http://www.twitch.tv/thatmoustachio/c/5712120)
Could you also make the Font Sigmar One? https://www.google.com/fonts/specimen/Sigmar+One

Example of Animation:
.animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
    }
    80% {
        -webkit-transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        transform: translateY(-30px);
    }
    80% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}




Donation Notification

I have something built, but I would need it slightly modified if you could...
I would like to change this to a Donation notification with the Name aligned where it is and the amount right underneath it. Both name and donation should animate with the moustache image as it is currently coded, then image and text should stay on the screen for 40 seconds before fading out.

<style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Sigmar+One);

      ::webkit-scrollbar {
         visibility: hidden
      }
      body {
         background-color: rgba(0, 0, 0, 0);
         margin: 0px auto;
      }
      #follower-alert {
         background: url('http://tomking.net/mr-moustachio/moustach.png');
         width: 574px !important;
         height: 171px !important;
         animation: animationFrames linear 3s;
         animation-iteration-count: 1;
         transform-origin: 50% 50%;
         animation-fill-mode:forwards; /*when the spec is finished*/
         -webkit-animation: animationFrames linear 3s;
         -webkit-animation-iteration-count: 1;
         -webkit-transform-origin: 50% 50%;
         -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
         -moz-animation: animationFrames linear 3s;
         -moz-animation-iteration-count: 1;
         -moz-transform-origin: 50% 50%;
         -moz-animation-fill-mode:forwards; /*FF 5+*/
         -o-animation: animationFrames linear 3s;
         -o-animation-iteration-count: 1;
         -o-transform-origin: 50% 50%;
         -o-animation-fill-mode:forwards; /*Not implemented yet*/
         -ms-animation: animationFrames linear 3s;
         -ms-animation-iteration-count: 1;
         -ms-transform-origin: 50% 50%;
         -ms-animation-fill-mode:forwards; /*IE 10+*/
      }
         #new-follower {
            margin: 0 !important;
            padding: 0 !important;
            width: 574px !important;
            left: 0 !important;
            top: 52px !important;
            color: #ffffff !important;
            font-family: 'Sigmar One', sans-serif !important;
            font-size: 29px !important;
            font-weight: bold !important;
            line-height: 45px !important;
            position: absolute !important;
            text-align: center !important;
            text-shadow: 2px 2px 1px #000 !important;
            vertical-align: middle !important;
         }

      @keyframes animationFrames{
         0% {
            transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }
         14% {
            transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.20) scaleY(0.80) ;
         }
         17% {
            transform:  translate(5px,0px)  rotate(3deg) scaleX(0.20) scaleY(0.80) ;
         }
         18% {
            transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.20) scaleY(0.80) ;
         }
         20% {
            transform:  translate(4px,0px)  rotate(2deg) scaleX(0.20) scaleY(0.80) ;
         }
         75% {
            transform:  translate(4px,0px)  scaleX(0.30) scaleY(0.80) ;
         }
         82% {
            transform:  translate(4px,0px)  scaleX(0.30) scaleY(0.80) ;
         }
         84% {
            transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }
         86% {
            transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }
         100% {
            transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }

      

      @-moz-keyframes animationFrames{
         0% {
            -moz-transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }
         14% {
            -moz-transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.05) scaleY(0.80) ;
         }
         17% {
            -moz-transform:  translate(5px,0px)  rotate(3deg) scaleX(0.05) scaleY(0.80) ;
         }
         18% {
            -moz-transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.05) scaleY(0.80) ;
         }
         20% {
            -moz-transform:  translate(4px,0px)  rotate(2deg) scaleX(0.05) scaleY(0.80) ;
         }
         75% {
            -moz-transform:  translate(4px,0px)  scaleX(0.08) scaleY(0.80) ;
         }
         82% {
            -moz-transform:  translate(4px,0px)  scaleX(0.05) scaleY(0.80) ;
         }
         84% {
            -moz-transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }
         86% {
            -moz-transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }
         100% {
            -moz-transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }

      

      @-webkit-keyframes animationFrames {
         0% {
            -webkit-transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }
         14% {
            -webkit-transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.05) scaleY(0.80) ;
         }
         17% {
            -webkit-transform:  translate(5px,0px)  rotate(3deg) scaleX(0.05) scaleY(0.80) ;
         }
         18% {
            -webkit-transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.05) scaleY(0.80) ;
         }
         20% {
            -webkit-transform:  translate(4px,0px)  rotate(2deg) scaleX(0.05) scaleY(0.80) ;
         }
         75% {
            -webkit-transform:  translate(4px,0px)  scaleX(0.08) scaleY(0.80) ;
         }
         82% {
            -webkit-transform:  translate(4px,0px)  scaleX(0.05) scaleY(0.80) ;
         }
         84% {
            -webkit-transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }
         86% {
            -webkit-transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }
         100% {
            -webkit-transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }

      @-o-keyframes animationFrames {
         0% {
            -o-transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }
         14% {
            -o-transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.05) scaleY(0.0) ;
         }
         17% {
            -o-transform:  translate(5px,0px)  rotate(3deg) scaleX(0.05) scaleY(0.80) ;
         }
         18% {
            -o-transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.05) scaleY(0.80) ;
         }
         20% {
            -o-transform:  translate(4px,0px)  rotate(2deg) scaleX(0.05) scaleY(0.80) ;
         }
         75% {
            -o-transform:  translate(4px,0px)  scaleX(0.08) scaleY(0.80) ;
         }
         82% {
            -o-transform:  translate(4px,0px)  scaleX(0.05) scaleY(0.80) ;
         }
         84% {
            -o-transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }
         86% {
            -o-transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }
         100% {
            -o-transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }

      @-ms-keyframes animationFrames {
         0% {
            -ms-transform:  translate(0px,0px)  rotate(0deg) scaleX(0.0) scaleY(0.0) ;
         }

         14% {
            -ms-transform:  translate(4px,0px)  rotate(-5deg) scaleX(0.05) scaleY(0.80) ;
         }

         17% {
            -ms-transform:  translate(5px,0px)  rotate(3deg) scaleX(0.05) scaleY(0.80) ;
         }

         18% {
            -ms-transform:  translate(-4px,0px)  rotate(-3deg) scaleX(0.05) scaleY(0.80) ;
         }

         20% {
            -ms-transform:  translate(4px,0px)  rotate(2deg) scaleX(0.05) scaleY(0.80) ;
         }

         75% {
            -ms-transform:  translate(4px,0px)  scaleX(0.08) scaleY(0.80) ;
         }

         82% {
            -ms-transform:  translate(4px,0px)  scaleX(0.05) scaleY(0.80) ;
         }

         84% {
            -ms-transform:  translate(4px,0px)  scaleX(1.50) scaleY(1.20) ;
         }

         86% {
            -ms-transform:  translate(4px,0px)  scaleX(1.00) scaleY(1.00) ;
         }

         100% {
            -ms-transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
         }
      }
   </style>

5
Closed Beta Applications / Re: Closed Beta Applications Phase 2 - Now Open
« on: November 16, 2014, 10:35:00 AM »
1. Xsplit Forums, Multiple users.           Where did you hear about DeepBot from?
2. ThatMoustachio                                 Your stream name?
3. Chap_Bot                                          Twitch bot account name?
4. Sun-Wed/Fri 12:30am-3am, Thurs 4pm-9pm      Your streaming schedule?
5. No                                                      Is your stream partnered with Twitch?
6. 15-30                                                 Average number of users on your channel?
7. No.                                                     Do you need to migrate an existing points system over to DeepBot?
$10 sent via paypal, Transaction 8LY52213GK706010J.

System Edit : Application Accepted. Install complete. Thanks for the support!

Pages: [1]