Ken Burns effect lacks zooming

[dukebody]

Both in CSS and JS.

[dukebody]

Suggested patch. Fails to reset size to original one after transition, enlarging too much the images in following rounds.

--- slippry-1.2/src/slippry.js  2013-12-18 16:35:29.000000000 +0100
+++ js/slippry.js   2014-02-13 10:56:22.570741754 +0100
@@ -51,8 +51,9 @@
     hideOnEnd: true,

     // transitions
     transition: 'fade', // fade, horizontal, vertical, kenburns, false
+    kenPan: 120,  // max pan for kenburns (in %)
     kenZoom: 120, // max zoom for kenburns (in %)
     slideMargin: 0, // spacing between slides (in %)
     transClass: 'transition', // [Class applied to [element] while a transition is taking place.]
     speed: 800, // time the transition takes (ms)
@@ -162,23 +163,28 @@
       return newelement;
     };

     doKens = function () {
-      var kenStart, kenTime, animProp, cssProp;
+      var kenStart, kenZoom, kenTime, animProp, cssProp;
       animProp = {};
       cssProp = {};
-      kenStart = 100 - slip.settings.kenZoom;
-      cssProp.width = slip.settings.kenZoom + '%';
+      kenStart = 100 - slip.settings.kenPan;
+      kenZoom = slip.settings.kenZoom - 100;
+      cssProp.width = slip.settings.kenPan + '%';
       if (slip.vars.active.index() % 2 === 0) {
         cssProp.left = kenStart + '%';
         cssProp.top = kenStart + '%';
         animProp.left = '0%';
         animProp.top = '0%';
+        animProp.width = '+=' + kenZoom + '%';
+        animProp.height = '+=' + kenZoom + '%';
       } else {
         cssProp.left = '0%';
         cssProp.top = '0%';
         animProp.left = kenStart + '%';
         animProp.top = kenStart + '%';
+        animProp.width = '+=' + kenZoom + '%';
+        animProp.height = '+=' + kenZoom + '%';
       }
       kenTime = slip.settings.pause + slip.settings.speed * 2;
       slip.vars.active.css(cssProp);
       slip.vars.active.animate(animProp, {duration: kenTime, easing: slip.settings.easing, queue: false});

[sftsk]

thanks, will look into this hopefully next week!

[JonnyRedHed]

Yes more Kenburns options, more smoothness etc and all the new features we see in 2014>.

And Zooming, most certainly, 2014> features.

And Touch support.

Rounded corners that still look ok when slide transition is chosen. Getting a jquery slider with round corners that still looks ok when a slide is sliding in and out seems tricky even for the top paid ones.

This (javascript example) here: http://www.menucool.com/slideshow/zoom-slider-demo2
has used a background div with CSS rounded corners, works well to also frame the slide, but is not responsive. Also this jQuery slider here: http://pixelentity.com/previews/components/estro/index.html.

1. Having the option to have a frame with rounded corners and still be responsive would be great to have. 2. Also the option to have the slide with no background frame but to still somehow have rounded corners whilst it slides, now this would be good.

Let me know if most of this above needs posting in another section as 'requested future features'.

All this would be great to see be introduced.

.... and if you have any spare time left after doing all this, could you please lend NASA a hand with their manned Moon and Mars projects ;)