4 Atmospheric Hero Images

… with discreet CSS animations  


This addon comes with 4 different Gadgets to be used as responsive backgrounds e.g. in a page’s header.
They can be added as Extra Content to a Layout or simply be placed in the content via File Include. The latter method was used right on this page.

Actually this is a byproduct of some of my recent tests to check if subtle CSS animations may contribute to page aesthetics.
Performance and browser support were also part of this study–see some conclusions below.

 

Unfortunately the plugin isn’t yet ready for download, but It will be soon. Stay tuned.
It's also tempting to integrate it into a theme.
 

Photos by GaborfromHungary, Monica Valladares and  mariaamanda0140


 

Backdrop
Foreground
Star Trails Disc
Landscape NightWindow LightLandscape DuskLandscape Day
Backdrop
Backdrop
Foreground

 

Test results/conclusions:


Although the above effects are all rather slow and completely rely on CSS animation, it seems they can get quite demanding in terms of CPU/GPU resources.  While most* modern desktop browsers do a fair job rendering the effects, the situation on mobile devices is a whole different story. 

The results largely depend on the used device, the platform and the browser and range from ‘decent’ to ‘miserable’.  Since some CSS3 animations use hardware acceleated rendering, it seems that this will not always suceed or may even impact performance. Even some beefy devices struggle here while others render everything smoothly and seem totally unimpressed. Some browsers do a better job than others on a particular device but completely fail on another. In general, and unsurprisigly, we see home game winners like Safari on iOS, Edge on Windows phones and Chrome on Nexus devices. 

* Internet Explorer: IE and Edge yet don’t support mix-blend-mode, which is used in the ‘CityLights’ Gadget. So the fake Bokehs don't look pretty there.
IE 11 furthermore seems to screw up background-size inside vw/vh sized containers sometimes.

Conclusion: Currently I wolud not use such contiuous ambient animation effects on websites mainly targeted at mobile users. 
Jerky movements do more harm than good here.