Comment ajouter des animations au défilement

Sparkle se concentre grandement sur ce qui pourrait être considéré comme le premier niveau de la conception Web : la conception visuelle statique. L’expérience du visiteur dépend des éléments de conception les plus classiques comme la couleur, le contraste, la police de caractères et l’espace géométrique. Ici, nous allons nous intéresser à la fonction d’animation de Sparkle.

L’utilisation du mot expérience est très spécifique, car tenter d’intégrer des animations peut être à la fois agréable et frustrant (dans l’idéal plus agréable que frustrant). La raison en est que les animations peuvent perturber l’équilibre de la conception bien plus que les éléments statiques. Étant donné la sensation de vie et de mouvement apportée par cette fonctionnalité, vous pouvez vous retrouver avec trop ou trop peu de parties déconnectées qui ne correspondent pas et qui peuvent même nuire à leur environnement.

Mais lorsqu’elles sont bien faites, ces entités à durée de vie limitée donnent une sensation d’interaction naturelle à l’ensemble. La narration est fluide et le contenu de la page devient une invitation chaleureuse à poursuivre l’exploration du site.

Alors jouons.

Voici une création relativement simple sur le thème d’Halloween dont l’objectif est de retransmettre une partie du divertissement et de la folie de cette fête.

Les animations au défilement peuvent être appliquées aux images, aux boutons, aux boîtes de texte et aux éléments vidéo. Vous activez les animations via une case à cocher dans l’onglet Style. Deux menus déroulants s’affichent, l’un pour sélectionner l’animation et l’autre pour choisir la direction et le type de mouvement. Le dernier choix sur le premier menu « Autre » expose une liste d’animations non conventionnelles, qui pourraient fonctionner avec Halloween. Au-dessous du choix du style d’animation se trouvent les contrôles du minutage, de la répétition et les commandes de distance.

Bien que cela soit moins restrictif qu’un design d’entreprise par exemple, nous devons toujours faire attention aux animations que nous choisissons. Nos éléments mobiles : une pierre tombale, un chien fantôme, une décoration de vélo, trois petits fantômes et une citrouille qui semble être tenue par Mercredi Addams.

Après quelques essais, nous avons fait les choix suivants :

  • Un rebond pour la pierre tombale transmet l’idée de poids et d’intimidation (dans le contexte d’Halloween).
  • Une balançoire pour le chien en tant que en référence au balancement de l’auberge décrépie présente dans les traditions d’Halloween s’accorde bien avec la forme verticale de l’image, et le chien est le meilleur endroit pour la mettre, car il est complètement neutre.
  • Rien pour le vélo. Il y a déjà beaucoup d'informations et les yeux peuvent se reposer sur cet élément stable. Élément qui permet de sublimer le mouvement autour de lui. Essayer de percevoir ce qui se passe avec plusieurs éléments mobiles et aucun point de stabilité crée de la confusion et réduit l'aspect divertissant de l'effet.
  • Bande de caoutchouc pour les fantômes. Ils ressemblent à des tâches, et donc l’animation en caoutchouc est parfaite pour eux, ajoutant également à la nature comique de leurs expressions.
  • Et enfin, tada pour la citrouille tenue les mains. Cette animation attire le regard, similaire au style des images qui s’apparente à la fille se préparant à offrir la citrouille au spectateur.

Le résultat final :

Pour ce qui est d’un exemple d’animations plus courantes, la fonction de retard est utilisée dans ce modèle pour créer un thème de découverte et d’exploration linéaire, tout en communiquant les services de la société mise en avant :



Mis à jour pour Sparkle 3.1

In English

Auf Deutsch

In Italiano

S’il vous plait, signalez tout défaut dans la documentation et nous le corrigerons dès que possible !

Sparkle combine une approche tout-en-un, une interface lisible et une volonté absolue de produire des sites Web extrêmement performants et optimisés pour les moteurs de recherche (SEO). 

Tout ça dans une puissante application Mac native. 

Rien ne s’en approche.

Copyright ©2021 River SRL

IT06208340486 — REA FI-609716

Ce site utilise des cookies. Certains sont essentiels au fonctionnement de notre site ; d’autres nous aident à améliorer l’expérience utilisateur et afficher le contenu de tiers. En utilisant ce site, vous acceptez l’envoi de ces cookies par notre site. Lisez notre Politique de confidentialité pour en savoir plus ou refuser.