De l’eau dans les tuyaux
De belles couleurs, un beau design, de l’animation, un test A/B… Ça donne une belle façon de présenter une agence Web, et Si digital l’a bien compris!
Mais en voyant ce site, je me suis questionné : niveau technique, comment peut-on arriver à un tel résultat?
C’est bien « simple » :
- Les tuyaux sont composés de trois parties : le tuyau, l’eau, et la « décoration ».
- Les bouts de tuyaux sont des <div> en positionnement absolu. Chaque bout de tuyau est positionné individuellement puis classé selon son axe (x ou y).
- Chaque bout de tuyau contient également une autre <div>, qui cette fois-ci représente l’eau. Celle-ci est classée selon son axe (x ou y), mais également selon la provenance de l’eau (left, right, top, bottom…)
- Pour ajouter à l’effet « wow », une image d’avant-plan est ajoutée par dessus les bouts de tuyaux (image avec coins ronds, dégradés, etc.)
- Puis finalement, JavaScript s’occupe du reste : les <div> d’eau sont animées successivement.
Tant qu’à y être, pourquoi ne pas en faire un test maison? Évidemment, ce n’est pas aussi sophistiqué (et beau, et optimal…) que la vraie version, mais ça permet de bien comprendre le tout!