‌‌‌

Slider Factory – How to add Ken Burns effect

 

Adding the so-called “Ken Burns effect”, we use a SliderFactory Combo with Responsive Background Sections inside the slides.
With Typesetter 5+ and the Responsive Image plugin installed, you will have such a combo right in the Section Manager (the colorful one).

You can add the effects without the need to modify the plugin’s code. You only need some additional CSS classes, see below

Thanks to SHan for bringing up this question!

 

Image

Slide 1

Image

Slide 2

Image

Slide 3

Image

Slide 4

zoom in to left

add the CSS class
kenburns-in-left
to the slider’s main wrapper

 

Image

Slide 1

Image

Slide 2

Image

Slide 3

Image

Slide 4

zoom in to right

add the CSS class
kenburns-in-right
to the slider’s main wrapper

 

Image

Slide 1

Image

Slide 2

Image

Slide 3

Image

Slide 4

zoom in alternate left/right

add the CSS class
kenburns-in-alternatedir
to the slider’s main wrapper

 

Image

Slide 1

Image

Slide 2

Image

Slide 3

Image

Slide 4

zoom out from left

add the CSS class
kenburns-out-left
to the slider’s main wrapper

 

Image

Slide 1

Image

Slide 2

Image

Slide 3

Image

Slide 4

zoom out from right

add the CSS class
kenburns-out-right
to the slider’s main wrapper

 

Image

Slide 1

Image

Slide 2

Image

Slide 3

Image

Slide 4

zoom out alternate left/right

add the CSS class
kenburns-out-alternatedir
to the slider’s main wrapper

 

Image

Slide 1

Image

Slide 2

Image

Slide 3

Image

Slide 4

alternate zoom in-out left

add the CSS class
kenburns-alternatezoom-left
to the slider’s main wrapper

 

Image

Slide 1

Image

Slide 2

Image

Slide 3

Image

Slide 4

alternate zoom in-out right

add the CSS class
kenburns-alternatezoom-right
to the slider’s main wrapper

 

Image

Slide 1

Image

Slide 2

Image

Slide 3

Image

Slide 4

alternate zoom and direction

add the CSS class
kenburns-alternate-all
to the slider’s main wrapper

 

 

The CSS

Copy and paste the following CSS to your theme stylesheet or put it into your Layout’s CSS Area using Layout Editor
(or alternatively  download the SliderFactory_kenburnsFx.css file and integrate it into your theme’s template.php):

 

/* ### Kenburns Fx ### */

/* zoom in to right */
@keyframes kenburns-in-right {
  0%   { transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
  100% { transform:scale3d(1.5, 1.5, 1.5) translate3d(-12.5%, -12.5%, 0); }
}
@-webkit-keyframes kenburns-in-right {
  0%   { -webkit-transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
  100% { -webkit-transform:scale3d(1.5, 1.5, 1.5) translate3d(-12.5%, -12.5%, 0); }
}

/* zoom in to left */
@keyframes kenburns-in-left {
  0%   { transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
  100% { transform:scale3d(1.5, 1.5, 1.5) translate3d(12.5%, -12.5%, 0); }
}
@-webkit-keyframes kenburns-in-left {
  0%   { -webkit-transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
  100% { -webkit-transform:scale3d(1.5, 1.5, 1.5) translate3d(12.5%, -12.5%, 0); }
}

/* zoom out from right */
@keyframes kenburns-out-right {
  0%   { transform:scale3d(1.5, 1.5, 1.5) translate3d(-12.5%, -12.5%, 0); }
  100% { transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
}
@-webkit-keyframes kenburns-out-right {
  0%   { -webkit-transform:scale3d(1.5, 1.5, 1.5) translate3d(-12.5%, -12.5%, 0); }
  100% { -webkit-transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

/* zoom out from left */
@keyframes kenburns-out-left {
  0%   { transform:scale3d(1.5, 1.5, 1.5) translate3d(12.5%, -12.5%, 0); }
  100% { transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
}
@-webkit-keyframes kenburns-out-left {
  0%   { -webkit-transform:scale3d(1.5, 1.5, 1.5) translate3d(12.5%, -12.5%, 0); }
  100% { -webkit-transform:scale3d(1, 1, 1) translate3d(0, 0, 0); }
}


/* --- zoom in --- */
/* Wrapper class "kenburns-in-left": all slides -> zoom in to left */
.kenburns-in-left .gpSlide-in>.filetype-responsive_background, 
.kenburns-in-left .gpSlide-active>.filetype-responsive_background, 
.kenburns-in-left .gpSlide-out>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-in-left ;
animation:10s ease-out forwards kenburns-in-left;
}
/* Wrapper class "kenburns-in-right": all slides -> zoom in to right */
.kenburns-in-right .gpSlide-in>.filetype-responsive_background, 
.kenburns-in-right .gpSlide-active>.filetype-responsive_background, 
.kenburns-in-right .gpSlide-out>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-in-right ;
animation:10s ease-out forwards kenburns-in-right;
}
/* Wrapper class "kenburns-in-alternatedir": slides zoom in, alternating to left and right */
.kenburns-in-alternatedir .gpSlide-in:nth-of-type(odd)>.filetype-responsive_background, 
.kenburns-in-alternatedir .gpSlide-active:nth-of-type(odd)>.filetype-responsive_background, 
.kenburns-in-alternatedir .gpSlide-out:nth-of-type(odd)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-in-left;
animation:10s ease-out forwards kenburns-in-left;
}
.kenburns-in-alternatedir .gpSlide-in:nth-of-type(even)>.filetype-responsive_background, 
.kenburns-in-alternatedir .gpSlide-active:nth-of-type(even)>.filetype-responsive_background, 
.kenburns-in-alternatedir .gpSlide-out:nth-of-type(even)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-in-right;
animation:10s ease-out forwards kenburns-in-right;
}

/* --- zoom out --- */
/* Wrapper class "kenburns-out-left": all slides -> zoom out from left */
.kenburns-out-left .gpSlide-in>.filetype-responsive_background, 
.kenburns-out-left .gpSlide-active>.filetype-responsive_background, 
.kenburns-out-left .gpSlide-out>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-out-left ;
animation:10s ease-out forwards kenburns-out-left;
}
/* Wrapper class "kenburns-out-right": all slides -> zoom out from right */
.kenburns-out-right .gpSlide-in>.filetype-responsive_background, 
.kenburns-out-right .gpSlide-active>.filetype-responsive_background, 
.kenburns-out-right .gpSlide-out>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-out-right ;
animation:10s ease-out forwards kenburns-out-right;
}
/* Wrapper class "kenburns-out-alternatedir": slides zoom in, alternating from left and right */
.kenburns-out-alternatedir .gpSlide-in:nth-of-type(odd)>.filetype-responsive_background, 
.kenburns-out-alternatedir .gpSlide-active:nth-of-type(odd)>.filetype-responsive_background, 
.kenburns-out-alternatedir .gpSlide-out:nth-of-type(odd)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-out-left;
animation:10s ease-out forwards kenburns-out-left;
}
.kenburns-out-alternatedir .gpSlide-in:nth-of-type(even)>.filetype-responsive_background, 
.kenburns-out-alternatedir .gpSlide-active:nth-of-type(even)>.filetype-responsive_background, 
.kenburns-out-alternatedir .gpSlide-out:nth-of-type(even)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-out-right;
animation:10s ease-out forwards kenburns-out-right;
}

