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: "ChangeThis",
    
    // Twitter Name
    twitterUsername: "ChangeThis",
    
    // Facebook Name
    facebookUsername: "ChangeThis",
    
    // Instagram Name
    instagramUsername: "ChangeThis",
    
    // Youtube Name
    youtubeUsername: "ChangeThis",
    
    // Tumblr Name
    tumblrUsername: "ChangeThis",
    
    // Paypal Name
    paypalUsername: "ChangeThis",
    
    // Patreon Name
    patreonUsername: "ChangeThis",
    
    // Snapchat Name
    snapchatUsername: "ChangeThis",
    
     // Steam Name
    steamUsername: "ChangeThis",
    
     // Xbox Name
    xboxUsername: "ChangeThis",
    
     // Playstation Network Name
    psnUsername: "ChangeThis",
    
    // Origin Network Name
    originUsername: "ChangeThis",
    
    // Uplay Network Name
    uplayUsername: "ChangeThis",
    
    // Nintendo Network Name
    nintendoUsername: "ChangeThis",
    
    // Battle Net Network Name
    battlenetUsername: "ChangeThis",
    
    // Deviant Art Network Name
    deviantartUsername: "ChangeThis",
   
    // Reddit Network Name
    redditUsername: "ChangeThis",
    
    // Game Wisp Network Name
    gamewispUsername: "ChangeThis",
    
    // Plays.tv Network Name
    playstvUsername: "ChangeThis"
    
  },

  // 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: 1,
    
     // Enable Patreon
    enablePatreon: 1,
    
    // Enable Snapchat
    enableSnapchat: 1,
    
    // Enable Steam
    enableSteam: 1,
    
    // Enable Xbox
    enableXbox: 1,
    
    // Enable Playstation Network
    enablePsn: 1,
    
     // Enable Origin Network
    enableOrigin: 1,
    
    // Enable Uplay Network
    enableUplay: 1,
    
    // Enable Nintendo Network
    enableNintendo: 1,
    
    // 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: 4,
    
    // The delay for the animation cycle to restart in seconds
    pauseTime: 120
  }
};

// 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="https://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 simple HTML based popup that will display social networks.

If you're coming here from CodePen's front page and wondering what this is, I made it a while back to allow streamers (on Twitch, YouTube, etc.) to show their social networks during their broadcast.

Myself and my team make quite a few free resources for streamers, so if you're interested - check them out here: https://nerdordie.com/product-tag/free-resource/

A Pen by Derek on CodePen.

License.