Ergebnis 1 bis 2 von 2
  1. #1
    rene8vick ist offline Grünschnabel
    registriert
    20-04-2016
    Beiträge
    1

    jQuery 3 Teil Slider

    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
    Geändert von mikdoe (20-04-2016 um 17:38 Uhr) Grund: Code Tags

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.649

    AW: jQuery 3 Teil Slider

    Zitat Zitat von rene8vick Beitrag anzeigen
    Ich habe 3 Stunden probiert die Teile zusammensetzen, bin aber leider nicht auf den richtigen Pfad gekommen.
    Zeig' doch einfach, was du gemacht hast. Am besten mit einem Livelink.

Ähnliche Themen

  1. jquery ui slider horizontal
    Von HO.S im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 02-09-2011, 07:12
  2. jQuery: .click auf <a> Tags mit ausgefülltem href-Teil
    Von firewing06 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 21-07-2011, 17:37
  3. jquery slider value
    Von ru2009ru im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 27-12-2010, 21:53
  4. jQuery ? Coda-Slider
    Von jswelt bot im Forum Links & Tutorials mit Tipps & Tricks zu JavaScript, CSS, PHP, MySQL
    Antworten: 0
    Letzter Beitrag: 11-02-2010, 19:18
  5. Bilder slider teil 1
    Von Meerschwein im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 05-05-2003, 23:19

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •