Pour cet exercice, vous devez écrire du CSS afin de recréer l’album "Lift Yr. Skinny Fists Like Antennas to Heaven!" du groupe rock progressif montréalais Godspeed You! Black Emperor.
Aperçu du résultat 👇
Matériel
Dossier de départ
Couleurs 🎨
#111111
#666666
#cc9672
Médias
Bruit
Tranche de 15deg
Main gauche
Main droite
Analysez bien le HTML, vous-y verrez que des variables sont associées à chacunes des slices (tartes du cercle).
Il est INTERDIT de modifier le HTML.
Requis de base
Téléchargez les images et placez-les dans un dossier nommé images.
Le fond doit être un dégradé allant de gris foncé à gris pâle.
L'album doit avoir une dimension verticale et horizontale de 80% du plus petit côté de la fenêtre, être de couleur brune ainsi qu'avoir un ombrage de 10vmin égal de tous les côtés de couleur noire semi-transparente.
Utilisez transform afin de positionner l'album au centre de la fenêtre.
À l'aide du pseudo-élément ::before, ajoutez un layer couvrant la totalité de l'album et utilisant l'image noise.svg comme arrière-plan afin de créer un effet de carton. Appliquez-lui aussi un flou de 0.5px.
Requis cercle
Chaque slice (tartes du cercle) doivent avoir une dimension correspondant à 50% de la hauteur et 13% de la largeur de l'album ainsi qu'avoir le coin supérieur droit placé au centre. Appliquez leurs une couleur de fond afin de bien visualiser.
Les slices doivent utiliser l'image slice.webp comme arrière-plan. Faites-en sorte qu'il prenne tout l'espace disponible sans être rogné.
Utilisez la propriété clip-path afin de transformer chaque slice en triangle rectangle ayant comme angle droit le coin inférieur droit.
Changez leur point d'origine de transformation pour qu'il corresponde au coin supérieur droit de chaque slice.
Appliquez-leurs une rotation de 15deg multiplié par la variable --nb. À ce stade-ci, chaque slice devraient se positionner uniformément afin de créer un cercle.
Vous devriez constater que certaines slices dépassent de l'album. Faites-en sorte de faire disparaître l'exédentaire.
Faites-en sorte que lorsque l'on survole chaque slice, sa saturation change afin d'atteindre 500% de façon linéaire en 0.2 secondes.
Lorsque le survol est terminé, chaque slice doit retrouver une saturation normale (100%) de façon linéaire en 1 secondes afin de créer un effet de trace.
Requis mains
La main gauche doit utiliser hand-left.webp comme arrière-plan et prendre tout l'espace disponible sans être rognée.
Elle doit avoir une dimension correspondant à 28% de la largeur et 32% de la hauteur de l'album ainsi qu'être située à 40% du haut et 16% de la gauche.
La main droite doit utiliser hand-right.webp comme arrière-plan et prendre tout l'espace disponible sans être rognée.
Elle doit avoir une dimension correspondant à 27% de la largeur et 45% de la hauteur de l'album ainsi qu'être située à 40% du haut et 16% de la droite.
Lorsque l'on survole une des mains, sa dimension doit augmenter afin d'atteindre 120% de sa grosseur initiale.
Afin de lisser le mouvement, créez une transition de 0.5 seconde utilisant la formule cubic-bezier(0.14, 1.41, 0.78, 1.17).
Lorsque le survol est terminé, la main doit reprendre son état initial en 0.2 seconde de façon linéaire.
Ambiance
Corrigé
Zip / Godspeed You! Black Emperor - Lift Yr. Skinny Fists
Pen / Godspeed You! Black Emperor - Lift Yr. Skinny Fists
Démo / Godspeed You! Black Emperor - Lift Yr. Skinny Fists