<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();
External CSS
This Pen doesn't use any external CSS resources.