Hydra's nest
We now all know what was once called Hypertext Markup Language (a.k.a HTML) does much more than marking up text :) Currently, it exists at the top level of an ever tangling ecosystem of technologies (frameworks, ES6 etc.)
For me less has always been more so I usually tend to stick to conventional methods until the de novo one is considerably well supported and advantageous.
Back to basics
Last year I had the idea to devise a navigation system for HTML that is somewhat analogous to fish eye zoom. Fish eye zoom is distortion of an image (or a field) with respect to some origin. The projection nature of the distortion can be various (spherical etc.)
using the least amount of css and js specs to make things work
The above summarizes my starting point for this project. I wanted to achieve the fish eye effect with using basic css properties such as left or top. Currently the project uses:
- minimal css transform property (only translate on the main container)
- top/left properties for sub containers
- javascript to track mouse/touch position
So basically the premise is that the system works in legacy browsers as well.
Proof of concept
I thought Gwent cards would be great to showcase the idea. If you don't know, Gwent is a card game within the Witcher 3 Universe. So it is kind of a game in a game :)
The idea is to showcase all the cards in a layout where the user can navigate to different cards via mousemove/touchmove. There are 2 layouts:
One for desktop where there is ample space
Another for mobile where vertical scroll is canceled and cards are swiped only horizontally
The layout of the cards are stored in a JSON file configuration where it can be switched for another one. So when you click on one of the topmost 2 characters, a new JSON file is loaded which triggers removal of the old elements and subsequently adding new elements.
A word about browser repaint & reflows
It is always given as advice to be careful when updating the DOM to watch out for element positioning & properties (whether relative, absolute etc) to minimize redraws. This is usually good advice..
BUT, as html differs from other XML based languages such as SVG, the extra work that the browser does for repaint & reflow can in fact be used to your own advantage. For instance:
<div>
<img style = "height:100%">
</div>
If you were to resize the container div, the width of the image (implicitly set to auto) would readjust to preserve aspect ratio. This is different from SVG where usually the transform attribute is used and has to be calculated by the script.
Throttling to the rescue
If you are rendering expensive to repaint scenes, it is a good idea to cut down the amount of render calls. In this project the functions called during mousemove/touchmove are throttled using window.requesAnimationFrame. This can lead to a fps boots in certain browsers such as ie11.
Also the elements that needs to be re-positioned with respect to pointer is limited to a certain range which reduces the burden on the browser. So when you swipe your fingers or mouse quickly across the screen, some cards will be stuck (due to throttling). This is not a bug, a mouseout event will reset the layout. The limit on the range of elements that needs to get their position recalculated can be adjusted within the script.
Inspiration goes a long way
I am currently using the same idea in a different project. So far the results, seem promising.
It has always amused me that how seemingly unrelated projects can give rise to each other..
Meanwhile you can head over to the project's page and give it a thumbs up: