Twitch Social Popup

index.html

<link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<div id="popup-container">
  <div class="popup twitter-pop" data-box="enableTwitter">
    <div class="left">
      <span class="twitter"></span>
    </div>
    <div class="right twitterUsername">
      <span data-name="twitterUsername"></span>
    </div>
  </div>
  <div class="popup facebook-pop" data-box="enableFacebook">
    <div class="left">
      <span class="facebook"></span>
    </div>
    <div class="right facebookUsername">
      <span data-name="facebookUsername"></span>
    </div>
  </div>
  <div class="popup instagram-pop" data-box="enableInstagram">
    <div class="left">
      <span class="instagram"></span>
    </div>
    <div class="right instagramUsername">
      <span data-name="instagramUsername"></span>
    </div>
  </div>
  <div class="popup youtube-pop" data-box="enableYoutube">
    <div class="left">
      <span class="youtube"></span>
    </div>
    <div class="right youtubeUsername">
      <span data-name="youtubeUsername"></span>
    </div>
  </div>
  <div class="popup tumblr-pop" data-box="enableTumblr">
    <div class="left">
      <span class="tumblr"></span>
    </div>
    <div class="right tumblrUsername">
      <span data-name="tumblrUsername"></span>
    </div>
  </div>
  <div class="popup twitch-pop" data-box="enableTwitch">
    <div class="left">
      <span class="twitch"></span>
    </div>
    <div class="right twitchUsername">
      <span data-name="twitchUsername"></span>
    </div>
  </div>
  <div class="popup paypal-pop" data-box="enablePaypal">
    <div class="left">
      <span class="paypal"></span>
    </div>
    <div class="right paypalUsername">
      <span data-name="paypalUsername"></span>
    </div>
  </div>
  <div class="popup patreon-pop" data-box="enablePatreon">
    <div class="left">
      <span class="patreon"></span>
    </div>
    <div class="right patreonUsername">
      <span data-name="patreonUsername"></span>
    </div>
  </div>
  <div class="popup snapchat-pop" data-box="enableSnapchat">
    <div class="left">
      <span class="snapchat"></span>
    </div>
    <div class="right snapchatUsername">
      <span data-name="snapchatUsername"></span>
    </div>
  </div>
  <div class="popup steam-pop" data-box="enableSteam">
    <div class="left">
      <span class="steam"></span>
    </div>
    <div class="right steamUsername">
      <span data-name="steamUsername"></span>
    </div>
  </div>
  <div class="popup xbox-pop" data-box="enableXbox">
    <div class="left">
      <span class="xbox"></span>
    </div>
    <div class="right xboxUsername">
      <span data-name="xboxUsername"></span>
    </div>
  </div>
  <div class="popup psn-pop" data-box="enablePsn">
    <div class="left">
      <span class="psn"></span>
    </div>
    <div class="right psnUsername">
      <span data-name="psnUsername"></span>
    </div>
  </div>
  <div class="popup origin-pop" data-box="enableOrigin">
    <div class="left">
      <span class="origin"></span>
    </div>
    <div class="right originUsername">
      <span data-name="originUsername"></span>
    </div>
  </div>
  <div class="popup uplay-pop" data-box="enableUplay">
    <div class="left">
      <span class="uplay"></span>
    </div>
    <div class="right uplayUsername">
      <span data-name="uplayUsername"></span>
    </div>
  </div>
  <div class="popup nintendo-pop" data-box="enableNintendo">
    <div class="left">
      <span class="nintendo"></span>
    </div>
    <div class="right nintendoUsername">
      <span data-name="nintendoUsername"></span>
    </div>
  </div>
  <div class="popup battlenet-pop" data-box="enableBattleNet">
    <div class="left">
      <span class="battlenet"></span>
    </div>
    <div class="right battlenetUsername">
      <span data-name="battlenetUsername"></span>
    </div>
  </div>
  <div class="popup deviantart-pop" data-box="enableDeviantArt">
    <div class="left">
      <span class="deviantart"></span>
    </div>
    <div class="right deviantartUsername">
      <span data-name="deviantartUsername"></span>
    </div>
  </div>
  <div class="popup reddit-pop" data-box="enableReddit">
    <div class="left">
      <span class="reddit"></span>
    </div>
    <div class="right redditUsername">
      <span data-name="redditUsername"></span>
    </div>
  </div>
  <div class="popup gamewisp-pop" data-box="enableGameWisp">
    <div class="left">
      <span class="gamewisp"></span>
    </div>
    <div class="right gamewispUsername">
      <span data-name="gamewispUsername"></span>
    </div>
  </div>
  <div class="popup playstv-pop" data-box="enablePlaysTv">
    <div class="left">
      <span class="playstv"></span>
    </div>
    <div class="right playstvUsername">
      <span data-name="playstvUsername"></span>
    </div>
  </div>
</div>

script.js

