Mode d'emploi de cette boîte à outils :
Les exemples ci-dessous sont des exercices réalisés durant les cours afin d'étudier une ou des problématiques graphiques et interactives sur le Web. Tous ces exemples renvoient vers Codepen?, regardez bien comment ils sont fait (en lisant les commentaires dans le code) et servez-vous en pour vos projets ! Cliquez sur les ? à côté de certains mots, cela vous donnera leurs définitions aux travers de divers liens.

Collection : Coder l'animation pour le Web

Le positionnement CSS

#css, #position

Styles graphiques du texte

#css, #style, #texte

Ajouter une image pleine page

#background, #image

Ajouter et/ou enlever une class avec p5.js

#class, #P5js

Agrandir des images avec lightbox?

#lightbox, #zoom, #agrandissement

Un texte positionné aléatoirement

#P5js, #random

Deux sections de défilement

#section, #scroll

Web physics avec matter.js?

#physic, #matterjs, #experience

Créer une grille responsive?

#grille, #responsive, #layout

HTML/CSS/DOM avec P5.js?

#DOM, #P5js, #HTML, #CSS

Exemple de menu responsive

#menu, #navigation, #responsive

Utiliser flexbox? pour une mise en page

#layout, #flexbox, #CSS

Des caractères unicode? en random

#unicode, #typographie, #random, #P5js

Faire des styles sur ses liens?

#CSS, #lien, #links, #typographie

Collection :
Mise en page avec css flexbox

Une grille 3x3 inspirée d'Instagram

#grille, #instagram, #hover

Flouter du texte

#flou, #blur, #CSS, #typographie

Faire une pop-up? en css

#popup, #CSS

Slide horizontal avec la souris

#slider, #mouse

Texte souligné en survol?

#hover, #CSS, #typographie, #liens

Exemple de texte encadré

#cadre, #CSS, #typographie

Utiliser ScrollReveal.js

#js, #loading, #scrollreveal

Faire une page full screen avec P5.js

#p5js, #fullscreen, #js