Forum:
Okay so I've been strugulling for the past HOURS to make this for myself, tryna find and use the right code and I've finally did smght out of allat !
You can go check my profil for an exemple :3
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
To start, you pick a song on YouTube or wherever, then turn it into HTML so it works when you visit your profile. ( Pretty simple right ? NOT FOR LONG )
Okay, so after you paste this into any of your blurbs or interest boxes :
<div id="lyrics">
<span style="animation-delay:2s; animation-duration:4s;">First phrase of your song</span>
<span style="animation-delay:6s; animation-duration:2s;">second</span>
<span style="animation-delay:8s; animation-duration:3s;">and so on</span>
<style>
#lyrics {
position: relative;
height: 120px;
text-align: center;
font-size: 26px;
color: #000000;
text-shadow: 0 0 8px #c7d8bd;
}
#lyrics span {
position: absolute;
width: 100%;
left: 0;
opacity: 0;
animation-name: show;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes show {
0% { opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
</style>
</div>
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
It’s actually pretty simple when you think about it; the “hard” part is how long it takes to match every timestamp to each lyric in the song, which can take hours!
But you know, it’s just HTML and has no connection to the song itself (unlike Java would). Anyway, enjoy the torture — though the result is totally worth it, in my opinion.
Report Topic
Permalink