Configurer les animations

Slidde.co vous permet d'appliquer facilement des animations de trames clés CSS standard à vos éléments web. Voici un guide étape par étape pour vous aider à démarrer.

l'option Animation dans la barre latérale

1. Sélectionnez un élément : Cliquez sur n'importe quel élément de votre page.
2. Ouvrez le modal Animation : Dans la barre latérale droite, cliquez sur le bouton de l'onglet Animations, vous trouverez l'option Animation. Cliquez dessus pour ouvrir une fenêtre modale.
3. Commencez avec des préréglages : Nous vous recommandons de commencer avec des animations préréglées, que vous pourrez ensuite modifier selon vos besoins. Vous pouvez cliquer sur les boutons de préréglage pour remplacer par un préréglage. Si vous cliquez sur l'icône plus dans le bouton, le préréglage sera ajouté à l'animation actuelle.

Personnaliser les animations

Le modal d'animation simplifie le processus de configuration des animations de trames clés CSS dans une interface low-code, la rendant accessible même si vous n'êtes pas familier avec le codage.

Les animations de trames clés sont là où vous définissez les propriétés CSS pour certains pourcentages. Et le navigateur gère la transition pour vous.

Par exemple, si vous avez des trames clés comme ceci avec une durée de 4 secondes.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

L'objet se déplacera de 20px vers le bas pendant 2 secondes, puis remontera de 20px à sa position d'origine pendant 2 secondes.

Si vous rencontrez des problèmes ou souhaitez en savoir plus sur les animations de trames clés :

• Recherchez en ligne : Googlez vos questions spécifiques ; il existe de nombreux exemples et ressources disponibles.
• Tutoriel sur les trames clés CSS : Consultez le guide officiel CSS keyframes sur MDN pour des informations complètes.

Déclencheur

Ce champ contrôle quand l'animation est jouée.

• Élément affiché : C'est l'option par défaut. L'animation sera déclenchée lorsque l'élément est soit défilé dans la vue, soit la section contenant est affichée Section de hachage
• Élément affiché (rejouer à chaque fois) : Identique à ci-dessus, sauf que l'animation sera rejouée chaque fois que l'élément est affiché.
• Page chargée : L'animation sera déclenchée lorsque la page est chargée.

Animer les éléments enfants

Vous pouvez cibler les enfants de l'élément racine en définissant Targets sur &>*.

Décalage échelonné

Si vous changez le délai aux valeurs suivantes, un effet échelonné sera appliqué.

targets: &>*
delay: anime.stagger(100) // augmenter le délai de 100ms pour chaque élément.

targets: &>*
delay: anime.stagger(100, {start: 500}) // le délai commence à 500ms puis augmente de 100ms pour chaque élément.

Pour plus d'exemples, veuillez consulter ici Staggering basics

Échelonnement de texte

Cela fonctionne pour un composant Texte.

Si vous définissez les cibles sur "Toutes les lettres"(& .letter). L'effet échelonné sera appliqué à chaque lettre.

Utiliser la propriété css animation

Une animation css simple est toujours disponible pour tous les éléments dans CSS. Mais vous devrez peut-être activer Disable in canvas pour cette règle css spécifique afin de permettre une édition plus facile dans l'éditeur.