⚡
✌️
Créer un effet de fixation
Notre objectif est d'appliquer la fixation à deux objets de manière à ce que le premier se colle immédiatement au milieu de la page, tandis que le second se fige au moment où il touche le premier. C'est à peu près cela :
1
Aperçu des paramètres
FIXATION
Cette fonction définit la zone de fixation de l'objet. Il s'agit de la zone de l'écran (en haut, au centre ou en bas) par rapport à laquelle l'effet de fixation commence. Notez que les formes de l'exemple sont fixées au centre de l'écran.
OFFSET TRIGGER
Il s'agit du point de départ de la fixation de l'objet par rapport au réglage sélectionné : Haut de la fenêtre / Centre de la fenêtre / Bas de la fenêtre.
DISTANCE
Il s'agit de la distance en pixels que l'objet doit franchir en mode fixe.
Comment créer l'effet
1
Paramétrage des éléments
1. Ajoutez un Zero Block à la page à partir de la bibliothèque de blocs et passez aux paramètres du bloc. Placez deux objets dans l'espace de travail, verticalement, l'un après l'autre.
2. Réglez les objets de manière à ce qu'ils aient la même zone de fixation - dans notre cas, le CENTRE DE LA FENÊTRE. Les deux objets resteront fixés au milieu de l'écran.
3. Il est préférable de choisir la taille finale de tous les éléments et la distance qui les sépare en une seule fois. La taille de chaque élément affectera les paramètres de l'animation.
La taille des formes est de 100x100 px. La distance entre les deux objets est de 300px. Distance = Retrait du deuxième objet - Hauteur du premier objet
Conseil : si vous n'avez pas d'objectif précis en matière de taille, utilisez des valeurs entières ou décimales lorsque vous saisissez la taille et l'espacement d'un élément afin de simplifier vos calculs.
2
Paramétrage de l'animation
1. Commençonspar définir le Trigger offset / Animation start point.
Le point est compté par rapport à la zone choisie, Window Center.
Commencez par l'objet du haut car cela facilitera le calcul des points de départ de l'animation des autres formes. Son point de départ est 0px, ce qui signifie que le premier objet sera collé exactement au centre de l'écran.
L'objet du bas doit se figer lorsqu'il touche l'objet du haut. Cela signifie que le point de départ de son animation sera inférieur d'exactement la hauteur du premier objet. Réglons l'indentation ici à 100px.
Le point est compté par rapport à la zone choisie, Window Center.
Commencez par l'objet du haut car cela facilitera le calcul des points de départ de l'animation des autres formes. Son point de départ est 0px, ce qui signifie que le premier objet sera collé exactement au centre de l'écran.
L'objet du bas doit se figer lorsqu'il touche l'objet du haut. Cela signifie que le point de départ de son animation sera inférieur d'exactement la hauteur du premier objet. Réglons l'indentation ici à 100px.
2. Réglons la distance.
C'est la distance à laquelle l'objet doit passer en mode fixe. Ajustez les paramètres d'animation en commençant par l'objet du bas. Cela facilitera le calcul de la distance de "collage".
C'est la distance à laquelle l'objet doit passer en mode fixe. Ajustez les paramètres d'animation en commençant par l'objet du bas. Cela facilitera le calcul de la distance de "collage".
Le carré. Si vous regardez à nouveau l'exemple, vous remarquerez que le carré ne couvre aucune distance en mode fixe - il reste figé sous le cercle. Cela signifie que nous devons fixer la distance à 0px.
Cercle. Le cercle couvre la distance qui le sépare du carré en mode fixe. L'effet de fixation disparaît ensuite et les deux formes continuent à défiler comme d'habitude.
En fait, le cercle doit atteindre la position du carré et s'arrêter plus haut pour se figer à côté de lui.
Cela signifie 400px - 100px (hauteur du carré) = 300px.
En fait, le cercle doit atteindre la position du carré et s'arrêter plus haut pour se figer à côté de lui.
Cela signifie 400px - 100px (hauteur du carré) = 300px.
Enregistrez les paramètres et publiez la page. Les modifications seront visibles en mode aperçu ou après la publication de la page.
Ce guide vous a-t-il aidé à comprendre le fonctionnement de l'effet collant ?
