Flat Surface Shader (FSS) animated background is written in JavaScript by Matthew Wagerfield and Tobias van Schneider for rendering lit Triangles to a number of contexts. Basically, this tool takes geometry, light and triangles and turns it into something fun, exciting and beautiful that everyone can use. With this Flat Surface Shader, triangles are rendered into three different contexts (WebGL, Canvas 2D and SVG).
You can see demo from developper here or one funny example of use here Flat Surface Shader Earth
On my side, I render FSS using a Canvas support.You can choose between 7 color presets or you can configure the Canvas yourself.
For Gantry 5, template Hydrogen.
For other templates, unzip the file and do a manual installation
Don't forget to add these 2 lines
@import 'dependencies';
@import 'etl_particle-fss';
in your custom.scss (/templates/g5_hydrogen/custom/scss/custom.scss)
or create this file and insert these 2 lines with the help of your text editor (/templates/g5_hydrogen/custom/scss/custom.scss)
See DemoThe particles in English or in French are technically identical: Only the interface of the particle need to be translated (yalm file). The twig and scss files are similar.
New: french version of particle interface is now include into the package. Install the last version of the particle via Joomla administration.
After install, in your folder "/templates/g5_hydrogen/custom/particles"
rename file "etl_particle-fss.yaml" to "etl_particle-fss_EN.yaml"
rename file "etl_particle-fss_FR.yaml" to "etl_particle-fss.yaml"
Warning: If you use an old french version, you will have 2 versions of this particle after new version installation.
In this case, you have to recreate new version particle.
Before deleting old version particles, manage necessary copy first from old particles into new particules.
Then uninstall old particle version from Joomla (Joomla extension manager usage).
I recommend to reintall again new version just after this deletion process.
The particles in English or in French are technically identical: Only the interface of the particle need to be translated (yalm file). The twig and scss files are similar.
- UNZIP the file on your computer.
- You will find some directories (particles, scss, js, images)
- Copy the directories (including files) to
root/templates/TEMPLATE_DIR/custom/
via your FTP client (like FileZilla)