Mis à jour dans Sparkle 2.8

In English

Auf Deutsch

In Italiano

Comment ajouter des animations au défilement

‍Sparkle se concentre beaucoup 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 d'éléments de conception plus classiques tels que la couleur, le contraste, la police de caractères et l'espace géométrique.Ici, nous allons examiner 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 (avec l’espoir que ce soit un plus agréable que frustrant). La raison en est que les animations peuvent davantage perturber l'équilibre de la conception que les éléments statiques. Étant donné l'illusion de la vie et du mouvement, 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 si cela est bien fait, ces entités à durée de vie limitée donnent l'impression que la conception ressemble davantage à une interaction organique.La narration circule et le contenu de la page devient une invitation chaleureuse qui invite à une exploration plus approfondie.

‍Alors jouons.

‍Ceci est une conception simple à propos de Halloween avec l'intention de capturer une partie de l'amusement et de la folie.

‍Les animations au défilment peuvent être appliquées aux images, aux boutons, aux zones de texte et aux éléments vidéo. Vous activez les animations via une case à cocher dans l'onglet Style. Ceci exposera deux menus déroulants, 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 que, disons, une conception d'entreprise, nous devons toujours faire attention aux animations que nous choisissons.Nos éléments en mouvement: une dalle, un chien fantôme, une décoration de vélo, trois petits fantômes et une citrouille ressemblant à celle de Mercredi Adams.

‍Après quelques essais, nous nous retrouvons avec les choix suivants:

  • ‍• Un rebond pour la pierre tombale applique l'idée de poids et d'intimidation (dans le contexte d'Halloween).
  • ‍• Une balançoire pour le chien en tant que trope classique du signe de 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 complètement neutre.
  • ‍• Rien pour la décoration du vélo. Il y a beaucoup de choses qui circulent et à la fin, avoir un élément stable fournit un lieu de repos pour les yeux et rend le mouvement autour de lui très confortable. Essayer de percevoir ce qui se passe avec plusieurs pièces mobiles et aucun point de stabilité a créé de la confusion et a réduit le divertissement 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. Ça génère un instant "regarde !", similaire au style des images qui s'apparente à la fille se préparant à offrir la citrouille au spectateur..

‍Le résultat final:

‍Comme pour un exemple plus régulier d’animations, dans cette conception, la fonction de retard est utilisée pour créer un thème de découverte et d’exploration linéaire, tout en communiquant les services de la société annoncée:



S'il vous plait, signalez toute lacune dans la documentation et nous la corrigerons dès que possible !

Copyright © 2019 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.