Page 2 of 2 FirstFirst 12
Results 11 to 12 of 12

Thread: Looking for a Ken Burns slideshow

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Brownmarsh12 View Post
    as I can see too your website works fine "for real". What do you think, to send your question to Aeron Glemann, aeron.glemann at gmail.com, who elaborated this extension. Maybe there is a Windows 7 "intolerance" and the program would have to be adjusted.
    After doing a search I see Glemann's "Ken Burns" work (at least some of it) is for MooTools and uses otherwise 'normal' javascript and HTML as filtered via the MooTools library. What I did is jQuery based and involves the use of the canvas tag. Vic's script is all javascript and HTML.

    I couldn't easily find a live demo of Glemann's work though, are you saying it doesn't work on Win 7? Is there a live demo you're aware of?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    I know this is an old thread, but I've been playing around with this again recently and am almost there. In jQuery (and in general) it's actually much simpler than we all thought, or at least than I thought. Instead of mutiple pans and zooms occurring at once, it's just a "setup", which prepares the image for the particular effect by changing its size (width and height - proportionally) and moving to a position (absolute, left and/or top, bottom right) within the frame (parent div, position relative, overflow hidden). The effect itself is then a single pan (animated position change(s) with or without a concurrent change in size (width and height again). All of which can be expressed rather simply in jQuery (this was the starting point):

    Code:
    // jQuery Ken Burns Effect Script (c)2013 John Davenport Scheuer
    // as first seen in http://www.dynamicdrive.com/forums/
    // username: jscheuer1 - This Notice Must Remain for Legal Use
    
    (function($){
    	burns = [
    		{//0
    			setup: {width: '136%', height: 'auto', position: 'absolute', top: 0, left: 0},
    			ani: {width: '100%'}
    		},
    		{//1
    			setup: {width: '136%', height: 'auto', position: 'absolute', top: '-36%', left: 0},
    			ani: {width: '100%', top: 0}
    		},
    		{//2
    			setup: {width: '136%', height: 'auto', position: 'absolute', top: 0, left: '-36%'},
    			ani: {width: '100%', left: 0}
    		},
    		{//3
    			setup: {width: '136%', height: 'auto', position: 'absolute', top: '-36%', left: '-15%'},
    			ani: {width: '100%', top: 0, left: 0}
    		},
    		{//4
    			setup: {width: '100%', height: '100%', position: 'absolute', top: 0, left: 0},
    			ani: {width: '136%', height: '136%', top: '-15%'}
    		},
    		{//5
    			setup: {width: '115%', height: '115%', position: 'absolute', bottom: 0, left: '-15%'},
    			ani: {width: '136%', height: '136%', bottom: '-15%', left: 0}
    		},
    		{//6
    			setup: {width: '136%', height: 'auto', position: 'absolute', top: '-15%', left: 0},
    			ani: {left: '-36%'}
    		}
    	];
    	$.fn.kenburns = function(burn, duration){
    		this.css(burns[burn].setup).animate(burns[burn].ani, {queue: false, easing: 'linear', duration: duration});
    	};
    })(jQuery);
    Some of the "burns" are pretty similar, as I was fine tuning with some of them, others can be added. I worked this out for use with The Ultimate Fade-in Slideshow, and it's pretty close to what the WOW slider does, with much less code and no canvas tag. Things aren't perfected yet (they almost never are with me - but I see some things this still really needs), but here's a demo:

    http://home.comcast.net/~jscheuer1/s...de/kburns1.htm

    One thing though, even in the WOW slider version, there are some slight distortions of the image as it's panning/zooming. This can be particularly seen with fine lines. The images used in the WOW demo I linked to earlier in this thread don't have very many of those though, so it's hardly noticeable. You can see it around the doorways on the airplanes though, as those are fine lines. This might be browser and/or monitor dependent.
    Last edited by jscheuer1; 09-11-2013 at 05:52 PM. Reason: add demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •