jQuery 3 Teil Slider

**rene8vick** · 20-04-2016, 15:19

Hallo Leute,
Ich würde diesen Banner JKweb | Webdesign Basel & Zürich | Angebot nach kreieren.
Ich habe diese Nachricht von einem Admin bekommen:
Besten Dank für dein Interesse.

Der Slider besteht prinzipiell aus drei Teilen.

1. Der Slider selber: Dafür verwenden wir das jQuery Plugin noUiSlider - JavaScript Range Slider | Refreshless.com. Das Markup auf HTML-Seite ist

<div class="slider"></div>

der zugehörige JS-Code ist

HTML-Code:

$('.slider').noUiSlider({
    start: [ 1500 ],
    step: 50,
    range: {
        'min': min,
        'max': max
    }
});

Mit ein bisschen CSS-Code kannst du den Slider dann so stylen wie es dir gefällt. Unsere Styles findest du im screen.css ab Zeile 1684.

2. Die Animation des Sliders am Anfang. Wir bewegen den Slider "manuell" mit Javascript mittels einer CSS3 Transition. Der Code hierfür ist ein bisschen lang und unstrukturiert jedoch sehr trivial:

HTML-Code:

setTimeout(function() {
            // move slider at the beginning
            origLeft = $(".slider .noUi-origin").addClass("anim").addClass("bla");
            //$(".slider .noUi-origin").attr("style","");
            //$(".slider .noUi-origin").animate({"margin-left":180},800);
            setTimeout(function() {
                //$(".slider .noUi-origin").animate({"margin-left":-180},800);
                $(".slider .noUi-origin").removeClass("bla").addClass("blabla");
                setTimeout(function() {
                    $(".slider .noUi-origin").removeClass("blabla");
                    //$(".slider .noUi-origin").animate({"margin-left":0},800);

                    $("#price-adjust").countTo({
                        from: 800,
                        to: 1500,
                        speed: 700,
                        refreshInterval: 50,
                        onComplete: function(value) {
                            console.debug(this);
                            $(".slider .noUi-origin").removeClass("anim");
                            //$(".slider .noUi-origin").css("margin-left",100);
                        }
                    });
                }, 800);
                $("#price-adjust").countTo({
                    from: 1900,
                    to: 800,
                    speed: 700,
                    refreshInterval: 50,
                    onComplete: function(value) {

}
                });
            }, 800);


            $("#price-adjust").countTo({
                from: 1500,
                to: 1900,
                speed: 700,
                refreshInterval: 50,
                onComplete: function(value) {

}
            });


        }, 1400);

Prinzipiell haben wir drei verschachtelte Funktionen, welche mit setTimeout(fnc, timeout) jeweils zeitversetzt aufgerufen werden und für die Bewegung nach Links (Klasse .bla) und nach Rechts (Klasse .blabla) zuständig sind, diese beiden Klassen haben ein simples margin-left property, welches animiert wird, Details auch im screen.css auf Zeilen 1534ff. Die Animation der Zahl ist mit dem jQuery Code

HTML-Code:

(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
        increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
            loopCount = 0,
            value = options.from,
            interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,
        // the number the element should start at
        to: 100,
        // the number the element should end at
        speed: 1000,
        // how long it should take to count between the target numbers
        refreshInterval: 100,
        // how often the element should be updated
        decimals: 0,
        // the number of decimal places to show
        onUpdate: null,
        // callback method for every time the element is updated,
        onComplete: null,
        // callback method for when the element finishes updating
    };
})(jQuery);

umgesetzt.

3. Die Anpassung des Bildes wenn man den Slider bewegt. Für diesen Effekt verwenden wir zwei Bilder welche mit position: absolute übereinander gelegt wurden. Beide Bilder zeigen das selbe Bild, das eine mit Photoshop entsprechend bearbeitet (Gelbstich, Körnung). Bei Bewegung des Sliders wird nun das obere mittels einem entsprechenden opacity Styling zunehmend unsichtbar. Der JS-Code ist

HTML-Code:

var makeGray = function() {
                pr = parseInt($(".slider").val());
                gr = Math.round((1 - (pr - min) / (max - min)) * 100);
                gr_1 = 1 - gr / 100;
                //gr_1 = (1-gr_1)/2+0.5
                //$(".angebot-header .img").css(prefix.css + 'filter','grayscale('+gr+'%)');
                $(".angebot-header .img").css('opacity', gr_1);
                //$(".angebot-header .img").css(prefix.css + 'filter','blur('+gr+'px)');
            };

Ich habe 3 Stunden probiert die Teile zusammensetzen, bin aber leider nicht auf den richtigen Pfad gekommen. Ich wäre unendlich dankbar wenn mir jemand helfen würde. Ich würde diesem sogar, die Zeit, die er investiert hat, bezahlen.
Danke im Vorraus