/* --- alternate zoom --- */
/* Wrapper class "kenburns-alternatezoom-left": slides alternating zoom(in/out) left */
.kenburns-alternatezoom-left .gpSlide-in:nth-of-type(odd)>.filetype-responsive_background, 
.kenburns-alternatezoom-left .gpSlide-active:nth-of-type(odd)>.filetype-responsive_background, 
.kenburns-alternatezoom-left .gpSlide-out:nth-of-type(odd)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-in-left;
animation:10s ease-out forwards kenburns-in-left;
}
.kenburns-alternatezoom-left .gpSlide-in:nth-of-type(even)>.filetype-responsive_background, 
.kenburns-alternatezoom-left .gpSlide-active:nth-of-type(even)>.filetype-responsive_background, 
.kenburns-alternatezoom-left .gpSlide-out:nth-of-type(even)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-out-left;
animation:10s ease-out forwards kenburns-out-left;
}

/* Wrapper class "kenburns-alternatezoom-right": slides alternating zoom(in/out) right */
.kenburns-alternatezoom-right .gpSlide-in:nth-of-type(odd)>.filetype-responsive_background, 
.kenburns-alternatezoom-right .gpSlide-active:nth-of-type(odd)>.filetype-responsive_background, 
.kenburns-alternatezoom-right .gpSlide-out:nth-of-type(odd)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-in-right;
animation:10s ease-out forwards kenburns-in-right;
}
.kenburns-alternatezoom-right .gpSlide-in:nth-of-type(even)>.filetype-responsive_background, 
.kenburns-alternatezoom-right .gpSlide-active:nth-of-type(even)>.filetype-responsive_background, 
.kenburns-alternatezoom-right .gpSlide-out:nth-of-type(even)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-out-right;
animation:10s ease-out forwards kenburns-out-right;
}

/* --- alternate all (direction and zoom) --- */
/* Wrapper class "kenburns-alternate-all": slides alternating zoom(in/out) and direction (left/right) */
.kenburns-alternate-all .gpSlide-in:nth-of-type(1n)>.filetype-responsive_background, 
.kenburns-alternate-all .gpSlide-active:nth-of-type(1n)>.filetype-responsive_background, 
.kenburns-alternate-all .gpSlide-out:nth-of-type(1n)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-in-left;
animation:10s ease-out forwards kenburns-in-left;
}
.kenburns-alternate-all .gpSlide-in:nth-of-type(2n)>.filetype-responsive_background, 
.kenburns-alternate-all .gpSlide-active:nth-of-type(2n)>.filetype-responsive_background, 
.kenburns-alternate-all .gpSlide-out:nth-of-type(2n)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-out-left;
animation:10s ease-out forwards kenburns-out-left;
}
.kenburns-alternate-all .gpSlide-in:nth-of-type(3n)>.filetype-responsive_background, 
.kenburns-alternate-all .gpSlide-active:nth-of-type(3n)>.filetype-responsive_background, 
.kenburns-alternate-all .gpSlide-out:nth-of-type(3n)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-in-right;
animation:10s ease-out forwards kenburns-in-right;
}
.kenburns-alternate-all .gpSlide-in:nth-of-type(4n)>.filetype-responsive_background, 
.kenburns-alternate-all .gpSlide-active:nth-of-type(4n)>.filetype-responsive_background, 
.kenburns-alternate-all .gpSlide-out:nth-of-type(4n)>.filetype-responsive_background { 
-webkit-animation:10s ease-out forwards kenburns-out-right;
animation:10s ease-out forwards kenburns-out-right;
}

 

   Add the CSS class …

to your SliderFactory’s main wrapper using Section Attributes:

 

See the 9 available class names in the slider examples at the top of the page.
In the examples on this page I've set the slider’s Interval to 8000 (ms) and crossfade with 600 (ms) for the transition,
but you can also use other tranisiton types as well.

That’s it ;o)