Ken Burns效果與nivo滑塊

Question

是否有人設置了nivo slider來平移每個圖像（又名Ken Burns effect）？我試圖實現它，這有點棘手！

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

我還在一些問題定位。

Answer 2

Source & Demo

添加到您的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(); 
}