Aller au contenu

Exercice 11 - Animation CSS

Votre équipe doit ajouter des animations dans la page internet d'un client. Il a vu trois animations sur le site d'un concurent et veut absolument que vous les intégriez dans son site. Comme vous êtes le petit nouveau de la boite, les autres développeurs vous donnent le choix de l'animation à développer. Mais commme vous devez encore faire vos preuves, l'équipe vous demande de faire un prototype de l'animation pour qu'ensuite on puisse l'intègrer dans le site.

Consigne

  • Faites votre choix parmi les trois types d'animation désirés
    1. Carte avec animation au survol
    2. Animation sur la bordure
    3. Animation au défilement de la page
  • Consultez les ressources mise à votre disposition et décider de votre animation.
  • Créez ensuite un prototype de l'animation selon les contraintes définies par le chargé de projet.
  • Essayez le plus possible d'utiliser des sélecteurs de classe et d'id pour une meilleure intégration dans le site du client.

Note

  • Assurez-vous de bien comprendre ce que vous faites et de ne pas juste copier-coller le code.
  • Aidez-vous de copilot, demandez lui des explications.
  • Un prototype est un petit projet simple qui démontre la faisabilité de la demande.

Initialisation et remise

  • Créez un dépôt nommé dw_ex11_animation sur Github
  • Clonez le dépôt sur votre portable et réalisez l'exercice
  • Une fois terminé, créez une version de votre exercice (add, commit) et poussez le (push) sur Github.
  • Remettez le devoir Teams avec l'url vers votre dépot.

Intégrité académique

Étant donné que vous allez grandement vous inspirer de code déjà créé, vous devez dans cette exercice citer vos sources.

  • Dans la balise <head> de votre page, ajouter dans une balise <meta name="source"> le lien vers la ressource que vous avez utilisé (si vous avez plusieurs sources, ajoutez une balise ` par source) :
Exemple
<meta name="source" content="Projet inspiré de https://scroll-driven-animations.style/demos/image-reveal/css/">

1. Carte avec animation au survol

Votre client aimerait beaucoup présenter son équipe avec des cartes animées comme celle-ci :

See the Pen Responsive Card Hover Effect by Nikhil (@_niikhil) on CodePen.

Ressources

Contraintes (critères de réalisation)

  • Les cartes ont une dimensions de 300 X 300 pixels.
  • Vous devez aussi créer un conteneur qui va contenir les cartes.
  • On peut ajouter un nombre x de cartes et les cartes supplémentaires qui n'entre pas dans le conteneur seront disposé sur une nouvelle ligne.
  • Le client que la section avec le nom de la personne apparaisse sous l'image et que l'image soit déplacé vers le haut uniquement.
  • Il aimerait aussi que vous ajoutiez sous le poste de la personne une ligne avec deux icônes centrés horizontalement: un icône vers le profile LinkedIn et un autre pour le courriel de la personne.
  • Utilisez l'icône officiel de LinkedIn et un icône représentatif d'un courriel. Les icônes doivent être des fichiers images situés dans votre prototype.
  • Ces icônes doivent diriger l'utilisateur vers l'url # pour LinkedIn et mailto:# pour le courriel.
  • Dans le code démo, on utilise le mot-clé @media. Les développeurs vous mettent au défi de comprendre sont utilisation.
  • Dans votre prototype, insérez une balise <details> avec en <summary> la question "À quoi sert le mot-clé @media" et ajoutez dans vos mots la réponse dans la section détail.

2. Animation sur un bouton

Sur le site du client il y a une section où il présente ses produits avec une image et un lien pour en savoir plus. Il aimerait qu'ont ajoute une animation pour que chaque produit ressemble à ceci:

See the Pen Draw borders from center! by Ben Sheppard (@flatking) on CodePen.

Ressources

Contraintes (critères de réalisation)

  • Remplacez l'image qui ne fonctionne pas dans la démonstration par une image de votre choix. Utilisez la propriété background-size: cover; pour qu'elle remplisse bien le cadre.
  • Changer le texte du bouton pour "Produit #1" et quand on survole le bouton pour "En savoir plus"
  • La couleur du bouton au survol doit avoir une transparence de 75%.
  • Le temps d'animation au survol du bouton doit être de 500 millisecondes.
  • Dans le code démo, on utilise :before et :after. Les développeurs vous mettent au défi de comprendre sont utilisation.
  • Dans votre prototype, insérez une balise <details> avec en <summary> la question "À quoi sert les pseudo-classes before et after" et ajoutez dans vos mots la réponse dans la section détail.

3. Animation au défilement de la page

Notre client veut ajouter dans une page l'historique de sa compagnie. Il aimerait que le texte soit agrémenté d'images et ajouter une animation sur les images.

Attention

Les propriétés pour réaliser une animation au défilement uniquement en css ne sont pas encore disponible sur Firefox (CanIUse). Assurez-vous d'utiliser les navigateurs Edge ou Chrome.

Ressources

Contraintes (critères de réalisation)

  • Votre prototype doit comporter assez de texte pour permettre de voir l'animation sur les images. (Utilisez du Lorem Ipsum)
  • La section de texte avec les images doit avoir une largeur maximale de 800 pixels et être centrée sur dans la page
  • L'alignement du texte doit être justifié
  • Vous devez inclure 3 images différentes à votre prototype. Les images doivent occuper toute la largeur de la section de texte mais ne pas la déborder.
  • L'animation sur les images est la même pour les trois. L'image doit apparaître de la gauche et ce positionner à l'endroit voulu dans le texte.
  • Les images doivent aussi commmencer à une opacité de 0 et "apparaître" jusqu'à avoir une opacité de 100%.
  • Utilisez une balise <figure> pour l'image et citez votre source dans une balise <figcaption>
  • Dans le code démo, on utilise la propriété css animation-timeline. Les développeurs vous mettent au défi de comprendre sont utilisation.
  • Dans votre prototype, insérez une balise <details> avec en <summary> la question "À quoi sert la propriété css animation-timeline?" et ajoutez dans vos mots la réponse dans la section détail.

Pour aller plus loin

C'est totalement optionnel mais voici des liens vers d'autres ressources que j'avais retenues pour cet exercice.

Carte avec animation au survol

Animation sur la bordure (aussi pour les boutons)

Animation au défilement

Théorie

Démonstrations