10 Minuti di lettura
-
August 24, 2022

Creare una Fixed Scroll Animation su Webflow

Una Fixed Scroll animation è un’animazione semplice e di impatto. Scopri come costruirne una per il tuo sito web!
Creare una Fixed Scroll Animation con Webflow

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:

Creare la struttura necessaria per creare la Fixed Scroll Animation
  1. Assegna la classe “fixed-scroll” alla sezione impostando le seguenti proprietà:

    • Display: flex;
    • Position: relative;
    Creare la struttura necessaria per creare la Fixed Scroll Animation
  2. Sempre nella sezione che hai creato, aggiungi due div block;

    Creare la struttura necessaria per creare la Fixed Scroll Animation
  3. Al primo div block assegna la classe “column-sx” con la seguente proprietà:

    • Sizing: grow if possible;
    Creare la struttura necessaria per creare la Fixed Scroll Animation
  4. Al secondo div-block assegna la classe “column-dx” con le seguenti proprietà:

    • Sizing: grow if possible;
    • Height: 100vh;
    • Position: sticky;
    • Top: 0.
    Creare la struttura necessaria per creare la Fixed Scroll Animation
    Creare la struttura necessaria per creare la Fixed Scroll Animation

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:

  1. Aggiungi un div block alla colonna;

    Impostare la colonna sinistra della Fixed Scroll Animation
  2. Assegna al div block appena creato la classe “foto” con la seguente proprietà:

    • Height: 100vh;
    Impostare la colonna sinistra della Fixed Scroll Animation
  3. 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;
    Impostare la colonna sinistra della Fixed Scroll Animation
  4. 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 sinistra della Fixed Scroll Animation
    Impostare la colonna sinistra della Fixed Scroll Animation

Impostare la colonna di destra

Per impostare la colonna di destra, in cui apparirà il testo, basta seguire questi passi:

  1. Aggiungi un div block alla colonna;

    Impostare la colonna destra della Fixed Scroll Animation
  2. Assegna al div block creato la classe “text-container” con le seguenti proprietà:

    • Height: 100%;
    • Position: relative;
    Impostare la colonna destra della Fixed Scroll Animation
  3. Aggiungi alla classe “text-container” un div block;

    Impostare la colonna destra della Fixed Scroll Animation
  4. Al div block appena creato assegna la classe “text-content” con queste proprietà:

    • Display: flex;
    • Align: centered;
    • Justify: centered;
    • Position: absolute;
    • Opzione full impostata;
    Impostare la colonna destra della Fixed Scroll Animation
    Impostare la colonna destra della Fixed Scroll Animation
  5. Aggiungi a “text-content” un heading;

    Impostare la colonna destra della Fixed Scroll Animation
  6. Duplica il div “text-content” per un numero pari alle immagini che hai inserito nella colonna di sinistra;

    Impostare la colonna destra della Fixed Scroll Animation
  7. Assegna una combo class a ciascuno dei div block appena aggiunti e imposta per ognuno uno sfondo di colore differente;

    Impostare la colonna destra della Fixed Scroll Animation
    Impostare la colonna destra della Fixed Scroll Animation
    Impostare la colonna destra della Fixed Scroll Animation
  8. Modifica il testo di ogni titolo in “text-content” in modo da mostrare il testo corretto.

    Impostare la colonna destra della Fixed Scroll Animation
    Impostare la colonna destra della Fixed Scroll Animation

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.

Entra in Academy

Unisciti ai 300+ Makers di Ncode Academy. Inizia a creare.

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:

  1. Seleziona la prima immagine;

  2. Vai nella sezione “Interactions”;

  3. Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;

    Inserire la transizione della prima immagine della Fixed Scroll Animation
  4. Seleziona “Start an animation”;

    Inserire la transizione della prima immagine della Fixed Scroll Animation
  5. Aggiungi una nuova animazione e assegnale un nome;

  6. Vai in “Navigator” e seleziona il terzo “text-content”;

  7. Clicca su “+” e poi su “Opacity”;

    Inserire la transizione della prima immagine della Fixed Scroll Animation
  8. Imposta l’opacità su 0%;

  9. Seleziona “Set as initial state”;

    Inserire la transizione della prima immagine della Fixed Scroll Animation
  10. Ripeti le azioni da 7 a 9 anche per il secondo “text-content”;

    Inserire la transizione della prima immagine della Fixed Scroll Animation
  11. Ripeti le azioni da 7 a 9 anche per il secondo “text-content”;

  12. Seleziona il primo “text-content”;

  13. Clicca su “+” e poi su “Opacity”;

  14. Imposta l’opacità su 100%;

  15. Imposta l’easing su “Ease”;

    Inserire la transizione della prima immagine della Fixed Scroll Animation
  16. Salva l’animazione.

