Immagini di sfondo a rotazione (con effetto dissolvenza).

Printable View

25-04-2016, 09.31.04
SchoolCommunity

Immagini di sfondo a rotazione (con effetto dissolvenza).

Vorrei creare uno sfondo che dopo "tot" secondi cambi immagine di sfondo. Premetto che vorrei usare solamente Javascript e css.
Per ora ho realizzato il seguente script che alterna le immagini di sfondo:

Codice:

<script language="Javascript"> n=0; function cambia() { n=n+1; switch(n) { case 1: document.body.style.background="url('sfondi/a.jpg') no-repeat fixed"; break; case 2: document.body.style.background="url('sfondi/b.jpg') no-repeat fixed"; break; case 3: document.body.style.background="url('sfondi/c.jpg') no-repeat fixed "; break; case 4: document.body.style.background="url('sfondi/d.jpg' ) no-repeat fixed"; break; case 5: document.body.style.background="url('sfondi/e.jpg') no-repeat fixed "; n=0; break; } document.body.style.backgroundSize = "100% 100%"; //alert("xiao"); //document.body.style.background="url('sfondi/bm.png')"; } setInterval('cambia()',5000); </script>

(Ovviamente con css inizialmente vi è uno sfondo predefinito).
In questo modo però le immagini di sfondo cambiano in modo istantaneo, mentre io vorrei creare un effetto dissolvenza, per esempio un entrata da destra a sinistra, più lenta, e con una leggera opacità all'inizio per poi renderla normale.
Come potrei fare?
Grazie mille in anticipo per la collaborazione.
26-04-2016, 14.12.23
karl94

http://stackoverflow.com/questions/2...le-page-design
29-04-2016, 00.17.09
SchoolCommunity

È possibile ottenere il medesimo risultato utilizzando javascript (comandando il cambio immagine ogni tot secondi - fatto con il codice iniziale soprastante e comandando da javascript il css in modo da creare l'effetto)? Poiché l'obiettivo sarebbe quello di associare al cambio immagine anche un cambio di scritta sopra ad essa.
29-04-2016, 18.41.18
karl94

Potresti inserire la scritta direttamente all'interno del div di ogni immagine.
29-04-2016, 19.16.40
SchoolCommunity

E' vero, però lo stile dato allo sfondo va a determinare lo stile del testo. Inoltre, non è molto versatile perchè se volessi fare un pulsante che tramite il javascript procede all'immagine successiva non è possibile.
29-04-2016, 19.21.55
karl94

Allora vuoi una slideshow? Se cerchi un attimo in rete trovi migliaia di esempi pronti.
29-04-2016, 19.43.49
SchoolCommunity

Esatto che però mi faccia da sfondo.
29-04-2016, 23.26.54
SchoolCommunity

Ho provato a seguire tale guida : http://www.w3schools.com/w3css/tryit...slideshow_self , facendo qualche modifica applicando il codice alle mie necessità (abitudini).
Il problema sta nel fatto che, la lunghezza del vettore risulta essere 0 (quando in realtà vi sono 5 img con quella classe.). Perciò all'inizio non carica nessun immagine.

Codice:

var immagini=document.getElementsByClassName("immagini"); alert("Lunghezza vettore= "+immagini.length);

Codice HTML:

<html> <head> <style type="text/css"> .immagini { display:none; width:300px; height:300px; } </style> <script language="Javascript"> var immagine=0; var n=0; mostra(immagine); function incrementa_imm(n) { immagine=immagine+n; mostra(immagine); } function mostra(immagine) { var immagini=document.getElementsByClassName("immagini"); alert("Lunghezza vettore= "+immagini.length); alert(n); if(n>=immagini.length) immagine=0; if(n<0) immagine=immagini.length; for(k=0;k<immagini.length;k++) { immagini[k].style.display = "none"; } immagini[immagine].style.display = "block"; } </script> <title>Home-page</title> </head> <body> <input type=button value="dietro..<" onclick="incrementa_imm(-1)"> <input type=button value="avanti..>" onclick="incrementa_imm(+1)"> <div class="sfondo" id="sfondo" style="top:10%;"> <img class="immagini" src="sfondi/l.jpg"> <img class="immagini" src="sfondi/p.jpg"> <img class="immagini" src="sfondi/f.jpg"> <img class="immagini" src="sfondi/b.jpg"> <img class="immagini" src="sfondi/i.jpg"> </div> </body> </html>

Grazie mille per la collaborazione. Gentilissimi.
30-04-2016, 16.52.56
karl94

Solo al momento della prima chiamata alla funzione mostra si verificherà il "problema" che hai indicato, quando operi con i pulsanti però no. Questo accade perché al momento in cui lo script JavaScript viene eseguito, il browser non ha ancora caricato il resto della pagina.
O sposto l'elemento script dopo gli elementi su cui opera, oppure inserisci tutto il codice all'interno di una funzione di inizializzazione che verrà richiamata all'evento DOMContentLoaded. Nota comunque che l'attributo language per l'elemento script è deprecato dal secolo scorso, e faresti bene ad includere una dichiarazione di DOCTYPE.
04-05-2016, 18.45.09
SchoolCommunity

Grazie mille per la collaborazione karl94. Alla fine il codice migliore era ancora quello che mi hai postato tu all'inzio. Non ho ancora capito una cosa però: come fa a non visualizzare gli elementi ("immagini") quando non sono necessari (non tocca a loro)?
Cordiali saluti.
05-05-2016, 01.16.32
karl94

Usa la proprietà CSS opacity, assieme alle CSS3 animations.
05-05-2016, 15.05.00
SchoolCommunity

Si ma tutte le immagini sono in html, dovrebbero vedersi inizialmente, dopo di chè accede alla singola immagine ed ad ognuna, ogni tot secondi fa partire l'animazione. Come fa all'inizio??
Infatti, io ho provato oltre a far ruotare lo sfondo (volevo far cambiare anche una scritta, abbinata alla foto) un testo con la stessa modalità copiando pari-pari il codice.

Codice HTML:

<div id="footer" > <div class="testo" id="cit1">"L'unico vero viaggio verso la scoperta non consiste nella ricerca di nuovi paesaggi, ma nell'avere nuovi occhi."<br>Marcel Proust</div> <div class="testo" id="cit2">"Da qualche parte, qualcosa di incredibile e' in attesa di essere scoperto."<br>Carl Sagan</div> <div class="testo" id="cit3">"Se non scali la montagna non ti potrai mai godere il paesaggio."<br>Pablo Neruda</div> <div class="testo" id="cit4">"La piu' bella e profonda emozione che possiamo provare e' il senso del mistero; sta qui il seme di ogni arte, di ogni vera scienza."<br>Albert Einstein</div> <div class="testo" id="cit5">"L'unico modo di fare un ottimo lavoro e' amare quello che fai. [...] Sii affamato. Sii folle."<br>Steve Jobs</div> </div>

Mentre ne CSS:

Codice:

#footer { height: 69px; width: 100%; border-top-style:solid; position: absolute; bottom: 0%; left:0%; background-image: url(sfondo.png); //è solamente lo sfondo di questa porzione di pagina : footer background-repeat: repeat-x; border-top-width: 1px; border-top-color: #FFF; display:table; } #footer .testo { line-height:1.4; letter-spacing:1px; text-align:center; display: table-cell; vertical-align:middle; font-weight:bold; font-style:italic; } @keyframes cit_FadeInOut { 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes cit_FadeInOut { 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; } } #footer div:nth-of-type(1) { animation-delay: 80s; -webkit-animation-delay: 80s; } #footer div:nth-of-type(2) { animation-delay: 60s; -webkit-animation-delay: 60s; } #footer div:nth-of-type(3) { animation-delay: 40s; -webkit-animation-delay: 40s; } #footer div:nth-of-type(4) { animation-delay: 20s; -webkit-animation-delay: 20s; } #footer div:nth-of-type(5) { animation-delay: 0; -webkit-animation-delay: 0; } #footer div { animation-name:cit_FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 100s; -webkit-animation-name: cit_FadeInOut; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 100s; }

Eppure, inizialmente visualizza tutte e cinque le scritte, successivamente ogni 20 sec inizia con dissolvenza a toglierne una..e così via.
Non capisco perchè.
06-05-2016, 02.18.55
karl94

Citazione:

Originalmente inviato da SchoolCommunity

Eppure, inizialmente visualizza tutte e cinque le scritte, successivamente ogni 20 sec inizia con dissolvenza a toglierne una..e così via.
Non capisco perchè.

Succede anche con le immagini, ma non te ne accorgi perché hanno la medesima dimensione, sono sovrapposte e non hanno trasparenza (quindi vedi solo quella in cima).
Però hai modificato male il codice: adesso ogni elemento con il testo è diventato la cella della tabella #footer (se vedi, per questo elemento è specificato display: table).
Una versione un po' più pulita del codice la puoi vedere in azione all'indirizzo http://codepen.io/anon/pen/aNPPpm?editors=1100.
06-05-2016, 22.07.36
SchoolCommunity

Grazie veramente dell'interessamento e del tempo perduto per questo problema. Se hai ancora un minimo di pazienza, riusciresti per cortesia a spiegarmi un pò meglio il fatto che all'inizio uno non ha opacità mentre tutti gli altri si (ecco perchè non si vedono), perchè non trovo il punto in cui viene definita l'opacità inizialmente.
Grazie mille.
06-05-2016, 22.11.26
SchoolCommunity

Scusa, adesso ho trovato il punto (ovviamente --> opacity:0;), ma non capisco perchè nell'animazione l'opacità parte da 1 e poi torna ad 1. Quando torna poi a 0?
Grazie ancora.
08-05-2016, 19.52.18
karl94

Citazione:

Originalmente inviato da SchoolCommunity

Scusa, adesso ho trovato il punto (ovviamente --> opacity:0;), ma non capisco perchè nell'animazione l'opacità parte da 1 e poi torna ad 1. Quando torna poi a 0?
Grazie ancora.

L'animazione è ripetuta ciclicamente (animation-iteration-count: infinite), poi per ogni elemento è scostata con un preciso intervallo (animation-delay: 20s) e i tempi sono calcolati in modo che quando un elemento è visibile, nessun altro lo è (tranne durante la fase di transizione). Potresti anche fare in modo che all'inizio dell'animazione l'opacità sia a zero, ma in questo modo al caricamento della pagina non ci sarebbe alcun elemento visibile, ma vedresti la prima animazione di apparizione del primo elemento.
Se ne hai voglia io ti consiglierei di provare a fare questa modifica (far partire l'opacità a zero nell'animazione, quindi portarla ad uno e poi nuovamente a zero per ottenere un risultato simile a quello attuale), ti aiuterebbe di sicuro a comprendere meglio come funziona il tutto.