Geek Answers Handbook

Ken Burns effect with nivo slider

Has anyone configured a nivo slider to pan each image (aka Ken Burns Effect )? I am trying to implement it and it is quite difficult!

+4
source share
2 answers

Actually, I got my job!

I have a pan 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); }); }

And I initialize the nivo slider as follows:

 $('#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 am still developing some positioning problems.

+3
source

Source and Demo

Add this to your 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(); }
0
source

More articles:


All Articles