.svg)
.png)
Ti piacerebbe personalizzare il tuo sito web costruito con Webflow con un’animazione semplice ma di impatto? In questo articolo ti spieghiamo come creare una Fixed Scroll Animation, un’animazione particolarmente avanzata che non richiede alcun tipo di codice e si può realizzare in maniera completamente gratuita.
Creare la struttura necessaria per creare la Fixed Scroll Animation
Prima di iniziare a creare la Fixed Scroll Animation è necessario creare la struttura sulla quale applicare classi e animazioni.
La prima cosa da fare, quindi, è aggiungere alla pagina del tuo sito web in Webflow la sezione all’interno della quale vuoi implementare la Fixed Scroll Animation. Dopodiché ti basterà seguire i seguenti passaggi per impostare la sezione:
-
Assegna la classe “fixed-scroll” alla sezione impostando le seguenti proprietà:
- Display: flex;
- Position: relative;
-
Sempre nella sezione che hai creato, aggiungi due div block;
-
Al primo div block assegna la classe “column-sx” con la seguente proprietà:
- Sizing: grow if possible;
-
Al secondo div-block assegna la classe “column-dx” con le seguenti proprietà:
- Sizing: grow if possible;
- Height: 100vh;
- Position: sticky;
- Top: 0.
Adesso che hai impostato la sezione nella quale verrà implementata la Fixed Scroll Animation, bisogna impostare le colonne di sinistra e di destra.
Impostare la colonna di sinistra
Per impostare la colonna di sinistra, in cui appariranno le foto, basta seguire questi passi:
-
Aggiungi un div block alla colonna;
-
Assegna al div block appena creato la classe “foto” con la seguente proprietà:
- Height: 100vh;
-
Duplica il div block per il numero delle immagini che vuoi inserire nella tua Fixed Scroll Animation (nel caso di questo tutorial 2 volte per poter inserire 3 immagini)
- Sizing: grow if possible;
-
Assegna una combo class a ciascuno dei div block appena aggiunti e imposta per ognuno una diversa immagine di sfondo (in Image & gradients) con le seguenti proprietà:
- Size: cover;
- Position: center;
- Tile: not repeat;
- Fixed: not fixed;
Impostare la colonna di destra
Per impostare la colonna di destra, in cui apparirà il testo, basta seguire questi passi:
-
Aggiungi un div block alla colonna;
-
Assegna al div block creato la classe “text-container” con le seguenti proprietà:
- Height: 100%;
- Position: relative;
-
Aggiungi alla classe “text-container” un div block;
-
Al div block appena creato assegna la classe “text-content” con queste proprietà:
- Display: flex;
- Align: centered;
- Justify: centered;
- Position: absolute;
- Opzione full impostata;
-
Aggiungi a “text-content” un heading;
-
Duplica il div “text-content” per un numero pari alle immagini che hai inserito nella colonna di sinistra;
-
Assegna una combo class a ciascuno dei div block appena aggiunti e imposta per ognuno uno sfondo di colore differente;
-
Modifica il testo di ogni titolo in “text-content” in modo da mostrare il testo corretto.
Dopo aver eseguito tutti questi passaggi, aprendo la modalità preview potrai notare che lo sticky sulla colonna di destra funziona ma che si vede solamente il testo inserito nell’ultimo div block “text-content”. Perché succede? Perché dobbiamo ancora inserire le animazioni.
Creare le animazioni della Fixed Scroll Animation
Per risolvere il problema che si è creato inserendo tutti gli elementi necessari per creare la Fixed Scroll Animation è necessario creare delle animazioni.
Inserire le transizioni dall’alto al basso
Come prima cosa, bisogna inserire le transizioni che si attiveranno scorrendo la pagina dall’altro verso il basso.
1. Inserire la transizione della prima immagine
Per creare e impostare un’animazione nella prima immagine basterà seguire queste semplici istruzioni:
-
Seleziona la prima immagine;
-
Vai nella sezione “Interactions”;
-
Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;
-
Seleziona “Start an animation”;
-
Aggiungi una nuova animazione e assegnale un nome;
-
Vai in “Navigator” e seleziona il terzo “text-content”;
-
Clicca su “+” e poi su “Opacity”;
-
Imposta l’opacità su 0%;
-
Seleziona “Set as initial state”;
-
Ripeti le azioni da 7 a 9 anche per il secondo “text-content”;
-
Ripeti le azioni da 7 a 9 anche per il secondo “text-content”;
-
Seleziona il primo “text-content”;
-
Clicca su “+” e poi su “Opacity”;
-
Imposta l’opacità su 100%;
-
Imposta l’easing su “Ease”;
-
Salva l’animazione.
2. Inserire la transizione della seconda immagine
Per creare e impostare un’animazione nella seconda immagine basterà seguire queste semplici istruzioni:
-
Seleziona la seconda immagine;
-
Vai nella sezione “Interactions”;
-
Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;
-
Seleziona “Start an animation”;
-
Aggiungi una nuova animazione e assegnale un nome;
-
Vai in “Navigator” e seleziona il secondo “text-content”;
-
Clicca su “+” e poi su “Opacity”;
-
Imposta l’opacità su 100%;
-
Imposta l’easing su “Ease”;
-
Seleziona il terzo“text-content”;
-
Clicca su “+” e poi su “Opacity”;
-
Imposta l’opacità su 0%;
-
Imposta l’easing su “Ease”;
-
Salva l’animazione.
3. Inserire la transizione della terza immagine
Per creare e impostare un’animazione nella terza immagine basterà seguire queste semplici istruzioni:
-
Seleziona la terza immagine;
-
Vai nella sezione “Interactions”;
-
Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;
-
Vai in “Navigator” e seleziona il terzo “text-content”;
-
Clicca su “+” e poi su “Opacity”;
-
Imposta l’opacità su 100%;
-
Imposta l’easing su “Ease”;
-
Salva l’animazione.
Andando in modalità preview, potrai notare che le transizioni funzionano scorrendo dall’alto al basso. Tuttavia, facendo scrolling dal basso verso l’alto la Fixed Scroll Animation ancora non funziona. Come si può sistemare? Aggiungendo delle altre transizioni.
Inserire le transizioni dal basso verso l’alto
Per risolvere il problema e far sì che immagini e testo cambino correttamente anche scorrendo la pagina dal basso verso l’alto, dobbiamo inserire delle altre animazioni.
1. Inserire la transizione della prima immagine
Per creare e impostare questa seconda animazione nella prima immagine basterà seguire queste semplici istruzioni:
-
Seleziona la prima immagine;
-
Vai nella sezione “Interactions”;
-
Clicca su “Scroll Into View” e poi su “When Scrolled Out of View”;
-
Seleziona “Start an animation”;
-
Aggiungi una nuova animazione e assegnale un nome;
-
Vai in “Navigator” e seleziona il primo “text-content”;
-
Clicca su “+” e poi su “Opacity”;
-
Imposta l’opacità su 0%;
-
Imposta l’easing su “Ease”;
-
Salva l’animazione.
2. Inserire la transizione della seconda immagine
Per creare e impostare questa seconda animazione nella seconda immagine basterà seguire queste semplici istruzioni:
-
Seleziona la seconda immagine;
-
Vai nella sezione “Interactions”;
-
Clicca su “Scroll Into View” e poi su “When Scrolled Out of View”;
-
Seleziona “Start an animation”;
-
Aggiungi una nuova animazione e assegnale un nome;
-
Vai in “Navigator” e seleziona il secondo “text-content”;
-
Clicca su “+” e poi su “Opacity”;
-
Imposta l’opacità su 0%;
-
Imposta l’easing su “Ease”;
-
Salva l’animazione.
3. Inserire la transizione della terza immagine
Per creare e impostare questa seconda animazione nella terza immagine basterà seguire queste semplici istruzioni:
-
Seleziona la terza immagine;
-
Vai nella sezione “Interactions”;
-
Clicca su “Scroll Into View” e poi su “When Scrolled Out of View”;
-
Seleziona “Start an animation”;
-
Aggiungi una nuova animazione e assegnale un nome;
-
Vai in “Navigator” e seleziona il terzo “text-content”;
-
Clicca su “+” e poi su “Opacity”;
-
Imposta l’opacità su 0%;
-
Imposta l’easing su “Ease”;
-
Salva l’animazione.
Dopo aver aggiunto anche queste transizioni, finalmente le animazioni funzionano correttamente. Rimane, però, un problema. La transizione, infatti, avviene esattamente quando si inizia a vedere una nuova immagine sia all’andata che al ritorno e questo fa sì che il testo non sia coerente con le immagini inserite. Come sistemarlo? Impostando l’offset.
Impostare l’offset sulle immagini
L’ultimo passaggio da seguire per creare una Fixed Scroll Animation funzionale è impostare l’offset sulle immagini. Per farlo ti basterà seguire queste indicazioni:
-
Vai su “Navigator” e seleziona la seconda immagine;
-
Vai nella sezione “Interactions”;
-
Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;
-
Imposta l’offset al 40%;
-
Clicca su “Scroll Into View” e poi su “When Scrolled Out of View”;
-
Imposta l’offset a 40%;
-
Seleziona la terza immagine;
-
Vai nella sezione “Interactions”;
-
Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;
-
Imposta l’offset al 40%;
In questo modo, la Fixed Scroll Animation è completa. Andando in modalità “preview” potrai notare che adesso funziona correttamente in ogni sua parte.
.svg)
.svg)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.svg)