Yep. Still third person. 🤦♂️
About this time last year, Ben Evans set to work on a full music video built using only CSS. This attempt was quite optimistic, to say the least. The music was by the fantastic SAlimer, who already had a very cool video:
Ben wanted to see how far he could take CSS in this direction. The song is about the Earth's moon and Ben decided it would be fun if his 'video' started by travelling around the solar system, to eventually land on the moon's surface and take the story from there. So, first step, create a planet in CSS...
Three-dimensional spheres have always been a goal of Ben's to create in CSS, as they are so very difficult to achieve. Ana Tudor has managed to achieve this with her amazing mathematical brain. But Ivorjetski tries his hardest to avoid thinking too much and constructs things in a more structural way.
Ana has also done more planetary creations but they are heavy on the browser, so we kept this example lite :)
But anyway... You can see Ben's first attempts on CodePen if you are interested and there is also a video which shows how he created his attempt. If nothing else it definitely works as the best intro to any of his videos:
It became clear to Ben that his computer will never cope with this approach and the only way he could figure out how to do the animation timing would be painful with this length of track.
And so to the present day!
Ivorjetski and his friend Froggy, wrote a short song, and with the lessons learnt, Ben thought this would be ideal to make a much shorter and simpler video in CSS to go alongside it. It features the same character that appeared in an earlier Table Tennis CSS game of Ben's. Mainly due to Ben's laziness and his awesome ability to copy and paste.
Could it be the first responsive music video?
It made Ben very sad but he had to use the teeny-tiniest amount of JavaScript required to initiate the sound 😭 Please don't judge him too harshly 🙃
Video and track by Ben Evans. Lyrics and vocals by Rob Frogley.
A like to the video of the video would be very much appreciated. And I'm sure SAlimer, the inspiration for this, would appreciate one too. If you would be so kind. Because let's be honest, it's utterly brilliant! :)
Happy MusiCSS-ing 👋
Top comments (0)