JQuery / HTML / CSS Scala di grigi per colorare il cursore dell’immagine

Sto sperando che qualcuno qui possa aiutarmi. Attualmente sto costruendo un sito Web per un cliente e nella pagina dell’indice ci sarà uno slider / fader dell’immagine che visualizzerà una sequenza di immagini. Ciò che il cliente ha chiesto è per il passaggio da un’immagine all’altra per l’immagine successiva nella sequenza di dissolvenza in scala di grigi e lentamente si trasforma in colore e la pausa per alcuni secondi prima del caricamento nell’immagine successiva.

Ho usato un fader di immagine che funziona bene per la transizione, ma vorrei modificarlo per la funzionalità in scala di grigi. Essere nuovo di jQuery e sembra che non ci sia alcun ‘ready-built’ su Internet, quindi sto faticando un po ‘.

Il mio CSS è un seguito:

.index_slideshow { position:relative; height:340px; width:980px; margin:auto; } .index_slideshow IMG { position:absolute; top:0; left:0; z-index:8; } .index_slideshow IMG.active { z-index:10; } .index_slideshow IMG.last-active { z-index:9; } 

Il mio jQuery è il seguente:

 function slideSwitch() { var $active = $('.index_slideshow IMG.active'); if ( $active.length == 0 ) $active = $('.index_slideshow IMG:last'); var $next = $active.next().length ? $active.next() : $('.index_slideshow IMG:first'); $active.addClass('last-active'); $next.css({opacity: 0.0 }) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); 

E il mio HTML è:

 

Spero che qualcuno possa aiutarmi! 🙂

Un modo semplice per farlo sarebbe inserire le versioni in scala di grigi delle immagini nella presentazione:

 

(Presumo dal tuo ordine img che le immagini che appaiono più in basso nel codice vengano visualizzate per prime … ma scambiate semplicemente la posizione di imgX.jpg e imgXgrey.jpg se questa è un’ipotesi errata.)

Oltre a ciò, stai osservando una combinazione di elementi Canvas e filtri IE: http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html (Ignora i tag che dicono il codice è PHP, è Javascript, i tag sono probabilmente rimasti cruft da un vecchio CMS).

Dovresti estenderlo per animare ogni passaggio tra la scala di grigi e il colore, quindi se non hai a che fare con immagini massicce, il primo metodo è il più semplice.