JSFiddle - React, Tailwind, and code Playground
by Alexander Tartmin
HTML
<div class="competition-podium">
<div class="podium-block bronze"> <span class="place">3st place</span>
<span class="sum"><span class="current-sum">1000</span>$<span class="dynamic-sum"></span></span>
<span class="name">Oliver Taylor</span>
<div class="podium"></div>
</div>
<div class="podium-block gold"> <span class="place">1st place</span>
<span class="sum"><span class="current-sum">5000</span>$<span class="dynamic-sum"></span></span>
<span class="name">Jacob Collins</span>
<div class="podium"></div>
</div>
<div class="podium-block silver"> <span class="place">2st place</span>
<span class="sum"><span class="current-sum">3000</span>$<span class="dynamic-sum"></span></span>
<span class="name">Peter Gill</span>
<div class="podium"></div>
</div>
</div>
CSS
.competition-podium {
margin: 0 auto 10px;
width: 660px;
height: 250px;
position: relative;
}
.competition-podium .podium-block {
width: 209px;
text-align: left;
display: inline-block;
position: absolute;
bottom: 0;
}
.competition-podium .podium-block .place {
font-size: 22px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
}
.competition-podium .podium-block .sum {
font-size: 75px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
line-height: 70px;
width: 100%;
display: block;
}
.current-sum {
display: none;
}
.competition-podium .podium-block .name {
font-size: 20px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
line-height: 20px;
display: block;
width: 100%;
height: 20px;
text-align: center;
position: absolute;
bottom: 20px;
z-index: 10;
opacity: 0;
}
.competition-podium .podium-block.bronze {
color: #e6d6bf;
left: 451px;
}
.competition-podium .podium-block.bronze .podium {
background: #e6d6bf;
height: 0px;
}
.competition-podium .podium-block.bronze .name {
color: #856e4e;
}
.competition-podium .podium-block.gold {
color: #ead679;
left: 225px;
}
.competition-podium .podium-block.gold .podium {
background: #ead679;
height: 0px;
}
.competition-podium .podium-block.gold .name {
color: #978325;
}
.competition-podium .podium-block.silver {
color: #cbd9de;
left: 0;
}
.competition-podium .podium-block.silver .podium {
background: #cbd9de;
height: 0px;
}
.competition-podium .podium-block.silver .name {
color: #5e818e;
}
JavaScript
$(document).ready(function () {
function podiumAnimate() {
$('.bronze .podium').animate({
"height": "62px"
}, 1500);
$('.gold .podium').animate({
"height": "165px"
}, 1500);
$('.silver .podium').animate({
"height": "106px"
}, 1500);
$('.podium-block .name').delay(1000).animate({
"opacity": "1"
}, 500);
var currentNumber = $('.podium-block.bronze .current-sum').text();
$({numberValue: 1}).animate({numberValue: currentNumber}, {
duration: 1500,
step: function() {
$('.podium-block.bronze .dynamic-sum').text(Math.ceil(this.numberValue));
}
});
var currentNumber = $('.podium-block.gold .current-sum').text();
$({numberValue: 1}).animate({numberValue: currentNumber}, {
duration: 1500,
step: function() {
$('.podium-block.gold .dynamic-sum').text(Math.ceil(this.numberValue));
}
});
var currentNumber = $('.podium-block.silver .current-sum').text();
$({numberValue: 1}).animate({numberValue: currentNumber}, {
duration: 1500,
step: function() {
$('.podium-block.silver .dynamic-sum').text(Math.ceil(this.numberValue));
}
});
}
podiumAnimate();
});