J'ouvre cette série d'idées de design et d'animations, glanées ici et là, par une petite carte ouvrante. Á l'intérieur, on trouve une photo et la possibilité d'inclure un autre texte. Sur le survol du bouton, la photo intérieure et le soulignement s'agrandissent.
Cette carte pourrait par exemple faire la présentation de produits pour votre WooCommerce ou tout simplement pour afficher votre équipe. Tout est bien sûr modifiable selon les besoins. J'ai ici effectué les cartes avec le builder appelé Oxygen mais on peut parfaitement reproduire cette animation dans d'autres outils de création de sites.
Les cartes sont utilisées pour présenter les produits, les membres de l'équipe, les services, les points clés, les articles de blog. Ils constituent une nouvelle façon de présenter le contenu et de le rendre plus attrayant pour les téléspectateurs. Ils peuvent être animés ou statiques.
Vous pouvez également les utiliser comme teaser pour votre article de blog ou comme introduction à votre produit.
Les cartes sont généralement animées et elles ont un format vertical long qui est parfait pour les appareils mobiles.
Pour cette animation, le petit "plus" qui la rend plus réaliste je crois est l'addition d'une ombre intérieure de la page. Lorsque la carte s'ouvre l'ombre de la couverture est présente et se réduit progressivement suivant l'angle d'ouverture de la carte, ou tout du moins donne cette impression.
Ces cartes sont principalement faites avec du CSS, j'ai juste rajouté un petit script pour activer les actions du bouton que sont les agrandissements du soulignement et de la photo.
