123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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>
            
          
!
            
              $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;
}
            
          
!
            
              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();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console