Incredibly slick launching soon page for ‘ComicKult’ – an upcoming portal for the comic community. The unique One Pager features an impressive comic book cover “tiled waterfall” background. There is so much attention to detail from cover Retina optimization to sign up form button animations. Make sure once signed up to enter in the Konami Code, sit back and be blown away. What an incredible first impression I’m sure the comic community is going to be drooling about. Cheers for the awesome build notes!
Read my interview with the ComicKult team.
Retina grade graphics and mind blowing 60 FPS performance was our target with ComicKult. The biggest challenge being the animated comics background. We ran straight towards HTML5's canvas, salivating over the possibility of hardware acceleration. The solution was blazing, however the quality was balls. There was noticeable degradation of the comic covers even though we were using retina optimised sources.
Forlorn, we shut down canvas and went full crazy DOM. 60 FPS DOM based animation is utter witch craft. You learn intimate details of browser rendering that no man has any business knowing. It is a place of delirious ramblings as you meld requestAnimationFrame with a concoction of acutely targeted CSS properties. We got there, but it would never boss a solution that could tap the GPU fully.
In a hopeless purgatory we were tasked to answer the most bitter of questions: performance or quality? We waded through the depths of every obscure web developer forum out there. 50 times removed from your typical Stack Overflow. Google Groups. We were desperate. 😭
Then, straight out of the beautiful backside of a unicorn: a solution. A cheeky hack to double scale our canvas elements and then rescale them back down.
Performance ✔️ Retina ✔️ Us 🎉