Coucou,
Dans ce nouvel épisode de Pimp My Site, on va pas voir une, ni deux mais trois techniques pour Pimper son site web.
- La première est le GlassMorphisme (glass effect) et permet de mettre en valeur le contenu d'un block HTML. L'idée est d'avoir un arrière plan transparent et de rendre flou ce qui passe au travers pour donner l'impression que l'élément est en verre.
- La deuxième technique est l'ajout d'SVG animé. J'en ai fait un tutoriel que vous pouvez voir ici https://www.youtube.com/watch?v=lwFwqiGvDQo
Cette fois je vous montre non pas une signature mais comment ça peut venir habiller un site web. (bon je dessine mal alors mon dessin est moche mais vous pouvez faire de belles choses vous !)
- Et la troisième technique est de complètement contrôler les animations de votre site à l'aide de la librairie JavaScript Greensock Animation Platform (GSAP). Vous découvrirez comment créer une timeline et la contrôler pour qu'elle suive le défilement de la page.
Le rendu final
https://www.wawasensei.dev/tutos/pimp-my-site-gsap/
Le code source pour vous entraîner
https://github.com/wass08/pimp-my-site-gsap
Les liens utiles pour GreenSock Animation Platform
https://greensock.com/docs/
https://greensock.com/docs/v3/Installation
https://greensock.com/docs/v3/GSAP/Timeline
