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

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

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Fullsize background slider z możliwością ustawienia czasu dla każdego elementu (/thread-fullsize-background-slider-z-mozliwo%C5%9Bcia-ustawienia-czasu-dla-kazdego-elementu)

Fullsize background slider z możliwością ustawienia czasu dla każdego elementu - atp - 24-09-2013

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.

RE: Fullsize background slider z możliwością ustawienia czasu dla każdego elementu - Kartofelek - 24-09-2013

Ja od pewnego czasu robię slidery na podstawie css Smile

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ć.

RE: Fullsize background slider z możliwością ustawienia czasu dla każdego elementu - atp - 24-09-2013

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 Wink

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 Wink