« previous next »
Pages: [1]

Author Topic: New Follow and Donation request  (Read 2482 times)

0 Members and 2 Guests are viewing this topic.

Mr. Moustachio

  • Youngling
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile
  • Twitch Name: thatmoustachio
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>
Logged

Mr. Moustachio

  • Youngling
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile
  • Twitch Name: thatmoustachio
Re: New Follow and Donation request
« Reply #1 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>
Logged

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: New Follow and Donation request
« Reply #2 on: January 27, 2015, 03:19:04 PM »
Are you trying to make the mustache animated? You could just make a gif, then put it in, without all the css code.
Logged
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

Mr. Moustachio

  • Youngling
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile
  • Twitch Name: thatmoustachio
Re: New Follow and Donation request
« Reply #3 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.
Logged

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: New Follow and Donation request
« Reply #4 on: February 05, 2015, 05:08:47 AM »
Well, yes, I can look into if you got the .gif. And let me know how you want the text? Like moving with the mustache? Or have it's own animation? It took me a while to find a code to do Marquee/Scrolling text across an image, but it has to be specific code. And I am sure it will be the same with this, but I can work on getting the text as you like.
Logged
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport
Pages: [1]
« previous next »