2. Inserire la transizione della seconda immagine

Per creare e impostare un’animazione nella seconda immagine basterà seguire queste semplici istruzioni:

  1. Seleziona la seconda immagine;

  2. Vai nella sezione “Interactions”;

  3. Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;

  4. Seleziona “Start an animation”;

  5. Aggiungi una nuova animazione e assegnale un nome;

  6. Vai in “Navigator” e seleziona il secondo “text-content”;

  7. Clicca su “+” e poi su “Opacity”;

  8. Imposta l’opacità su 100%;

  9. Imposta l’easing su “Ease”;

    Inserire la transizione della seconda immagine della Fixed Scroll Animation
  10. Seleziona il terzo“text-content”;

  11. Clicca su “+” e poi su “Opacity”;

  12. Imposta l’opacità su 0%;

  13. Imposta l’easing su “Ease”;

    Inserire la transizione della seconda immagine della Fixed Scroll Animation
  14. Salva l’animazione.

3. Inserire la transizione della terza immagine

Per creare e impostare un’animazione nella terza immagine basterà seguire queste semplici istruzioni:

  1. Seleziona la terza immagine;

  2. Vai nella sezione “Interactions”;

  3. Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;

  4. Vai in “Navigator” e seleziona il terzo “text-content”;

  5. Clicca su “+” e poi su “Opacity”;

  6. Imposta l’opacità su 100%;

  7. Imposta l’easing su “Ease”;

    Inserire la transizione della terza immagine della Fixed Scroll Animation
  8. 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.

Entra in Academy

Unisciti ai 300+ Makers di Ncode Academy. Inizia a creare.

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:

  1. Seleziona la prima immagine;

  2. Vai nella sezione “Interactions”;

  3. Clicca su “Scroll Into View” e poi su “When Scrolled Out of View”;

  4. Seleziona “Start an animation”;

    Inserire la transizione della prima immagine della Fixed Scroll Animation
  5. Aggiungi una nuova animazione e assegnale un nome;

  6. Vai in “Navigator” e seleziona il primo “text-content”;

  7. Clicca su “+” e poi su “Opacity”;

  8. Imposta l’opacità su 0%;

  9. Imposta l’easing su “Ease”;

    Inserire la transizione della prima immagine della Fixed Scroll Animation
  10. 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:

  1. Seleziona la seconda immagine;

  2. Vai nella sezione “Interactions”;

  3. Clicca su “Scroll Into View” e poi su “When Scrolled Out of View”;

  4. Seleziona “Start an animation”;

  5. Aggiungi una nuova animazione e assegnale un nome;

  6. Vai in “Navigator” e seleziona il secondo “text-content”;

  7. Clicca su “+” e poi su “Opacity”;

  8. Imposta l’opacità su 0%;

  9. Imposta l’easing su “Ease”;

    Inserire la transizione della seconda immagine della Fixed Scroll Animation
  10. 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:

  1. Seleziona la terza immagine;

  2. Vai nella sezione “Interactions”;

  3. Clicca su “Scroll Into View” e poi su “When Scrolled Out of View”;

  4. Seleziona “Start an animation”;

  5. Aggiungi una nuova animazione e assegnale un nome;

  6. Vai in “Navigator” e seleziona il terzo “text-content”;

  7. Clicca su “+” e poi su “Opacity”;

  8. Imposta l’opacità su 0%;

  9. Imposta l’easing su “Ease”;

    Inserire la transizione della terza immagine della Fixed Scroll Animation
  10. 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.

Entra in Academy

Unisciti ai 300+ Makers di Ncode Academy. Inizia a creare.

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:

  1. Vai su “Navigator” e seleziona la seconda immagine;

  2. Vai nella sezione “Interactions”;

  3. Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;

  4. Imposta l’offset al 40%;

  5. Clicca su “Scroll Into View” e poi su “When Scrolled Out of View”;

  6. Imposta l’offset a 40%;

    Impostare l’offset sulle immagini della Fixed Scroll Animation
  7. Seleziona la terza immagine;

  8. Vai nella sezione “Interactions”;

  9. Clicca su “Scroll Into View” e poi su “When Scrolled Into View”;

  10. Imposta l’offset al 40%;

    Impostare l’offset sulle immagini della Fixed Scroll Animation

In questo modo, la Fixed Scroll Animation è completa. Andando in modalità “preview” potrai notare che adesso funziona correttamente in ogni sua parte.

Copyright © 2022 Ncode. Tutti i diritti riservati. Privacy PolicyCookie PolicyTermini e condizioni