Lever de Soleil

Introduction

Dans ce projet, vous apprendrez à utiliser le CSS pour créer un lever de soleil animé.

Notes pour le leader du club

Introduction:

Dans ce projet, les enfants apprendront à animer une scène simple en utilisant CSS. Ils utiliseront la règle @keyframes en CSS pour animer différentes propriétés d’images et de divisions.

Ressources en ligne

Nous recommandons d’utiliser trinket pour écrire du HTML & CSS en ligne. Ce projet contient les trinkets suivants :

Des enfants peuvent aussi utiliser ce trinket vide (jumpto.cc/html-blank) pour écrire leur propre code HTML & CSS, ou ils peuvent utiliser ce trinket modèle (jumpto.cc/html-template).

Il y a aussi un trinket contenant une solution d’exemple à tous les challenges :

Ressources hors ligne

Ce projet peut être terminé hors ligne si désiré. Vous pouvez accéder aux ressources du projet en cliquant sur le lien ‘Télécharger matériaux du projet’ pour ce projet. Ce lien contient un dossier ‘Ressources du projet’, laquelle inclut des ressources dont les enfants auront besoin pour terminer ce projet en mode hors ligne. Assurez-vous que chaque enfant ait accès à une copie de ces ressources. Ce dossier inclut les fichiers suivants :

  • template/index.html
  • template/prefix.js
  • template/style.css
  • sunrise/index.html
  • sunrise/style.css
  • sunrise/prefixfree.js
  • sunrise/boat.png
  • sunrise/cloud.png
  • sunrise/helicopter.png
  • sunrise/rainbow.png
  • sunrise/sun.png

Vous pouvez aussi trouver une version terminée des challenges de ce projet dans la section ‘Ressources bénévoles’, qui contient :

  • sunrise-finished/index.html
  • sunrise-finished/style.css
  • sunrise-finished/prefixfree.js
  • sunrise-finished/boat.png
  • sunrise-finished/sun.png
  • sunrise-finished/rainbow.png

Objectifs d’apprentissage

  • Stylisation et animation avec CSS :
    • Introduction de la règle @keyframes pour définir des étapes dans une animation.
    • Renforcement de l’utilisation des propriétés pour définir la taille, la forme, la position et la coupe des éléments d’une page Web.

Ce projet couvre des éléments des composantes suivantes de Raspberry Pi Digital Making Curriculum:

Challenges

  • “Animation diagonale” - modification de l’animation des propriétés @keyframe à utiliser à gauche :;
  • “Améliorer le ciel” - ajouter plus d’images clés et paramétrage de l’arrière-plan:.
  • “Plus d’animations” - animer plus d’images ou d’éléments en utilisant différentes propriétés CSS.

Questions fréquemment posées

  • Ce projet utilise la bibliothèque javascript prefixfree.js pour permettre une compatibilité des animations entre les navigateurs. Si cette bibliothèque n’est pas utilisée, alors les enfants utilisant des anciens navigateurs devront déclarer une animation pour leur navigateur, par exemple :


Créer le soleil

Commençons en ajoutant une image pour le soleil et en le positionnant avec un peu de CSS.

  • Ouvrez ce trinket : jumpto.cc/web-sunrise.

    Le projet doit ressembler à ça :

  • Regardez à l’intérieur du body de votre fichier index.html et vous trouverez les éléments de div pour le ciel et la mer.

  • Une image pour le soleil est déjà incluse dans votre projet.

    Ajoutez l’image à l’intérieur de la div soleil en incluant un id pour pouvoir y appliquer un style :

  • Whoa, l’image est grande. Allez dans style.css et ajoutez le CSS pour régler la hauteur de l’image :

    Notez que la largeur est mise à jour automatiquement pour garder les mêmes proportions.

  • Enfin, ajoutons un peu de code pour positionner le soleil :


Animer le lever de soleil

Pour animer votre lever de soleil, vous devez définir comment le soleil bouge et combien il met de temps à se lever.

Pour ce faire, vous devez définir une liste images clés. Chaque image clé définit les propriétés CSS d’un élément à un point spécifique de l’animation.

  • D’abord, vous devez utiliser @keyframes pour créer une nouvelle animation appelée lever de soleil.

    Ajoutez ce code CSS à la fin de votre fichier style.css :

    Ce code indique au soleil où se positionner au début (0%) et à la fin (100%)de l’animation.

    Puisque le soleil est à l’intérieur de la div ciel, les positions top et left que vous donnez sont comprises dans le ciel, avec top : 100% étant le bas du ciel, et non le bas de la page Web.

  • Maintenant que vous avez créé une animation sunrise, vous devez simplement dire à votre soleil de l’utiliser !

    Ajoutez le code en surbrillance au CSS de votre soleil :

    Il indique à votre soleil de passer 10 secondes à animer un lever de soleil.

  • Pour lancer l’animation à nouveau dans Trinket, cliquez simplement sur Autorun.

Défi : Animation diagonale

Pouvez-vous ajouter du code à votre animation sunrise pour que votre soleil commence en bas à gauche du ciel et se déplace en diagonale par rapport à sa position pour se retrouver centré au sommet ?

Vous pouvez utiliser la propriété left pour le faire, par exemple :


Animation infinie

Faisons en sorte que l’animation se répète à l’infini.

  • Si vous voulez que le soleil se lève puis se couche, ajoutez plus d’images clés à votre animation :

    Cela signifie que l’animation commence et se termine avec le soleil au bas du ciel, et qu’il reste au sommet de 33 % à 66 % de l’animation.

  • Maintenant, vous devez simplement ajouter le mot infinite à l’animation #sun pour qu’elle tourne en boucle à l’infini :

  • Testez votre animation. Le soleil se lève-t-il et se couche-t-il en boucle ?

Animer le ciel

L’animation n’est pas que pour les mouvements. Animons le ciel pour qu’il soit sombre la nuit.

  • Ajoutez une animation appelée sky à votre CSS :

    Remarquez que cette fois vous animez la couleur du ciel, et non pas une position.

  • Ajoutez du code à votre ciel pour lui dire d’utiliser votre nouvelle animation :

  • Cliquez sur Autorun pour tester votre animation.

Défi : Améliorer le ciel

Pouvez-vous changer l’animation du ciel pour qu’il soit en phase avec le soleil, qu’il reste bleu durant la journée et qu’il devienne sombre lorsque le soleil se couche ? Faites en sorte qu’il s’agisse d’une boucle.


Défi : Plus d’animations

Pouvez-vous animer une autre image ? Vous pouvez animer la position, la couleur, la forme, la taille, l’opacité (seethroughness) ou tout ce à quoi vous pouvez penser. Essayez également de changer la durée de vos animations.

Pour chaque objet que vous souhaitez animer, il vous faudra :

  • L’inclure dans votre HTML avec un id
  • Créer une règle @keyframes
  • Utiliser animation: dans le style pour utiliser l’animation que vous avez définie avec @keyframes

Cliquez sur l’icône image pour voir les images qui sont incluses dans le projet :

Vous pouvez aussi mettre en ligne vos propres images si vous le souhaitez.

N’oubliez pas de placer les objets dans la mer ainsi que dans le ciel :

Dans l’exemple, l’arc-en-ciel utilise l’opacité pour obtenir un effet d’atténuation :

Le bateau utilise une position de départ négative pour que vous ne puissiez pas le voir pendant une partie de l’animation :

Produit ajouté avec succès à la comparaison des produits