Dev. FrontEnd#1 : Popin animée

J'ai le plaisir de vous proposer ici une nouvelle série de tutos entièrement dédiés au développement Front-End ! Pour ce premier cours, nous allons réaliser ensemble une popin avec un effet d'apparition (également appelée, selon les cas, toast, snackbar, interstitiel ou overlay)

C'est quoi une popin animée ?

Lorsqu'un utilisateur va cliquer sur un lien ou un bouton, cela fera alors apparaitre une zone, qui viendra recouvrir partiellement (ou en totalité) le contenu de la page. Le tout dans la même fenêtre (c'est d'ailleurs ce qui différencie la popin de la popup). Pour fermer cette popin, qui est apparue en "overlay" de notre contenu (par dessus donc), il nous suffira de cliquer sur un nouveau bouton ou lien.

Pour ce premier tutoriel frontend, nous allons utiliser les langages suivants :

• HTML
• CSS
• JavaScript

Je met à votre disposition l'ensemble des scripts issus de ce tuto dans les fichiers de travail. Je resterai disponible dans le salon d'entraide du cours pour répondre à vos questions éventuelles. Enfin, sachez qu'un QCM est à votre disposition en fin de formation, pour tester vos nouvelles connaissances en frontend !

Bon tuto.