Monstres, Inc.¶
L'objectif de ce devoir est de créer un monstre qui traverse la fenêtre de gauche à droite. Il sera question d'animer chacun de ses membres pendant qu'il se déplace. L'un de ses bras devra saluer l'internaute avec un mouvement de va-et-vient.
Résultat suggéré¶
Consignes¶
Préparation¶
- Créer un dossier « monstre »
- Dans le dossier monstre, faire un
npm init -ypour initialiser le projet - Dans le dossier monstre, faire un
npm i animejspour installer AnimeJS - Dans le dossier monstre, créer un dossier « assets »
- Dans le dossier assets, créer un dossier « img »
- Télécharger le Monster Builder Pack et déplacer le tout dans le dossier img
- Dans le dossier monstre, créer un dossier « src »
- Dans src, créer un dossier « js » et un dossier « css »
- Dans le dossier css, créer un fichier
styles.css - Dans le dossier js, créer un fichier
script.js - Dans le dossier monstre, créer un fichier
index.html, inclure la structure HTML de base et lier les fichiers css et js
- Dans
<body>, ajouter une div qui contiendra toutes les images nécessaires pour créer un monstre (vous n'êtes pas forcé de faire le même monstre que dans le résultat suggéré). Votre monstre doit comprendre minimalement :- 1 corps
- 1 oeil
- 1 bouche
- 2 bras
- 2 jambes
- Appliquer une classe différente sur chaque membre
styles.css¶
- Appliquer une image de fond de votre choix
- Pour les bras et les jambes, déterminer l'origine de leur transformation CSS (articulation)
- Placez les membres de votre monstre en CSS
script.js¶
- Importer la librairie
animated'AnimeJS - Animer les membre et le déplacement du monstre
Remise¶
Date limite : 2 novembre à 23h59
Remise du projet sur Teams
Format : document .zip avec la nomenclature suivante : nomdefamille-prenom-devoir01.zip