Introduction
L'arrière-plan animé "Flat Surface Shader (FSS)" a été écrit en JavaScript par Matthew Wagerfield et Tobias van Schneider pour rendre les Triangles éclairés dans plusieurs contextes. Fondamentalement, cet outil prend la géométrie, la lumière et les triangles et le transforme en quelque chose d'amusant, excitant et beau que tout le monde peut utiliser. Avec ce Shader surface plane, les triangles sont rendus dans trois contextes différents (WebGL, Canvas 2D et SVG).
Vous pouvez voir la démonstration des développeurs ici ou un exemple original d'utilisation ici Flat Surface Shader Earth
De mon côté, je rends l'animation FSS à l'aide d'un support de Canvas. Vous pouvez choisir entre 7 presets de couleurs ou vous pouvez configurer le Canvas vous-même.
Configuration
Options Pricipales - FSS preset
Le plus simple pour vous est de sélectionner les couleurs présélectionnées que j'ai définies.
Important: N'oubliez pas que la couleur des arrière-plans des sections où l'animation doit apparaître doit être transparente (à ajuster au niveau des styles de votre "Outline").
| Option | Description |
|---|---|
| Particle Name | Enter the name you would like to assign to the particle. This only appears in the back end. |
| Configuration preset | Vous pouvez choisir entre 7 couleurs préconfigurées, Vert, Jaune, Orange, Rouge, Bleu, Bleu foncé, Mauve ou Personnalisé votre rendu (utilisez les onglets si vous choisissez Personnalisé) |
| z-index | Define z-index of your canvas, most of case keep preselected z-index (-1) |
| Hauteur | dans certains cas, Fond animé page complète, vous devez corriger la hauteur du Canvas à 100% |
| Classe CSS | Classe CSS de la particule. |
Rendu personnalisé
Je ne vais pas vous expliquer toutes les options disponibles, vous les voyez en direct @ http://matthew.wagerfield.com/flat-surface-shader/
Rendu personnalisé - Configuration maillage (MESH)
Un maillage (MESH) est construit à partir d'un objet Géométric (une collection de triangles) et d'un Objet "Matériel" (2 objets colorés qui définissent les propriétés ambiantes et diffuses d'une surface). Tous les triangles dans la géométrie sont rendus à l'aide des propriétés du l'objet "Matériel".
| Option | Description |
|---|---|
| MESH Couleur ambiante | Utilisez généralement la couleur par défaut #555555 |
| MESH Couleur diffuse | Utilisez généralement la couleur par défaut #ffffff |
| MESH Largeur | Largeur du Triangle |
| MESH Hauteur | Hauteur du Triangle |
| MESH Profondeur | Transparence des triangles |
| MESH Segments | Nombre de triangles à afficher en 1 rangée |
| MESH Slices | Nombre de triangles à afficher en 1 colonne |
| MESH xRange | Largeur des triangles en position X |
| MESH yRange | Largeur des triangles en position Y |
| MESH Vitesse | Vitesse des triangles en mouvements |
Rendu personnalisé - Configuration Lumière (LIGHT)
La lumière (LIGHT) est composée d'une image 3D (Vecteur) et des objets de 2 couleurs définissant ses émissions ambiantes et diffuses. Ces canaux de couleurs interagissent avec le matériel d'un maillage (Mesh) pour calculer la couleur d'un triangle.
| Option | Description |
|---|---|
| LIGHT Couleur ambiante | Couleur de base du canvas |
| LIGHT Couleur diffuse | |
| LIGHT Count (Contrast) | Contrast des couleurs |
| LIGHT zOffset | |
| LIGHT Vitesse |
Exemples
Example 1 - Section Showcase sur page - Mode Personnalisé
Base style background : transparente - rgba(255, 255, 255, 0)
Section Showcase background: transparente - rgba(255, 255, 255, 0)
Main Section Layout : Fullwidth (boxed content)
La Particule est utilisée en section Showcase.
| Option | Valeur |
|---|---|
| Configuration preset | Personnalisé |
| z-index | Defaut (-1) |
| Hauteur | Defaut (none) |
| CSS classes |
Custom render - MESH config
| Option | Value |
|---|---|
| MESH Couleur ambiante | #706868 |
| MESH Couleur diffuse | #ffffff |
| MESH Largeur | 1.2 |
| MESHHauteur | 1.2 |
| MESHProfondeur | 15 |
| MESH Segments | 20 |
| MESH Slices | 25 |
| MESH xRange | 0.8 |
| MESH yRange | 0.4 |
| MESH Vitesse | 0.003 |
Custom render - LIGHT config
| Option | Value |
|---|---|
| LIGHT Couleur ambiante | #f71875 |
| LIGHT Couleur diffuse | #ffffff |
| LIGHT Count (Contrast) | 2 |
| LIGHT zOffset | 350 |
| LIGHT Vitesse | 0.003 |
Example 2 - Section Showcase de la page d'accueil
Base style background : transparente - rgba(255, 255, 255, 0)
Section Showcase background: transparente - rgba(255, 255, 255, 0)
Main Section Layout : Fullwidth (boxed content)
La Particule est utilisée en section Showcase.
| Option | Value |
|---|---|
| Configuration preset | Green - ETL Color |
| z-index | Default (-1) |
| Hauteur | Defaut (none) |
| CSS classes |
Pas besoin d'utiliser les valeurs personnalisées MESH et LIGHT.
Example 3 - Animation FSS page complète
Voir - Template hydrogen Mauve - "Boxed animated"
Base style background : transparente - rgba(255, 255, 255, 0)
Toutes les sections sont avec background transparente - rgba(255, 255, 255, 0) - sauf Navigation and Main
Main Section Layout : Fullwidth (boxed content)
Section Navigation Layout : Boxed
La particule est utilisée en postion top (Nouveau template par défaut pour Hydrogen par En toutes lettres)
| Option | Value |
|---|---|
| Configuration preset | Mauve |
| z-index | Default (-1) |
| Hauteur | Hauteur 100% |
| CSS classes |
Pas besoin d'utiliser les valeurs personnalisées MESH et LIGHT.