Flipping boxes

animations, cards
3d, css, javascript, oxygen-builder
28.02.2022

+ Descriptif:

Pour ces animations de box en 3D, je me suis inspiré du travail de Supamike (Oxygen4fun), c'est repris par contre avec mon code et ma mise en place. Vous pouvez soit utiliser la souris en survol pour tourner les boxes ou bien utiliser les boutons (non-disponible en mode mobile).

Nous savons tous combien il est important d'avoir un site Web attrayant pour les yeux et facile à utiliser. Mais à quoi servent les animations ? Cette question fait l'objet de nombreux débats. Certaines personnes disent qu'elles sont distrayantes et inutiles. Je suis ici pour vous donner l'autre côté de l'histoire. Je pense que les animations ont une grande valeur qui est souvent négligée. Si vous êtes allé sur un site Web récemment, vous avez probablement remarqué que la plupart d'entre eux ont une sorte d'animation.

Les animations sont devenues très populaires sur les sites Web. L'ajout d'une animation sur un site Web peut lui donner un aspect plus professionnel. Les animations ont de nombreuses fonctions sur un site Web, mais les plus populaires sont les suivantes : - Montrer qu'un message a été envoyé (sur un formulaire de contact) - Montrer qu'un processus (comme le téléchargement d'un fichier) est terminé - Faire ressortir un site Web et/ou le rendre plus visible Les gens utilisent souvent des animations sur leur page d'accueil, mais aussi sur leur page d'informations,

Le but d'une animation est de donner vie au site. Un site Web n'est pas un livre. Il ne raconte pas une histoire. Il s'agit d'une interface utilisateur. Les animations rendent votre site Web plus facile à utiliser, lui donnent plus de profondeur et le rendent plus amusant. Les animations peuvent être utilisées pour montrer un effet. Par exemple, une animation de chargement. Les animations peuvent également être utilisées pour attirer l'attention de l'utilisateur. Si un bouton s'anime, il peut attirer l'attention de l'utilisateur et être vu davantage.

+ Point(s) clé(s):

La difficulté ici est de trouver le bon positionnement de chaque face et de leurs donner les bonnes propriétés comme les transitions. Pour faciliter le changement de taille (comme pour les tablettes et téléphones) des variables ont été utilisées.

Animation

Je peux mettre en place ces animations sur votre site, contactez-moi et parlons-en !