Un petit topo sur les performances et l'optimisation des animations CSS. En outre, on y montre comment visualiser tout ça avec les outils de développement.
Une librairie Javascript pour faire des animations au scroll.
Comme dit dans la source, attention à ne pas en abuser, et surtout attention à mettre un timer suffisamment court. Il n'y a rien de plus chiant que les sites sur lesquels il faut attendre 2 secondes à chaque scroll pour que le contenu apparaisse.
Via https://blog.stephaniewalter.fr/semaine-pixels-19-aout-2016/
tl;dr
Un tuto qui a l'air très complet sur le HTML et le CSS. Il y a une version débutant et une version avancée.
Une librairie qui permet de construire des animations CSS purement en JS. C'est assez intéressant dans le sens où ça combine la flexibilité des animations jQuery de la vieille époque avec l'optimisation et la rapidité des animations CSS modernes.
Et comme la fonction attend un objet Javascript, c'est assez facile de définir quelques animations et de les réutiliser.
Le repo Github est ici : https://github.com/juliangarnier/anime
Astuce intéressante (astuces au pluriel en fait, il y a plein de versions différentes) pour forcer un contenu à prendre toute la largeur du viewport même si il est contenu dans un container à taille limitée. Très utile pour les images par exemple.
Pour ma part si je veux faire ça j'utilise un bloc dédié mais ce n'est pas toujours possible quand on utilise un CMS par exemple, et qu'on veut insérer une image dans le texte.
Un article intéressant qui remet en question l'adoption de l'unité "em" ou "rem" partout.
Un système d'indicateur de progression du scroll très ingénieux conçu uniquement en CSS avec l'aide des l'unité vh (viewport height) et de la fonction calc.
Comment créer un mini-système de grid CSS à la main.
Un tuto HTML & CSS assez classieux.
Très pédagogique et plein de bon sens :)
Comment bien utiliser SVG en HTML / CSS.
Un effet glitch très bien foutu à appliquer sur du texte. Et c'est du pur CSS.
Encore une pelleté d'effets pour boutons en CSS.
Et quelques autres effets sympa pour le hover d'un bouton en CSS.
Différentes animations de boutons très originales.
Une courte animation qui explique comment faire un triangle en CSS.
En gros, on utilise la jointure des bordures d'un bloc qui se font en forme de triangle. En réduisant la taille de l'élément à 0px et en faisant disparaître 3 des 4 bordures, on obtient un triangle.
Encore quelques guidelines pour le CSS.
Plein de snippets CSS avec notamment des animations très bien foutues. Rien que le premier est assez bluffant.
Un framework de grille sémantique pour Sass.
Via https://blog.prototypr.io/design-for-programmers-d38c56982cd0
Un effet assez ingénieux et plutôt sympa pour intégrer un avatar à un bloc.