'seraavrei bisogno di ritardare un animazione, ma con animation-delay non funziona. Come visibile su www.mondodellabirra.com, in parole semplici, vorrei che prima si caricasse l'immagine di background e dopo qualche secondo l'animazione. Ho anche provato javascript, ma niente
L'ordine di caricamento non e` facile da modificare.
Pero` puoi modificare, tramite JS, l'ordine di apparizione degli oggetti.
Esempio:Nota: ho inserito il JS e lo stile inline: non e` buona prassi, l'ho fatto solo per scopi didatticicodice:<body onload="document.getElementById('pippo').style.visibility='visible';"> ... <img id="pippo" src="..." alt="..." style="visibility:hidden;" /> ...
NOTA2 (importante): se uno ha JS disabilitato non vedra` mai l'immagine
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Certo, usare il web con java disabilitato è come non usare il web, mi chiedo chi navighi così.
Comunque il metodo da te consigliato preferirei evitarlo, vorrei una soluzione solo CSS. Credi sia possibile?
Nota che io normalmente navigo con Java disabilitato (non mi va che mi si rallenti la navigazione per la pubblicita` interattiva o in movimento).
Invece navigo con Javascript (JS) abilitato, che di solito da` una navigazione migliore.
Pero` JS in qualche browser e` pesante (si succhia un mucchio di tempo macchina), per cui chi ha supporti poco potenti (cellulari di un paio di anni di eta`, certi tipi di tablet, ...) puo` scegliere di disabilitarlo.
Inoltre se la pagina ha necessita` di JS (cioe` non si puo` navigare senza JS abilitato) tale pagina e` non-accessibile, per cui se si tratta di un ente pubblico e` contrario alla legge 4/04, e comunque e` indice di cattiva programmazione.
In linea di massima ci sono dei trucchi per fare in modo che in caso di JS disabilitato/non attivo la pagina sia comunque usabile.
Non sono a conoscenza di sistemi HTML+CSS che fanno partire un'animazione in ritardo.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
se non vuoi usare javascript per il preload delle immagini, coi soli css (e html) puoi creare un div con un display:none che conterrà l'immagine e sarà il primo elemento dopo body. Non è granché come soluzione però...vorrei una soluzione solo CSS
div con un display:none;Originariamente inviata da Prill
Il che` impedisce di visualizzare l'immagine. ... E poi`? Come la fai visualizzare? Ti serve JS per dare il display:block;
... e comunque e` equivalente alla mia soluzione ...
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
non deve cambiare la visibilità del div, fa solo caricare per prima l'immagine di sfondo della pagina, che non sarà visibile nel div ma sarà disponibile per lo sfondo
In teoria, l'immagine background dovrebbe essere proprio la prima cosa a caricarsi, ma non so come mai l'animazione è più veloce. Credevo che un animation-delay risolvesse, ma niente, così come confermo che il div none non fa vedere affatto l'immagine.
Forse la soluzione è un JS minimale?.... tipo $(window).load(function() { //animate things });
Ultima modifica di stardom; 24-02-2014 a 19:34
Eureka! La soluzione nel ritardare l'animazione sta nella regola @keyframes. Chi la conosce sa che bisogna cambiare il valore iniziale e finale in tempi definiti da 0% a 100%, e se volessimo ritardare l'inizio dell'animazione basterà farla partire non a 0 ma ad esempio a 50%. Va anche ricalcolata la durata dell'animazione (la duration, non la delay).
Risolto (il moderatore può inserire [risolto] nel titolo)! Grazie per i tentativi di aiuto .
Ultima modifica di stardom; 25-02-2014 a 23:39
Permessi di invio
Rispondi quotando