Ken Burns效果与nivo滑块 [英] Ken Burns effect with nivo slider

问题描述

是否有人设置 nivo滑块来平移每张图片（又名 Ken Burns效应）？我正在尝试实现它，这有点棘手！

Has anyone set up a nivo slider to pan each image (aka Ken Burns effect)? I'm trying to implement it and it's kinda tricky!

推荐答案

实际上，我实现了我的实现！

Actually, I got my implementation working!

我有一个平移函数循环..这样的事情：

I have a panning function loop.. something like this:

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滑块，如下所示：

And I'm initializing nivo slider like this:

$('#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');

我还在解决定位方面的一些问题。

I'm still working out some problems with positioning.

这篇关于Ken Burns效果与nivo滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！