Présenter un poster interactif dans une page Web

28/2/2020 ☼ poster ☼ interactif ☼ animation ☼ p5js

Niveau : ★★★☆☆

Voici l’exemple à étudier sur Codepen. Les commentaires dans le code permettent de suivre les différentes étapes.

1 - Le résultat dans la page

See the Pen Présentation “poster” by Nicolas Tilly (@nicolastilly) on CodePen.

(Le rendu ici est adapté à la taille de la fenêtre de Codepen qui est elle-même intégrée dans cette page. Il est donc plus ramassé dans la largeur.)

Cliquez ici pour voir le projet en pleine page

Pour aller plus loin :

• Continuer la mise en page page texte et interactions avec p5.js (touch, deviceOrientation sur mobile…)
• Exporter des images du poster en téléchargeant des fichiers du navigateur (avec un clic par exemple)
• Prendre en compte le fond de la page (le body) en changeant la couleur ou bien en ajoutant des éléments (textes, images, patterns…)
• Deux références de posters interactifs intéressants conçus avec p5.js :
  • https://p5js.org/showcase/featuring/moon-xin.html
  • https://p5js.org/showcase/featuring/daein-chung.html

2 - Le code

See the Pen Présentation “poster” by Nicolas Tilly (@nicolastilly) on CodePen.