Кто-нибудь устанавливал ползунок nivo для панорамирования каждого изображения (он же эффект Кена Бернса)? Я пытаюсь реализовать это, и это довольно сложно!
Эффект Кена Бернса с ползунком nivo
comment
Зачем тебе ниво, если это все, что тебе нужно?
- person Rob   schedule 11.10.2011
comment
Потому что мне тоже нужно затухание между слайдами. Я пытался реализовать это сам, но это было сложно, и я решил использовать слайдер nivo.
- person nnyby   schedule 11.10.2011
Ответы (2)
На самом деле, моя реализация работает!
У меня есть цикл функции панорамирования.. что-то вроде этого:
function ken_burns_loop(el) {
$(el)
.animate({
'background-position-x': '40%',
'background-position-y': '60%'
}, 8000, 'linear')
.animate({
'background-position-x': '30%',
'background-position-y': '40%'
}, 8000, 'linear')
.animate({
'background-position-x': '70%',
'background-position-y': '70%'
}, 8000, 'linear', function() { ken_burns_loop(el); });
}
И я инициализирую слайдер nivo следующим образом:
$('#welcome-slider').nivoSlider({
effect: 'fade',
slices: 1,
directionNav: false,
afterChange: function() {
$('#welcome-slider, .nivo-slice').stop(true);
ken_burns_loop('#welcome-slider, .nivo-slice');
}
});
ken_burns_loop('#welcome-slider, .nivo-slice');
Я все еще решаю некоторые проблемы с позиционированием.
person
nnyby
schedule
10.10.2011
Кто-нибудь когда-нибудь исправлял проблемы с положением с этим?
- person norsewulf; 25.03.2013
Добавьте это в свой JS:
if(currentEffect === 'kenburns'){
createZoom(slider, settings, vars);
zoom = $('.nivo-zoom:last', slider);
var delta = (8 + Math.random() * 2) / 100;
var neww = zoom.width() * (1 + delta);
var newh = zoom.height() * (1 + delta);
var x = delta * zoom.width(); //Math.random()*(neww-zoom.width());
var y = delta * zoom.height(); //Math.random()*(newh-zoom.height());
var zoomdir = Math.round(Math.random() * 4);
zoom.animate({ opacity:'1.0'}, {easing:'linear',duration:settings.pauseTime*2/3});
if(zoomdir == 1) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',top: '-'+y+'px'},{easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 2) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',top: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 3) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
}
if($('.nivo-zoom', slider).length > 2) $('.nivo-zoom:first', slider).remove();
}
person
cfx
schedule
15.08.2013