Introduction
Utilisation de Sitely
Éléments
Comment faire
Un tutoriel vidéo est disponible pour ce sujet Cliquez ici pour le visionner
Dans Sitely, vous pouvez donner vie aux éléments de votre site Web avec des animations. Il existe trois types principaux ::
L'animation unique crée un effet lorsqu'un élément apparaît pour la première fois. Vous avez de nombreux effets à choisir, mais vous ne les verrez pas sur le canevas de Sitely ; vous devrez prévisualiser votre site pour les vérifier.
Lorsqu'un élément entre en vue, l'animation se déclenche. Elle peut commencer soit lorsque l'élément apparaît, soit après un peu plus de défilement. Vous pouvez contrôler la distance que l'élément doit parcourir avant que l'animation ne commence. Si l'élément est déjà à l'écran lorsque la page se charge, l'animation commence immédiatement.
Vous pouvez également contrôler le délai et la durée de l'animation. C'est pratique si vous animez plusieurs éléments et que vous voulez qu'ils commencent à des moments différents pour un effet plus fluide.
Dans l'exemple ici, le texte a été configuré pour s'animer après être arrivé à une position fixe dans la fenêtre du navigateur. Il a été configuré pour répéter l'animation 5 fois avant de s'arrêter. Si vous ne voyez pas le texte animé, faites défiler la page jusqu'à ce qu'il commence, ou augmentez la hauteur de la fenêtre de votre navigateur - il a été configuré pour commencer à 600 px du bas de la fenêtre du navigateur.
Ceci est un exemple de texte animé utilisant l'effet Zoom, couplé à l'option 'Monter subtilement'
Juste un avertissement : trop d'animation peut parfois ennuyer les visiteurs, surtout si cela ressemble à des publicités. Donc, utilisez-la judicieusement et évitez d'en faire trop, surtout avec des animations répétitives. De plus, les animations en haut de la page pourraient faire croire aux gens que la page se charge lentement.
Les animations liées au défilement donnent à votre site Web une sensation dynamique. Vous pouvez jouer avec différents effets comme le défilement vertical et horizontal, la mise à l'échelle, la rotation, le flou et le changement d'opacité.
Chaque effet a une plage de "fenêtre d'affichage", qui contrôle quand l'animation commence et s'arrête lorsque vous faites défiler. Par exemple, un élément commence généralement à bouger lorsqu'il entre dans la fenêtre d'affichage et s'arrête lorsqu'il en sort.
Vous pouvez également choisir où l'animation commence sur l'élément : en haut, au milieu ou en bas. C'est pratique pour les animations près du haut de la page.
Voici un aperçu de quelques effets :
Dans l'exemple ici, nous avons appliqué un effet d'opacité aux différents éléments pour créer un effet de changement de couleur lorsque la page est défilée.
Chaque effet a ses propres paramètres, comme la vitesse pour les effets de défilement et le degré de rotation. Vous pouvez devenir vraiment créatif en combinant les effets et faire en sorte que votre site Web se démarque vraiment !
Dans cet exemple, nous pouvons voir l'effet 'Mouvement vertical' appliqué à quatre boîtes. Au fur et à mesure que la page défile, les boîtes se déplacent vers le haut - révélant un texte caché en dessous. Chaque boîte se déplace sur une distance légèrement différente car elles ont toutes été réglées pour se déplacer à des vitesses différentes - essentiellement, plus la vitesse est rapide, plus l'élément atteint rapidement sa destination à la fin de l'animation.
Un
Pas
À la
Fois
Toutes les animations sont appliquées via le panneau de style à droite de l'écran dans la section intitulée 'Effets de défilement'. Vous y verrez l'option d'appliquer des animations uniques. La sélection de cette option vous présentera un certain nombre d'effets qui peuvent être appliqués. Il suffit de sélectionner un effet de votre choix pour l'appliquer à votre élément sélectionné sur le canevas. Si vous sélectionnez l'option 'Autre', une liste secondaire d'animations apparaîtra, élargissant encore plus vos choix.
Lorsque vous sélectionnez une animation, un certain nombre d'autres options se présentent, vous permettant de choisir différents types de mouvements pour votre animation, la durée de l'animation, un délai avant le début de l'animation, et un certain nombre de répétitions avant que l'animation ne s'arrête. Une dernière option vous permet de définir la distance par rapport au bas de la fenêtre du navigateur que l'élément doit atteindre avant que l'animation ne commence. Clairement, si vous ne définissez pas de décalage, toute l'animation peut commencer et se terminer avant que quiconque ne la voie réellement sur la page.
Les animations de défilement sont appliquées en sélectionnant l'option 'Animer pendant le défilement' dans la section 'Effets de défilement' du panneau de style. Vous y trouverez tous les effets de défilement de base qui peuvent être appliqués aux éléments de votre canevas. Il suffit de sélectionner un effet, puis d'ajuster les paramètres pour obtenir l'effet que vous souhaitez créer.
Vous ajustez les paramètres en cliquant sur l'icône des paramètres à droite du nom de l'effet. Elle ressemble à ceci :
Avant d'aborder les paramètres, nous devrions d'abord discuter brièvement du fonctionnement des animations de défilement.
Faire défiler une page Web consiste essentiellement à déplacer le contenu de la page du bas de la fenêtre du navigateur vers le haut. Par conséquent, toute animation de défilement ne peut commencer que lorsque l'élément animé apparaît en bas de la fenêtre, et ne peut se terminer que lorsqu'il atteint le haut de la fenêtre. Clairement, nous ne voulons pas toujours qu'une animation commence tout en bas d'une fenêtre de navigateur, et nous ne voulons pas toujours attendre qu'elle s'arrête lorsqu'elle atteint le haut de la fenêtre. Par conséquent, Sitely vous permet de définir une fenêtre d'affichage dans laquelle l'action se déroule - pour plus de clarté, nous appellerons cette fenêtre d'affichage une 'Fenêtre d'action'. C'est essentiellement une partie de la fenêtre du navigateur que vous désignez comme étant la zone de l'écran où les choses bougent.
Sitely rend très facile la configuration de cette 'Fenêtre d'action' grâce à une interface de paramètres graphiques simple. Lorsque vous cliquez sur l'icône des paramètres d'un effet, vous verrez une fenêtre contextuelle où les paramètres sont effectués. Sur le côté gauche de la fenêtre contextuelle se trouve une représentation graphique d'un écran d'appareil. À l'intérieur de cet écran se trouvent deux marqueurs. Vous pouvez faire glisser ces marqueurs vers le haut ou vers le bas pour créer votre 'Fenêtre d'action'. Dans cet exemple, les marqueurs ont été réglés à 60% (haut) et 75% (bas). L'espace blanc entre les deux est notre 'Fenêtre d'action' où l'effet a lieu. C'est le réglage qui a été utilisé pour notre exemple de boîtes coulissantes ci-dessus.
Sur la droite de la fenêtre contextuelle se trouvent des paramètres spécifiques à l'effet. Encore une fois, dans cet exemple d'une animation de mouvement vertical, nous avons défini une vitesse de 1,5 fois la vitesse du défilement et nous avons dit à l'animation de commencer lorsque le bas de l'élément animé est à l'intérieur de la 'Fenêtre d'action'. Le résultat final ? Lorsque le bas de l'élément franchit le marqueur de 75%, l'élément commencera son mouvement vertical vers le haut jusqu'à atteindre le marqueur de 60%. À ce moment-là, il s'arrête de bouger. Cela suppose que le point de départ du trajet de l'élément est la position où il a été placé sur le canevas. Mais que se passerait-il si nous voulions qu'il commence son mouvement plus tôt et le termine à sa position sur le canevas ? Pour ce faire, nous cliquerions sur le bouton 'Inverser' pour inverser l'effet. Essentiellement, l'élément commencera en dessous de sa position actuelle sur le canevas et se déplacera vers le haut dans sa position sur le canevas. Le point auquel l'élément commence son trajet est déterminé par le marqueur de zone inférieure.
Chaque effet d'animation aura des paramètres légèrement différents, mais ils suivent tous les mêmes principes généraux. Définissez une 'Fenêtre d'action', puis appliquez des paramètres pour obtenir l'effet désiré. Par exemple, avec les animations horizontales, vous pouvez définir la direction du mouvement. Dans cet exemple, nous avons défini un élément pour qu'il se déplace de sa position sur le canevas vers la droite de l'écran. La rangée inférieure de boutons de direction indique à l'animation la position de départ de l'élément, tandis que les boutons de direction supérieurs indiquent la direction du mouvement.
La chose à noter à propos de l'animation horizontale est que le trajet est illimité - essentiellement, l'élément se déplacera complètement hors du bord de l'écran pendant le temps qu'il faut pour faire défiler la 'Fenêtre d'action'. Donc, plus la 'Fenêtre d'action' est grande, plus il faudra de temps pour que l'animation se termine. Si vous vouliez restreindre le mouvement horizontal pour que l'élément ne sorte pas complètement de l'écran, vous pouvez régler les deux ensembles de boutons de direction sur 'Canevas'. Cela vous permettra de définir une vitesse de défilement, ce qui restreint fondamentalement le mouvement. Cela se traduit par le début de l'animation lorsque l'élément entre dans la 'Fenêtre d'action' et s'arrêtera lorsqu'il en sortira. Si la vitesse de défilement est suffisamment faible (généralement inférieure à 1x), l'animation s'arrêtera avant qu'elle n'ait le temps de sortir du bord de l'écran. Voici un exemple de cet effet. Il utilise une très petite 'Fenêtre d'action' et une faible vitesse. Si la taille de la fenêtre était augmentée, l'élément continuerait de se déplacer vers le bord droit de l'écran jusqu'à ce que le défilement de la page atteigne le haut de la 'Fenêtre d'action'.
L'animation au survol est disponible sur la plupart des éléments de la page, pour ajouter différents types d'effets qui captent l'attention du spectateur.
Les animations peuvent être un grand atout pour votre site Web si elles sont utilisées de manière réfléchie et avec un but. Il existe également de grandes variations dans la manière dont elles peuvent être configurées pour obtenir des effets particuliers - tout est question d'essayer tout et de comprendre ce qui se passe. À bien des égards, c'est un peu comme apprendre à piloter un hélicoptère - poussez le manche dans une certaine direction et regardez ce que fait l'hélicoptère. Si vous voulez qu'il le fasse à nouveau - c'est là que va le manche. Alors, jouez avec les options d'animation et apprenez comment chaque option fonctionne. Avec un peu de pratique, vous deviendrez un maître de l'animation. Vous n'atteindrez peut-être pas les sommets de Walt Disney, mais vous pourrez appliquer de superbes effets à vos pages Web Sitely.
Pour vous aider à démarrer, nous avons créé un fichier de projet Sitely contenant toutes les animations de cette page - vous trouverez le lien ci-dessous. Ouvrez le fichier de projet et sélectionnez les animations. Ensuite, vérifiez les paramètres qui ont été utilisés pour les créer.
Veuillez signaler toute lacune dans cette documentation et nous la corrigerons dès que possible !
Mis à jour pour Sitely 6
Droits d'auteur ©2025 Crinon SRL
Ce site utilise des cookies.
Veuillez consulter notre politique de confidentialité pour en savoir plus.
