Creare una Fixed Scroll Animation su Webflow

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.

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;

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.

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.

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.

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.

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.

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.

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.

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%;