Implementazione codice personale per animazioni background 
Autor: Gabriele D.Non me ne vogliate male... ma se IoRestoACasa devo pur passare il tempo in qualche modo!!!
Supponiamo di avere una pagina composta da due schede Full Height. Per ogni scheda ho inserito come immagine di background (nello stile righe) 2 immagini sovrapposte... la prima è uno sfondo immagine che resterà statico, la seconda è una parola in formato SVG che occupa il 90% della schermata e che ho voluto animare.
Per implementare l'animazione ho controllato l'ID dell'oggetto a cui fa riferimento l'immagine SVG ed ho quindi aggiunto questo codice CSS:
@keyframes background-zoom-fx {
0% {opacity: 0; transform: scale(7.0);}
100% {opacity: 0.4; transform: scale(1.0);}
}
@keyframes small-pulse-fx {
0% {transform: scale(1.0);}
40% {transform: scale(1.0);}
50% {transform: scale(1.03);}
60% {transform: scale(1.0);}
100% {transform: scale(1.0);}
}
#imPageRowGraphics_1_1 {
opacity: 0.4;
background-size: 90% 90% !important;
background-attachment: fixed;
animation: background-zoom-fx 2s ease-in, small-pulse-fx 5s ease 2s infinite;
}
#imPageRowGraphics_2_1 {
opacity: 0.4;
background-size: 90% 90% !important;
background-attachment: fixed;
animation: background-zoom-fx 4s ease, small-pulse-fx 5s ease 4s infinite;
}
L'animazione viene correttamente implementata... quindi avremo l'immagine sottostante fissa e poi la scritta SVG che appare con effetto zoom e che poi pulsa all'infinito.
Il problema, però, è che le animazioni vengono eseguite istantaneamente su entrambe le schede, quindi anche sulla scheda non visibile. Di conseguenza quando si esegue lo scroll sulla seconda scheda l'animazione iniziale di zoom è già conclusa e resta solo il pulse.
E' possibile far in modo che l'animazione che ho inserito venga avviata solo nel momento in cui la seconda scheda sarà effettivamente visualizzata nel viewport?
Guardando il codice generato nelle pagine, credo di aver capito che WebsiteX5 usa uno script JS per avviare le sue animazioni quando gli oggetti sono effettivamente visibili... ma non ho la più pallida idea se e come si potrebbe sfruttare questa cosa anche nel mio questo caso. E purtroppo non mi sembra sia possibile applicare le animazioni predefinite di WSX5 agli oggetti presenti nel background come ho fatto io.
Ringrazio per l'eventuale aiuto!
Autor
Ok... credo di essere andato troppo sul tecnico!!! :D
In effetti ho tentato varie strade ma non sono riuscito a trovare una soluzione. Comunque questo è il risultato (rimasto irrisolto) a cui ero arrivato: http://www.gabrieledanesi.com/gd-test/
...un gran bel risultato, comunque... bravo !
guarda se questo fa al caso tuo:
https://stackoverflow.com/questions/16325679/activate-css3-animation-when-the-content-scrolls-into-view
Autor
Più che altro il fatto è che con gli stili CSS mi ci sono messo di impegno in quest'ultimo mese e sto iniziando a cavarmela... ma riguardo JS invece sono nel buio più totale!
E poi la cosa che non so quanto possa essere risolvibile è che l'elemento contenitore di background che ho animato (#imPageRowGraphics1_1 e gli altri) è ovviamente inserito all'interno del tag <main>. Io infatti ho solo modificato lo stile di questi contenitori... ma per ottenere l'effetto desiderato credo che bisognerebbe aggiungere una classe a quello specifico <div>... ma non penso sia possibile farlo non potendo appunto inserire codice interno del blocco <main>.
Nel caso invece delle singole celle ho sfruttato un'animazione predefinita di WSX5, che quindi già applica una classe al <div>, e ho modificato direttamente lo stile della classe dell'animazione inserendo un delay. In questo caso infatti tutto funziona correttamente.
Se ho capito bene, prova a dare un'occhiata a QUESTO articolo scritto prima che WS implementasse le animazioni sugli oggetti (versione 12). Nel codice jQuery puoi trovare indicazioni per attivare l'animazione quando srolli la pagina.
Dalla 12 è cambiata la struttura HTML generata, ma non dovresti avere problemi.
Autor
Link molto interessante, ti ringrazio!
Premesso che non sono in grado di comprendere ed utilizzare le funzioni javascript... però analizzando alcune informazioni riportate in quella guida (in particolar modo come assegnare classi ad un ID) e guardando come si comporta WSX5 sul codice generato della mia pagina... ho unito insieme le due cose... e in qualche modo sembrano interagire correttamente!!! In realtà non so bene come... ma comunque funziona!!!
Link: http://www.gabrieledanesi.com/gd-test/
Quello che hai ottenuto è molto bello, qualcosa di simile (non uguale) puoi riuscire a farlo anche con l'oggetto content slider di WX visto che hai la PRO.
Autor
Però in quel caso è comunque un oggetto che va a far parte dell'impaginato... mentre io ho agito sulle immagini di background in modo da avere un'animazione indipendente dal contenuto della pagina.
Giusto, non avevo approfondito il concetto, mi ero basata solo sull'effetto ottenuto