PPZyme

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>

PPZyme.markdown

PPZyme

A Pen by Captain Anonymous on CodePen.

License.

script.js

var settings = {

  // Simply change the name in quotes with your name
  social: {
    
    // Twitch Name
    twitchUsername: "Buffalowave",
    
    // Twitter Name
    twitterUsername: "@buffalowave",
    
    // Facebook Name
    facebookUsername: "ChangeThis",
    
    // Instagram Name
    instagramUsername: "ChangeThis",
    
    // Youtube Name
    youtubeUsername: "buffalowave",
    
    // Tumblr Name
    tumblrUsername: "ChangeThis",
    
    // Paypal Name
    paypalUsername: "ChangeThis",
    
    // Patreon Name
    patreonUsername: "ChangeThis",
    
    // Snapchat Name
    snapchatUsername: "ChangeThis",
    
     // Steam Name
    steamUsername: "buffalowave",
    
     // Xbox Name
    xboxUsername: "ChangeThis",
    
     // Playstation Network Name
    psnUsername: "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: 0,
    
    // Enable Instagram
    enableInstagram: 0,
    
    // Enable YouTube
    enableYoutube: 1,
    
    // Enable Tumblr
    enableTumblr: 0,
    
    // Enable Twitch
    enableTwitch: 1,
    
    // Enable PayPal
    enablePaypal: 0,
    
     // Enable Patreon
    enablePatreon: 0,
    
    // Enable Snapchat
    enableSnapchat: 0,
    
    // Enable Steam
    enableSteam: 1,
    
    // Enable Xbox
    enableXbox: 0,
    
    // Enable Playstation Network
    enablePsn: 0,
    
    //
    // Times to update
    //
    
    // Time each network  animation takes in seconds
    aTime: 5,
    
    // 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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

style.css

$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://i.imgur.com/PHXvIp5.png') no-repeat 10px 10px;      
    }

    .facebook:before {
      background: #3a5795 url('http://i.imgur.com/9YhFukZ.png') no-repeat 10px 10px;
    }

    .instagram:before {
      background: #44749c url('http://i.imgur.com/kr9FPyC.png') no-repeat 10px 10px;
    }

    .youtube:before {
      background: #ec2727 url('http://i.imgur.com/vHg5N2N.png') no-repeat 10px 10px;
    }

    .website:before {
      background: #ff5a4d url('http://i.imgur.com/PHXvIp5.png') no-repeat 10px 10px;
    }

    .paypal:before {
      background: #005082 url('http://i.imgur.com/DsR1o3X.png') no-repeat 10px 10px;
    }

    .twitch:before {
      background: #6542a6 url('http://i.imgur.com/EwgNGbC.png') no-repeat 10px 10px;
    }

    .tumblr:before {
      background: #324f6d url('http://i.imgur.com/lsWrWVj.png') no-repeat 10px 10px;
    }
    
    .patreon:before {
      background: #e6461a url('http://i.imgur.com/6gguIF8.png') no-repeat 10px 10px;
    }
    
    .snapchat:before {
      background: #fffc00 url('http://i.imgur.com/Crm9jjv.png') no-repeat 10px 10px;
    }
    
    .steam:before {
      background: #000 url('http://i.imgur.com/vDrY0zW.png') no-repeat 10px 10px;
    }
    
    .xbox:before {
      background: #117d10 url('http://i.imgur.com/ra0lHh8.png') no-repeat 10px 10px;
    }
    
    .psn:before {
      background: #0b266b url('http://i.imgur.com/FEdMtZi.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;
}