On a coder tous les composants en classe pendant le cours de javascript. Puis pour le Burger Menu, le Slider, et le système de Tabs, j’ai rajouté des transitions et animations.
Voici les composants personnalisé:
Burger Menu
Pour Codekit, le but n’était pas de le rendre joli mais qu’il soit fonctionnel. Par contre dans Codekit+, je l’ai personnalisé. Je me suis dis qu’au lieu de venir de la droite, il pourrait venir du bas. J’ai aussi rajouté une image de fond noire.
J’ai changé translateX en translateY pour qu’il vienne du bas.
Slider
Le principe du slider est d’afficher un bloc de contenu avec des images, du texte, etc... Le tout défile vers la droite ou la gauche grâce à des boutons qu’on met en place.
Comme je n’avais pas trop d’idée de comment le personnalisé, j’ai fait une animation du fond derrière le texte.
Le principe est de déplacer le dégradé linéaire avec des @keyframes en CSS.
Système de Tabs
Le principe du système de tabs est de créer des onglets avec dedans des contenus. chaque onglet affiche un contenu spécifique quand on clique dessus.
Pour Codekit+, j’ai ajouté un état hover. Quand on passe avec la souris sur l’onglet, il devient un peu plus grand.
J’ai aussi ajouté un soulignement du titre de l’onglet sur lequel on se trouve.
Github
C’était la première fois que j’utilisais Github. En cours, on nous a montrer comment “commiter” notre code avec Github Desktop pour pouvoir rendre le travail. Je trouvais que l’interface n’est pas très intuitive, et tout le système pour mettre le code sur notre espace Github en ligne était compliqué.