var settings = {

  // Simply change the name in quotes with your name
  social: {

    // Twitch Name
    twitchUsername: "kyroskoh",

    // Twitter Name
    twitterUsername: "@kyroskoh, @kyroskoh2, @kyroskoh3, @kyroskoh4, @kyroskoh5",

    // Facebook Name
    facebookUsername: "@kyroskoh",

    // Instagram Name
    instagramUsername: "@kyroskoh",

    // Youtube Name
    youtubeUsername: "@KyrosKohKS",

    // Tumblr Name
    tumblrUsername: "@kyroskoh",

    // Paypal Name
    paypalUsername: "ChangeThis",

    // Patreon Name
    patreonUsername: "kyroskoh",

    // Snapchat Name
    snapchatUsername: "kyroskoh",

    // Steam Name
    steamUsername: "kyroskoh",

    // Xbox Name
    xboxUsername: "ChangeThis",

    // Playstation Network Name
    psnUsername: "ChangeThis",

    // Origin Network Name
    originUsername: "kairuosi",

    // Uplay Network Name
    uplayUsername: "kyroskoh",

    // Nintendo Network Name
    nintendoUsername: "ChangeThis",

    // Battle Net Network Name
    battlenetUsername: "kyroskoh#1290",

    // Deviant Art Network Name
    deviantartUsername: "kyroskoh",

    // Reddit Network Name
    redditUsername: "kyroskoh",

    // Game Wisp Network Name
    gamewispUsername: "kyroskoh",

    // Plays.tv Network Name
    playstvUsername: "kyroskoh"

  },

  // Gaming Popup Options
  popup: {

    // This is where you enable or disable networks
    // 1 means enabled, 0 means disabled

    // Enable Twitter
    enableTwitter: 1,

    // Enable Facebook
    enableFacebook: 1,

    // Enable Instagram
    enableInstagram: 1,

    // Enable YouTube
    enableYoutube: 1,

    // Enable Tumblr
    enableTumblr: 1,

    // Enable Twitch
    enableTwitch: 1,

    // Enable PayPal
    enablePaypal: 0,

    // Enable Patreon
    enablePatreon: 1,

    // Enable Snapchat
    enableSnapchat: 1,

    // Enable Steam
    enableSteam: 1,

    // Enable Xbox
    enableXbox: 0,

    // Enable Playstation Network
    enablePsn: 0,

    // Enable Origin Network
    enableOrigin: 1,

    // Enable Uplay Network
    enableUplay: 1,

    // Enable Nintendo Network
    enableNintendo: 0,

    // Enable Battle Net Network
    enableBattleNet: 1,

    // Enable Deviant Art Network
    enableDeviantArt: 1,

    // Enable Reddit Network
    enableReddit: 1,

    // Enable Game Wisp Network
    enableGameWisp: 1,

    // Enable Plays TV Network
    enablePlaysTv: 1,

    //
    // Times to update
    //

    // Time each network animation takes in seconds
    aTime: 5,

    // The delay for the animation cycle to restart in seconds
    pauseTime: 1
  }
};

// You're all done
//
//
//
//
//
//
//
//
// No need to go any further!

// Load Social Network Names
$(".popup .right span").each(function() {
  var socialName = settings.social[$(this).data('name')];
  $(this).append(socialName);
});

// Load Social Popup
$(".popup").each(function() {
  var supporterEnable = settings.popup[$(this).data('box')],
    boxName = $(this).data('box');

  if (supporterEnable == 1) {
    $('input[name=' + boxName + ']').prop('checked', true);
    $(this).addClass("animate-popup");
  } else if (supporterEnable === 0) {
    $('input[name=' + boxName + ']').prop('checked', false);
    $(this).addClass("no-popup");
  } else {
    return false;
  }
});

// Animate Popup

var popups = $('.animate-popup');
var i = 0;
var pT = settings.popup.pauseTime * 1000;

function animatePopup() {
  if (i >= popups.length) {
    i = 0;
  }
  popups.eq(i).addClass("show-popup")
    .delay(settings.popup.aTime * 1000)
    .queue(function() {
      $(this).removeClass("show-popup");
      $(this).dequeue();
      if (i == popups.length) {
        setTimeout(animatePopup, pT);
      } else {
        animatePopup();
      }
    });
  i++;
}
animatePopup();

scripts

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

style.scss

