Skip to content

Instantly share code, notes, and snippets.

@gorobey

gorobey/index.html

Created October 19, 2025 17:29
Show Gist options
  • Save gorobey/f8a06b17bc79bcd467b78226bd14d10c to your computer and use it in GitHub Desktop.
Save gorobey/f8a06b17bc79bcd467b78226bd14d10c to your computer and use it in GitHub Desktop.
Download ZIP
Podium
Raw
index.html
<h1> Personnalités politiques les plus interpelées sur Twitter</h1>
<div class="scoreboard">
<div class="scoreboard__podiums">
<div class="scoreboard__podium js-podium" data-height="200px">
<div class="scoreboard__podium-base scoreboard__podium-base--second">
<div class="scoreboard__podium-rank">2</div>
</div>
<div class="scoreboard__podium-number">
Bar de Wever
<small><span class="js-podium-data">160</span></small>
</div>
</div>
<div class="scoreboard__podium js-podium" data-height="250px">
<div class="scoreboard__podium-base scoreboard__podium-base--first">
<div class="scoreboard__podium-rank">1</div>
</div>
<div class="scoreboard__podium-number">
Charles Michel
<small><span class="js-podium-data">195</span></small>
</div>
</div>
<div class="scoreboard__podium js-podium" data-height="150px">
<div class="scoreboard__podium-base scoreboard__podium-base--third">
<div class="scoreboard__podium-rank">3</div>
</div>
<div class="scoreboard__podium-number">
Jan Jambon
<small><span class="js-podium-data">100</span></small>
</div>
</div>
</div>
Raw
script.js
var sum = 1000; // rank 1.
var time = 250;
$(document).ready(function() {
$('.js-podium').each(function(){
var t = $(this);
setTimeout( function(){
t.addClass('is-visible');
var h = t.data('height');
console.log(h);
t.find('.scoreboard__podium-base').css('height', h).addClass('is-expanding');
}, time);
time += 250;
});
randomizeData();
startBars();
sortItems();
countUp();
// randomizePodium();
setInterval(function(){
randomizeData();
startBars();
sortItems();
countUp();
oneUp();
$('.js-podium').removeClass('bump');
podiumUpdate();
}, 10000);
});
function countUp() {
$('.scoreboard__item').each(function() {
var $this = $(this),
countTo = $this.data('count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 500,
easing:'linear',
step: function() {
$this.find('.js-number').text(Math.floor(this.countNum));
},
complete: function() {
$this.find('.js-number').text(this.countNum);
//alert('finished');
}
});
});
}
function randomizeData() {
$('.scoreboard__item').each(function(){
var rand = Math.floor(Math.random() * 900) + 1;
$(this).data('count', rand );
$(this).find('.js-number').text(rand);
});
}
function startBars() {
$('.js-bar').each(function() {
console.log('running');
// calculate %.
var t = $(this);
setTimeout( function(){
var width = t.parent('.scoreboard__item').data('count');
width = width / sum * 100;
width = Math.round(width);
t.find('.scoreboard__bar-bar').css('width', width + "%");
t.parent('li').addClass('is-visible');
}, time);
time += 0;
});
}
function sortItems() {
tinysort.defaults.order = 'desc';
var ul = document.getElementById('scoreboard__items')
,lis = ul.querySelectorAll('li')
,liHeight = lis[0].offsetHeight
;
ul.style.height = ul.offsetHeight+'px';
for (var i= 0,l=lis.length;i<l;i++) {
var li = lis[i];
li.style.position = 'absolute';
li.style.top = i*liHeight+'px';
}
tinysort('ol#scoreboard__items>li', 'span.js-number').forEach(function(elm,i){
setTimeout((function(elm,i){
elm.style.top = i*liHeight+'px';
}).bind(null,elm,i),40);
});
}
function randEmail() {
var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
var string = '';
for(var ii=0; ii<15; ii++){
string += chars[Math.floor(Math.random() * chars.length)];
}
return string + '@domain.tld';
}
function oneUp() {
// play audio - update email.
var randEmail = window.randEmail();
$('.js-oneup').html('Ny påmeldt: ' + randEmail);
$('.js-oneup-audio')[0].play();
}
function randomizePodium() {
$('.js-podium-data').each(function() {
var random = Math.floor(Math.random() * 900) + 1;
$(this).fadeOut(200).text(random + ' deltagere').fadeIn(200);
});
$(this).data('count', random);
}
function podiumUpdate() {
$('.js-podium').each(function() {
$(this).addClass('bump');
randomizePodium();
});
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Raleway|Roboto');
h1
{
font-family: "Raleway";
font-weight: 400;
text-align : center;
}
@mixin centerer {
position: absolute;
//top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1
{
text-align : center;
}
$gray: #ececec;
$first: #BD4F6C;
$second: #F0CF65;
$third: #5E9EAD;
body {
font-size: 16px;
background: #fafafa;
font-family: "Roboto";
font-weight : 300;
}
.number-holder {
transition: all 500ms ease-in-out;
}
.scoreboard {
border-radius: 5px;
display: flex;
max-width: 1170px;
margin: 0 auto;
padding: 3rem 50px;
flex-direction: column;
background: #fafafa;
&__item {
display: flex;
padding: 1rem 0;
width: 100%;
margin-top: 2rem;
flex-wrap: wrap;
jusitfy-content : flex-end;
opacity: 0;
top: 20px;
transition: 500ms ease-in-out;
&.is-visible {
opacity: 1;
top: 0;
transition: 500ms ease-in-out;
}
}
&__title {
width: 300px;
font-weight: 600;
small {
color: #333;
}
}
&__status {
font-weight: 300;
}
&__numbers {
font-weight: 600;
text-align: right;
align-self: flex-end;
margin-left: 20px;
flex: 1;
}
&__update {
}
}
.scoreboard__bar {
width: 100%;
margin-top: 1rem;
background: $gray;
height: 10px;
position: relative;
border-radius: 5px;
transition: all 500ms ease-in-out;
display: flex;
flex-basis: 100%;
&:before {
content: "";
width: 100%;
flex-basis: 100%;
clear: both;
display: block;
}
&-bar {
position: absolute;
height: 10px;
left: 0;
top: 0;
width: 0;
border-radius: 5px;
background: linear-gradient(to right, $second 0%, darken($second,10%) 100%);
transition: all 250ms ease-in-out;
}
}
.scoreboard__podiums {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 20px auto 100px auto;
min-height: 350px;
.scoreboard__podium {
margin: 0 20px;
display: flex;
flex-direction: column;
align-self: flex-end;
flex-wrap: wrap;
flex: 1;
opacity: 0;
top: -10px;
&.is-visible {
top: 0;
opacity: 1;
transition: all 500ms ease-in-out;
}
&-rank {
font-size: 4rem;
font-weight: 700;
@include centerer();
bottom: 0px;
}
&-base {
height: 0;
background: $gray;
color: #fff;
min-width: 150px;
border-radius: 5px;
transition: all 1000ms ease-in-out;
opacity: 0;
position: relative;
&.is-expanding {
opacity: 1;
}
&--first {
background: linear-gradient(to bottom, $first 0%, darken($first,10%) 100%);
}
&--second {
background-color: $second;
background: linear-gradient(to bottom, $second 0%, darken($second,10%) 100%);
}
&--third {
background-color: $third;
background: linear-gradient(to bottom, $third 0%, darken($third,10%) 100%);
}
}
&-number {
text-align :center;
font-size: 1.2rem;
margin-top: 10px;
small {
display: block;
font-size: 60%;
color: #333;
line-height: 1.5;
text-transform: uppercase;
}
}
}
}
.credits {
font-size: 14px;
text-align: center;
margin: 20px 0;
}
#scoreboard__items {
position: relative;
margin: 0;
padding: 0;
list-style-type: decimal;
}
.oneup-audio {
display: none;
}
.style-switch {
position: absolute;
top: 0;
left: 0;
background: #000;
color: #fff;
padding: 5px 10px;
border: none;
font-size: 15px;
}
body.dark-mode {
background: #111;
color: #fff;
.scoreboard {
background: #111;
color: #fff;
small {
color: #eee !important;
}
}
.scoreboard__bar {
background: #333;
}
}
.bump {
animation: bump 500ms ease-in-out;
}
@keyframes bump {
0% {
}
50% {
transform: scale(1.1);
}
60% {
transform: scale(1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment