Fullsize background slider z możliwością ustawienia czasu dla każdego elementu

[atp]

Poszukuję skryptu jak w temacie. Sprawa jest taka że muszę zrobić przejścia między slajdami w ten sposób że najpierw zdjęcie jest czarno-białe a później dopiero przechodzi w kolor. Canvas nie wchodzi niestety w grę bo dla tak dużych obrazków działa to strasznie wolno. Próbowałem też klonować diva z obrazkiem przy pomocy jquery + grayscale w css ale też chodziło tragicznie wolno. Więc od biedy będą dwie wersje obrazków - czarno/biały i kolor ale musiałyby przechodzić między sobą w różnych odstępach czasu. Operowałem na skrypcie Supersized.

[Kartofelek]

Ja od pewnego czasu robię slidery na podstawie css W Ie8 nie ma pięknego przejsćia (które spokojnie można dopisać robiąc test modernizerem), ale walić to. W mobilkach jest o wiele płynniej.

JS:

Kod:

_slideText = function() {
    var slideTimer = null;
    var slideToShow = 1;
    var pauseTime = 5000;

    function changeSlide() {
        clearTimeout(slideTimer);

        var $slides = $('.slider .slide');
        $slides.removeClass('active');
        $slides.eq(slideToShow).addClass('active');
        
        slideTimer = setTimeout(function() {
            slideToShow++;
            if (slideToShow >= $slides.length) {
                slideToShow = 0;
            }
            changeSlide();
        }, pauseTime)
    }
    slideTimer = setTimeout(function() {changeSlide();}, pauseTime)
};

$(function() {
     changeSlide();
});

html:

Kod:

<div class="slider">
    <div class="slides">
        <div class="slide active">            
            <img src="czarnobialy" />
        </div>
        <div class="slide">
            <img src="kolorowy" />
        </div>                    
    </div><!-- e: slides -->
</div><!-- e: slide texts -->

i css:

Kod:

html, body {height:100%; position:relative;}
.slider {width:100%; height:100%; position:absolute; top:0; left:0; bottom:0; right:0; z-index:-1;} /* pewnie chcesz to miec w tle? */
.slider .slide {width:100%; height:100%; position:absolute; top:0; left:0; bottom:0; right:0; -moz-transition:0.5s; -webkit-transition:0.5s; transition:0.5s; visibility:hidden; opacity:0; filter:alpha(opacity=0); z-index:0;}
.slider .slide img {width:100%; height:100%; position:absolute; top:0; left:0; bottom:0; right:0; display:block;}
.slider .slide .active {visibility:visible; opacity:1; filter:alpha(opacity=100); z-index:1;}

Dzięki transition i zmianie opacity:0 i visibility:hidden na opacity:1 i visibility:visible zyskujesz płynne przejscia slajdów. Działać będzie max płynnie, bo to animacje css. Za pomocą js nie uzyskasz czegoś takiego :}

Możesz też użyć np http://slidesjs.com/ - to też używa css transition. Ale nie jestem pewien czy tak łatwo będzie ci to zgrać.

[atp]

Pomysł na slider ciekawy ale nie zdał by egzaminu jako background ponieważ obrazek nie będzie dostosowywał się do szerokości/wysokości ekranu ... nie mnie pewnie gdzieś wykorzystam bo fajny i mały

Ja swój problem rozwiązałem z wykorzystaniem rzeczonego wcześniej Supersized i jego api:

Kod:

(function($){

    theme = {
    
    _init:function(){
        api.nextSlide();
    },
    afterAnimation:function(){
        if (Math.floor(vars.current_slide/2)==vars.current_slide/2) {
        api.nextSlide();
        }
    }
        
    };
})(jQuery);

Po prostu popycham wszystkie parzyste (czarno/białe) elementy do przodu