$dark: #101010;
#popup-container {
  width: 470px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.popup {
  width: 470px;
  height: 60px;
  background: #fff;
  display: none;
  .left {
    position: relative;
    height: 60px;
    width: 60px;
    float: left;
    span:before {
      font-size: 40px;
      line-height: 60px;
      width: 60px;
      height: 60px;
      content: "";
      display: block;
      text-align: center;
      color: #FFF;
    }
    .twitter:before {
      background: #4b9bd8 url('http://nerdordie.com/wp-content/uploads/2015/11/twitter.png') no-repeat 10px 10px;
    }
    .facebook:before {
      background: #3a5795 url('http://nerdordie.com/wp-content/uploads/2015/11/facebook.png') no-repeat 10px 10px;
    }
    .instagram:before {
      background: #44749c url('http://nerdordie.com/wp-content/uploads/2015/11/instagram.png') no-repeat 10px 10px;
    }
    .youtube:before {
      background: #ec2727 url('http://nerdordie.com/wp-content/uploads/2015/11/youtube.png') no-repeat 10px 10px;
    }
    .paypal:before {
      background: #005082 url('http://nerdordie.com/wp-content/uploads/2015/11/paypal.png') no-repeat 10px 10px;
    }
    .twitch:before {
      background: #6542a6 url('http://nerdordie.com/wp-content/uploads/2015/11/twitch.png') no-repeat 10px 10px;
    }
    .tumblr:before {
      background: #324f6d url('http://nerdordie.com/wp-content/uploads/2015/11/tumblr.png') no-repeat 10px 10px;
    }
    .patreon:before {
      background: #e6461a url('http://nerdordie.com/wp-content/uploads/2015/11/patreon.png') no-repeat 10px 10px;
    }
    .snapchat:before {
      background: #fffc00 url('http://nerdordie.com/wp-content/uploads/2015/11/snapchat.png') no-repeat 10px 10px;
    }
    .steam:before {
      background: #000 url('http://nerdordie.com/wp-content/uploads/2015/11/steam.png') no-repeat 10px 10px;
    }
    .xbox:before {
      background: #117d10 url('http://nerdordie.com/wp-content/uploads/2015/11/xbox.png') no-repeat 10px 10px;
    }
    .psn:before {
      background: #0b266b url('http://nerdordie.com/wp-content/uploads/2015/11/psn.png') no-repeat 10px 10px;
    }
    .origin:before {
      background: #f05a22 url('http://nerdordie.com/wp-content/uploads/2015/11/origin.png') no-repeat 10px 10px;
    }
    .uplay:before {
      background: #4891cb url('http://nerdordie.com/wp-content/uploads/2015/11/uplay.png') no-repeat 10px 10px;
    }
    .nintendo:before {
      background: #f68b33 url('http://nerdordie.com/wp-content/uploads/2016/03/nintendo.png') no-repeat 10px 10px;
    }
    .battlenet:before {
      background: #000001 url('http://nerdordie.com/wp-content/uploads/2016/03/battlenet.png') no-repeat 10px 10px;
    }
    .deviantart:before {
      background: #05cc47 url('http://nerdordie.com/wp-content/uploads/2016/03/deviantart.png') no-repeat 10px 10px;
    }
    .reddit:before {
      background: #ffffff url('http://nerdordie.com/wp-content/uploads/2016/03/reddit.png') no-repeat 10px 10px;
    }
    .gamewisp:before {
      background: #f8a853 url('http://nerdordie.com/wp-content/uploads/2016/03/gamewisp.png') no-repeat 10px 10px;
    }
    .playstv:before {
      background: #35373b url('http://nerdordie.com/wp-content/uploads/2016/03/playstv.png') no-repeat 10px 10px;
    }
  }
  .right {
    position: relative;
    height: 60px;
    width: 400px;
    float: left;
    color: $dark;
    padding-left: 10px;
    font-size: 30px;
    line-height: 60px;
    white-space: nowrap;
    font-family: 'Montserrat';
    animation: popup-text 2s 1 ease-out;
    -webkit-animation: popup-text 2s 1 ease-out;
    span {
      white-space: nowrap;
    }
    @keyframes popup-text {
      //change to popup			    			    			    			    
      0% {
        color: rgba(16, 16, 16, 0);
        text-indent: -10px
      }
      40% {
        color: rgba(16, 16, 16, 0);
        text-indent: -10px
      }
      50% {
        color: rgba(16, 16, 16, 1);
        text-indent: 0px;
      }
      100% {
        color: rgba(16, 16, 16, 1);
        text-indent: 0px;
      }
    }
    @-webkit-keyframes popup-text {
      //change to popup			    			    			    			    
      0% {
        color: rgba(16, 16, 16, 0);
        text-indent: -10px
      }
      40% {
        color: rgba(16, 16, 16, 0);
        text-indent: -10px
      }
      50% {
        color: rgba(22, 16, 16, 1);
        text-indent: 0px;
      }
      100% {
        color: rgba(16, 16, 16, 1);
        text-indent: 0px;
      }
    }
  }
}

.show-popup {
  display: block;
  animation: popup 1s 1 ease-out;
  -webkit-animation: popup 1s 1 ease-out;
}

@keyframes popup {
  //change to popup
  0% {
    width: 60px;
    margin-top: -10px;
    opacity: 0;
  }
  20% {
    width: 60px;
    margin-top: 0px;
    opacity: 1;
  }
  45% {
    width: 470px;
  }
  100% {
    width: 470px;
  }
}

@-webkit-keyframes popup {
  //change to popup
  0% {
    width: 60px;
    margin-top: -10px;
    opacity: 0;
  }
  20% {
    width: 60px;
    margin-top: 0px;
    opacity: 1;
  }
  45% {
    width: 470px;
  }
  100% {
    width: 470px;
  }
}

.no-popup {
  display: none !important;
}

twitch-social-popup.markdown

Twitch Social Popup

A Pen by Kyros Koh on CodePen.

License.