⚡
✌️
Creare un effetto di fissazione
Il nostro obiettivo è applicare la fissazione a due oggetti in modo che il primo si attacchi immediatamente al centro della pagina, mentre il secondo si blocchi nel momento in cui tocca il primo. Qualcosa del genere:
1
Panoramica delle impostazioni
FISSAZIONE
Imposta l'area di fissazione dell'oggetto. Si riferisce all'area dello schermo (superiore, centrale o inferiore) rispetto alla quale inizia l'effetto di fissazione. Si noti che le forme dell'esempio sono fissate al centro dello schermo.
OFFSET TRIGGER
È il punto di partenza della fissazione dell'oggetto rispetto all'impostazione selezionata: Finestra superiore / Finestra centrale / Finestra inferiore.
DISTANZA
Si riferisce alla distanza in pixel che l'oggetto deve superare in modalità fissa.
Come creare l'effetto
1
Impostazione dei parametri dell'elemento
1. Aggiungete un Zero Block alla pagina dalla libreria dei blocchi e andate alle impostazioni del blocco. Posizionare 2 oggetti nell'area di lavoro, in verticale, uno dopo l'altro.
2. Impostate gli oggetti in modo che abbiano la stessa area di fissazione, nel nostro caso WINDOW CENTER. Entrambi gli oggetti rimarranno fissati al centro dello schermo.
3. È meglio scegliere la dimensione finale di tutti gli elementi e la distanza tra loro in un'unica soluzione. La dimensione di ciascun elemento influisce sui parametri dell'animazione.
Le dimensioni delle forme sono 100x100 px. La distanza tra loro è di 300px. Distanza = Rientro del secondo oggetto - Altezza del primo
Suggerimento: se non si dispone di un obiettivo di dimensione chiaro, utilizzare valori interi o decimali quando si inseriscono le dimensioni e la spaziatura di un elemento per semplificare i calcoli.
2
Impostazione dei parametri di animazione
1. Cominciamo con l'impostare l'offset del trigger / punto di inizio dell'animazione.
Il punto viene contato rispetto all'area scelta, il centro della finestra.
Partiamo dall'oggetto superiore, in quanto in questo modo sarà più facile calcolare i punti di partenza per l'animazione delle forme rimanenti. Il punto di partenza è 0px, il che significa che il primo oggetto si collocherà esattamente al centro dello schermo.
L'oggetto inferiore deve bloccarsi quando tocca l'oggetto superiore. Ciò significa che il suo punto di partenza dell'animazione sarà più basso esattamente dell'altezza del primo oggetto. Impostiamo il rientro a 100px.
Il punto viene contato rispetto all'area scelta, il centro della finestra.
Partiamo dall'oggetto superiore, in quanto in questo modo sarà più facile calcolare i punti di partenza per l'animazione delle forme rimanenti. Il punto di partenza è 0px, il che significa che il primo oggetto si collocherà esattamente al centro dello schermo.
L'oggetto inferiore deve bloccarsi quando tocca l'oggetto superiore. Ciò significa che il suo punto di partenza dell'animazione sarà più basso esattamente dell'altezza del primo oggetto. Impostiamo il rientro a 100px.
2. Impostiamo la distanza.
Questa è la distanza che l'oggetto deve superare in modalità fissa. Regolare le impostazioni dell'animazione partendo dall'oggetto inferiore. In questo modo sarà più facile calcolare la distanza di "incastro".
Questa è la distanza che l'oggetto deve superare in modalità fissa. Regolare le impostazioni dell'animazione partendo dall'oggetto inferiore. In questo modo sarà più facile calcolare la distanza di "incastro".
Quadrato. Se si guarda nuovamente l'esempio, si noterà che il quadrato non copre alcuna distanza in modalità fissa, rimanendo congelato sotto il cerchio. Ciò significa che è necessario impostare la distanza a 0px.
Cerchio. Il cerchio copre la distanza dal quadrato in modalità fissa. L'effetto di fissazione scompare e le due forme continuano a scorrere come di consueto.
In sostanza, il cerchio deve raggiungere la posizione del quadrato e fermarsi più in alto per bloccarsi accanto a esso.
Ciò significa 400px - 100px (altezza del quadrato) = 300px
In sostanza, il cerchio deve raggiungere la posizione del quadrato e fermarsi più in alto per bloccarsi accanto a esso.
Ciò significa 400px - 100px (altezza del quadrato) = 300px
Salvare le impostazioni e pubblicare la pagina. Le modifiche saranno visibili in modalità anteprima o dopo la pubblicazione della pagina.
Questa guida è stata utile per capire come funziona l'effetto adesivo?
