body {
font-family: 'Montserrat', sans-serif;
min-height:100vh;
max-height:100vh;
margin:0;
color:#fff;
display:flex;
flex-direction:column;
a {
color:inherit;
&:not(:hover) {
text-decoration:none;
}
}
background: #222222;
background: -webkit-linear-gradient(to top, #232526, #414345);
#link-a-me {
position: absolute;
bottom:80px;
right:20px;
height:60px;
width:60px;
background:url(https://i.imgur.com/xoxkq1r.png);
background-size:cover;
z-index:1;
animation: pop-in 120s ease-out;
}
.content {
overflow:hidden;
flex-grow:1;
height:calc(100% - 80px);
.lyrics {
padding:50vh 0;
min-height:calc(100vh - 80px);
width:calc(100% - 40px);
margin:0 20px;
text-align:center;
transition: all .25s;
position: relative;
>div {
position: relative;
font-size:40px;
line-height:80px;
color:#666;
transition: all .25s;
&:before {
content:attr(note);
position: absolute;
top:0px;
left:50%;
transform:translate(-50%,-50%);
font-size:18px;
}
&.highlighted {
color:#fff;
font-size:48px;
}
}
}
}
.player {
z-index:10;
background: #F9F9F9;
color:#000;
min-height:80px;
max-height:80px;
display:flex;
flex-direction:row;
.left {
width:80px;
background-image:url(https://i.scdn.co/image/9ca53beeb365f468b023a8360634f309325b5487);
background-size:cover;
}
.right {
flex-grow:1;
display:flex;
flex-direction:column;
.top {
flex-grow:1;
display:flex;
flex-direction:column;
justify-content:center;
padding-left:10px;
.song {
font-size:1.2em;
font-weight:600;
}
}
.bottom {
display:flex;
video { //I was being lazy, RIP if you aren't using chrome for style
flex-grow:1;
height:32px;
}
}
}
}
}
@keyframes pop-in {
0%, 95%{
transform:translateY(100%);
}
100%{
transform:translateY(0%);
}
}
View Compiled
console.clear();
var _data = JSON.parse(`{"lyrics":[{"line":"","time":-1},{"line":"Hey, let's all go into the forest","note":"Verse 1","time":16000},{"line":"Nobody will notice for a while","time":20000},{"line":"There we can visit all the creatures","time":24000},{"line":"Maybe they can teach us facts of life","time":27500},{"line":"","time":32000},{"line":"Or we can travel to the ocean","note":"Verse 2","time":55500},{"line":"Don't forget your lotion","time":59500},{"line":"It's quite hot","time":61500},{"line":"I once met seven lovely crabs","time":64000},{"line":"They said I should go back and join them for tea","time":67500},{"line":"","time":72000},{"line":"Oh wait, the forest got demolished","note":"Verse 3","time":95500},{"line":"When they built the airport years ago","time":99000},{"line":"But we can still go see the ocean","time":103500},{"line":"Cause they put it in a bowl at the mall","time":107500},{"line":"","time":112000}]}`);
var currentLine = "";
function align() {
var a = $(".highlighted").height();
var c = $(".content").height();
var d = $(".highlighted").offset().top - $(".highlighted").parent().offset().top;
var e = d + (a/2) - (c/2);
$(".content").animate(
{scrollTop: e + "px"}, {easing: "swing", duration: 250}
);
}
var lyricHeight = $(".lyrics").height();
$(window).on("resize", function() {
if ($(".lyrics").height() != lyricHeight) { //Either width changes so that a line may take up or use less vertical space or the window height changes, 2 in 1
lyricHeight = $(".lyrics").height();
align();
}
});
$(document).ready(function(){
$("video").on('timeupdate', function(e){
var time = this.currentTime*1000;
var past = _data["lyrics"].filter(function (item) {
return item.time < time;
});
if (_data["lyrics"][past.length] != currentLine) {
currentLine = _data["lyrics"][past.length];
$(".lyrics div").removeClass("highlighted");
$(`.lyrics div:nth-child(${past.length})`).addClass("highlighted"); //Text might take up more lines, do before realigning
align();
}
});
});
generate();
function generate() {
var html = "";
for(var i = 0; i < _data["lyrics"].length; i++) {
html += "<div";
if(i == 0) {
html+=` class="highlighted"`;
currentLine = 0;
}
if(_data["lyrics"][i]["note"]) {
html += ` note="${_data["lyrics"][i]["note"]}"`;
}
html += ">";
html += _data["lyrics"][i]["line"] == "" ? "•" : _data["lyrics"][i]["line"];
html += "</div>"
}
$(".lyrics").html(html);
align();
}