Блог

Главная - Вопросы по программированию - Эффект Кена Бернса с помощью слайдера nivo

Эффект Кена Бернса с помощью слайдера nivo

#javascript #jquery #nivo-slider

#javascript #jquery #nivo-слайдер

Вопрос:

Кто-нибудь настраивал слайдер nivo для панорамирования каждого изображения (он же эффект Кена Бернса)? Я пытаюсь его реализовать, и это довольно сложно!

Комментарии:

1. Зачем вам нужен nivo для этого, если это все, что вам нужно?

2. Потому что мне также нужно затухание между слайдами. Я пытался реализовать это сам, но это было сложно, и я решил использовать nivo slider.

Ответ №1:

На самом деле, моя реализация работает!

У меня есть цикл функции панорамирования .. что-то вроде этого:

 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');

Я все еще решаю некоторые проблемы с позиционированием.

Комментарии:

1. Кто-нибудь когда-нибудь исправлял проблемы с положением с помощью этого?

Ответ №2:

Источник amp; ДЕМОНСТРАЦИЯ

Добавьте это в свой 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();
}