Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Twitch Social Popup
<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>
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();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.