Ergebnis 1 bis 2 von 2
Thema: jQuery 3 Teil Slider
-
20-04-2016, 15:19 #1
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 } });
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);
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);
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)'); };
Danke im VorrausGeändert von mikdoe (20-04-2016 um 18:38 Uhr) Grund: Code Tags
-
21-04-2016, 19:38 #2
AW: jQuery 3 Teil Slider
Ähnliche Themen
-
jquery ui slider horizontal
Von HO.S im Forum JavaScriptAntworten: 1Letzter Beitrag: 02-09-2011, 08:12 -
jQuery: .click auf <a> Tags mit ausgefülltem href-Teil
Von firewing06 im Forum JavaScriptAntworten: 1Letzter Beitrag: 21-07-2011, 18:37 -
jquery slider value
Von ru2009ru im Forum JavaScriptAntworten: 3Letzter Beitrag: 27-12-2010, 22:53 -
jQuery ? Coda-Slider
Von jswelt bot im Forum Links & Tutorials mit Tipps & Tricks zu JavaScript, CSS, PHP, MySQLAntworten: 0Letzter Beitrag: 11-02-2010, 20:18 -
Bilder slider teil 1
Von Meerschwein im Forum JavaScriptAntworten: 7Letzter Beitrag: 06-05-2003, 00:19
Lesezeichen