Salut tout le monde, bienvenue.
Dans le passé, nous avons codé ensemble des segments, où j'ai codé,
vous avez codé avec moi, et nous avons fait beaucoup de petites erreurs ensemble.
Aujourd'hui, je veux vraiment faire un examen de code à la place.
Je veux que vous vous asseyez et regardez certains du code que j'ai écrit et
voyez comment les petites choses que nous avons appris
s'additionnent pour créer des pages Web plus complexes.
Commençons donc par un peu de HTML.
Ici, j'ai du code qui va juste créer un tas de divs différents.
La seule chose qui pourrait être nouvelle que vous n'avez pas vu auparavant est cette idée d'
index d'onglets.
Ce que fait l'index d'onglets, c'est qu'il permet au navigateur de savoir que si quelqu'un
parcourt votre page,
vous voulez mettre en évidence différents éléments dans un ordre différent.
Donc, dans ce cas, la première chose serait A, puis C, puis B, etc.
C'est juste un niveau d'accessibilité de plus que je voulais
vous présenter dans notre code.
La seule autre chose que je voulais que vous sachiez dans ce HTML est que la toute dernière div
a une animation de classe dedans.
J' ai rendu celui-ci un peu différent pour que vous puissiez regarder les transitions et les
transformations en action.
Alors, allons de l'avant et regardons le CSS, et jouons avec le navigateur.
Maintenant, quand nous commençons en haut, vous pouvez voir que je viens de composer le div pour
qu'ils soient de petites boîtes où vous pouvez voir le contenu, et
ce n'est pas trop écrasé ensemble.
La seule chose que vous n'avez peut-être pas encore utilisée
vous-même dans votre code est cette idée de transition de deux secondes facilité.
Cela va faire savoir au navigateur que lorsque nous changeons d'états,
nous voulons prendre environ deux secondes et le faciliter.
Mais d'abord, regardons l'accent.
Dans mon accent, je dis changer la couleur de fond.
Alors maintenant, quand je vais à mon navigateur,
je vais commencer à parcourir les différents éléments.
Et quand je le ferai, vous verrez qu'ils s'allument tous.
Je vais rafraîchir la page, parce que celle que je m'attendais à aller en premier ne l'a pas fait.
C' est parce que j'avais fouillé avant même qu'on commence à taper.
Alors on y va.
A change de couleur, puis C, puis B.
C'est vous donnant à l'utilisateur le pouvoir de sauter aux sections les plus importantes d'abord.
Ok, donc après le focus, parlons de vol stationnaire.
Maintenant, quand hover entre en cas, ce que je dis est de faire la largeur 200 pixels,
c'était 100, et de changer la couleur de fond.
Alors jetons un coup d'oeil.
Je vais mettre en évidence sur C juste ici, puis B, et puis A.
Et vous pouvez voir que c'est une très belle transition en douceur.
Mais une des choses que je veux que vous remarquez, c'est que quand je ne survole
rien, nous avons en fait A à F sur la ligne supérieure
, puis G à I en bas.
Lorsque vous commencez à aller un peu trop fou en changeant
dynamiquement la taille des choses, vous pouvez tout jeter hors position.
Alors assurez-vous de l'utiliser avec parcimonie.
D' accord, passons au cool, le dernier.
Si vous vous souvenez, j'ai fait un div, et
je l'ai défini pour être animé parce que j'ai utilisé la classe animée.
En ce moment, la seule différence est que la couleur de fond est un peu verte,
mais je veux vous montrer ce qui se passe quand je survole.
Quand je le ferai, je vais lancer une transformation où je vais dire
tourner à 360 degrés.
Et en outre, au lieu d'avoir une opacité de 0,4, ce qui signifie un peu le flou
, effacez un peu, définissez-le en pleine couleur.
On y va.
Je pense que c'est plutôt cool.
On l'a fait tourner.
Quand nous sortons du vol stationnaire, il tourne en arrière.
Ce sont le genre de choses amusantes que vous pouvez ajouter à votre page lorsque
vous apprenez pour la première fois à coder qui vous donnent vraiment ce sentiment de
, hé, je le fais, je fais les choses changer.
Donc, ce que je vous encourage vraiment à faire maintenant est de revenir en arrière, de revoir la conférence de transition, de
revoir la conférence de transformation, de vérifier et de voir si ces concepts ont
maintenant un peu plus de sens que vous avez vu le code en action.
Et j'espère que vous allez jouer avec ce code, changer les valeurs, et
vraiment vous amuser avec.
Bonne chance.