Lo scorrimento parallasse nella versione 7.0

Ultimo aggiornamento 7 luglio 2023

Rivedere le impostazioni di parallax scrolling e suggerimenti per la risoluzione dei problemi.

I modelli della famiglia Brine utilizzano uno speciale effetto visivo sulle immagini di intestazione chiamato scorrimento con parallasse. Lo scorrimento con parallasse prevede un'immagine di sfondo che si muove più lentamente del contenuto in primo piano, creando un'illusione di profondità e immersione.

Suggerimento

Per produrre un effetto di parallax scrolling simile nella versione 7.1, utilizza gli effetti dell'immagine di sfondo.

Ecco un esempio di scorrimento con parallasse nel modello Burke:

parallax_scroll_download.gif

Prima di iniziare

Pagine supportate

Lo scorrimento con parallasse è disponibile sulle pagine che supportano i banner:

  • Pagine indice (immagini di sfondo dietro le sezioni della pagina di layout)
  • Pagine di layout
  • Pagine negozio
  • Pagine eventi
  • Pagine Album
  • Pagine del blog
  • Pagine galleria

Abilitare o disabilitare lo scorrimento con parallasse

Se i banner del tuo sito non mostrano l'effetto con parallasse, attivalo negli Stili del sito della famiglia Brine:

  1. Apri il pannello Stili sito.
  2. Scorri verso il basso fino alla sezione Principale: sovrapposizione.
  3. Seleziona Abilita parallasse.
  4. Potresti anche voler selezionare Ritaglio intelligente Parallax per ridurre al minimo il ritaglio.
  5. Clicca su Salva

Per disabilitare il parallax scrolling per il sito, segui gli stessi passaggi, ma deselezionando Abilita parallasse.

Aggiungere immagini in evidenza

Per creare l'effetto parallasse, aggiungi un'immagine in evidenza alla pagina o sezione:

Se l'effetto parallasse non viene visualizzato, assicurati che sia abilitato.

Aumentare l'effetto

Esistono diversi modi per aumentare l'effetto pergamena con parallasse.

Contenuto misto

Mescolare le immagini a scorrimento di parallasse con contenuti e immagini che non scorrono in parallasse. Il contenuto che si muove più velocemente sembra scorrere sulle immagini con effetto parallasse.

Ad esempio, in un Indice è possibile combinare sezioni di contenuto a scorrimento con parallasse e sezioni di contenuto senza parallasse per l'Indice delle sezioni galleria, oppure con sezioni di contenuto che non presentano immagini di sfondo.

Aggiungi contenuto in sovrapposizione

Un altro modo per migliorare il parallax scrolling è l'aggiunta di testo, pulsanti o altro contenuto all'immagine come sovrapposizione. Questo contenuto scorre alla stessa velocità del resto della pagina, più velocemente dell'immagine. Nella famiglia Brine, è possibile aggiungere questo contenuto con i blocchi:

Aggiungere un filtro colorato

Puoi aggiungere un filtro colore a tutti i banner del tuo sito con Colore in sovrapposizione, nella sezione Principale: sovrapposizione degli Stili del sito.

Ritagliare

Per capire come i ritagli influiscano sulle immagini con parallasse, pensa al sito come a un pezzo di carta con un foro rettangolare. L'immagine con parallasse è un livello separato e disposto sotto, visibile solo attraverso il foro nella carta.

Perché la carta scorra più velocemente dell'immagine, l'immagine deve essere più alta del foro. Lo spazio extra nella parte superiore e inferiore dell'immagine è ciò che viene rivelato quando si sposta la carta.

Per questo motivo, le modifiche al ritaglio e al punto focale potrebbero non avere un impatto notevole sulla posizione dell'immagine con scorrimento con parallasse. Il sito è progettato per garantire che l'immagine abbia margini sui lati in modo che possa far visualizzare l'effetto parallasse.

Suggerimento

seleziona Ritaglio intelligente parallasse negli Stili del sito per ridurre al minimo il ritaglio a sinistra e a destra.

Problemi di scorrimento

Se si verificano problemi di scorrimento quando l'effetto parallax è abilitato, potrebbe essere necessario ridurre le dimensioni della pagina. I browser possono caricare lentamente le pagine con parallax scrolling, soprattutto se le dimensioni complessive della pagina sono pari o superiori a 15 MB. Se lo scorrimento non sembra ancora corretto o se non è possibile ridurre le dimensioni della pagina, considera la possibilità di disabilitare l'effetto parallax

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.

Lo scorrimento parallasse nella versione 7.0