lkpprima.blogg.se - World execute me lyrics

The way this position is calculated is pretty hacky imo :)))) For the calculation, the app needs to know the height of the container in pixels (jQuery has a handy function for that), and the height of the tag, which it has no way of knowing before writing it to the DOM.

If the current time falls between the timestamps of the group, it calculates the position it should be on the page, and places it using a position absolute tag.If the current time falls outside the timestamps, it does nothing.The app then, every 25 ms, so 40 times per second, for each group: If its start and end timestamps are in the past and future respectively, it means the lyric is in the process of being typed, so the app calculates which percentage of the lyric should be displayed, and displays it (for the fade effect seen in my previous video, the calculation is pretty complicated (as a Romanian I'd call it "întortocheată"))įor the "scroller" part (the code displayed in this video), I've manually separated the code into "groups" (based on the original video), and manually added start and end timestamps for each group.If its start timestamp is in the future, it does nothing.If its end timestamp is in the past, it displays it.Parses the entire lyric collection, and for every lyric:.

Clears the entire DOM contents of the lyrics container (rly inefficient, ik).

Every 50 milliseconds, so 20 times a second, the app does the following: srt file that I either downloaded or have written manually. json file which contains all the lyrics, along with timestamps, which is generated from a. The codes are extremely messy, and I really don't feel like tidying them up.įor the "printer" part, that of the lyrics (the 'typewriting' effect and the per-word 'fade' effect (see my first video)), the app uses a. I don't plan on publishing the code or the apps.

This time, it's a visual adventure ✨, in that the original video contains a piece of code that relates to the lyrics, and I've taken it, adapted it from Java to JavaScript (specifically, TS), spent a bit writing the code for the glide animation, and it was done! It's really pretty, this one. Well this is just like my previous JS Lyric Video.