This example shows different ways of panning and zooming an image to create an elegant effect.
<div id="kenBurnsSlider" class="slider" data-elem="motionslider" data-options="animDuration:0.5">
<div class="slidesHolder" data-elem="slidesHolder" >
<div class="slide" data-elem="slide">
<img alt="image" src="#" data-src="assets/cheeseboard.jpg" class="cheeseBoard" data-motion="{y:-122px; ease:Linear.easeNone; duration:7}"/>
<div class="descHolder" data-motion="{autoAlpha:0; y:90; immediateRender:true}, {autoAlpha:1; y:0; duration:0.5; delay:0.5}">
<img alt="image" src="#" data-src="assets/chesseboard_blur_part.jpg" class="cheeseBoardBlur" data-motion="{alpha:0; immediateRender:true}, {y:-122px; ease:Linear.easeNone; duration:7}"/>
<div data-motion="{target:.cheeseBoardBlur; alpha:0.95; duration:0.75; delay:0.75}"></div>
<div class="descBg" data-motion="{autoAlpha:0.5; immediateRender:true}"></div>
<div class="titleText">CHEESE PLATTER</div>
<div class="descText">Cheese platter served with water biscuits and wheat crackers</div>
</div>
<div data-motion="{target:'.titleText, .descText'; alpha:0.9; }"></div>
</div>
<div class="slide" data-elem="slide">
<img alt="image" src="#" data-src="assets/bread.jpg" class="bread" data-motion="{scale:1.1; transformOrigin:75% 100%; ease:Linear.easeNone; duration:7}"/>
<div class="descHolder" data-motion="{autoAlpha:0; y:90; immediateRender:true}, {autoAlpha:1; y:0; duration:0.5; delay:0.5}">
<div class="breadBlurHolder" data-motion="{ alpha:0; immediateRender:true}, {scale:1.1; transformOrigin:75% 100%; ease:Linear.easeNone; duration:7}">
<img alt="image" src="#" data-src="assets/bread_blur_part.jpg" class="breadBlur" data-motion="{alpha:1; immediateRender:true}" />
</div>
<div class="descBg" data-motion="{autoAlpha:0.5; immediateRender:true}"></div>
<div class="titleText">CRUSTY BREAD</div>
<div class="descText">Freshly baked crusty round loaf of bread on a wooden bread board</div>
</div>
<div data-motion="{target:.breadBlurHolder; alpha:1; duration:0.75; delay:0.75}"></div>
<div data-motion="{target:'.titleText, .descText'; alpha:0.9; }"></div>
</div>
<div class="slide" data-elem="slide">
<img alt="image" src="#" data-src="assets/family_quiche.jpg" class="familyQuiche" data-motion="{type:from; scale:1.2; transformOrigin:0% 50%; ease:Linear.easeNone; duration:7}"/>
<div class="descHolder" data-motion="{autoAlpha:0; y:90; immediateRender:true}, {autoAlpha:1; y:0; duration:0.5; delay:0.5}">
<div class="familyQuicheBlurHolder" data-motion="{ alpha:0; immediateRender:true}, {type:from; scale:1.2; transformOrigin:0% 50%; ease:Linear.easeNone; duration:7}">
<img alt="image" src="#" data-src="assets/family_quiche_blur_part.jpg" class="familyQuicheBlur" data-motion="{alpha:1; immediateRender:true}" />
</div>
<div class="descBg" data-motion="{autoAlpha:0.5; immediateRender:true}"></div>
<div class="titleText">WHOLE FAMILY QUICHE</div>
<div class="descText">Whole family quiche with egg, bacon and tomato on a wooden chopping board</div>
</div>
<div data-motion="{target:.familyQuicheBlurHolder; alpha:1; duration:0.75; delay:0.75}"></div>
<div data-motion="{target:'.titleText, .descText'; alpha:0.9; }"></div>
</div>
<div class="slide" data-elem="slide">
<img alt="image" src="#" data-src="assets/bolognese_meal.jpg" class="bologneseMeal" data-motion="{y:122px; ease:Linear.easeNone; duration:7}"/>
<div class="descHolder" data-motion="{autoAlpha:0; y:90; immediateRender:true}, {autoAlpha:1; y:0; duration:0.5; delay:0.5}">
<img alt="image" src="#" data-src="assets/bolognese_meal_blur_part.jpg" class="bologneseMealBlur" data-motion="{alpha:0; immediateRender:true}, {y:122px; ease:Linear.easeNone; duration:7}"/>
<div data-motion="{target:.bologneseMealBlur; alpha:0.95; duration:0.75; delay:0.75}"></div>
<div class="descBg" data-motion="{autoAlpha:0.5; immediateRender:true}"></div>
<div class="titleText">SPAGHETTI BOLOGNESE</div>
<div class="descText">Italian spaghetti bolognese with beef mince and grated cheese</div>
</div>
<div data-motion="{target:.bologneseMealBlur; alpha:1; duration:0.75; delay:0.75}"></div>
<div data-motion="{target:'.titleText, .descText'; alpha:0.9; }"></div>
</div>
<div data-elem="controls">
<div class="circleThumbHolder" style="bottom:auto; top:45px">
<div class="circlePosHolder">
<div class="circleThumb cThumb1" data-elem="slideThumb" data-options="index:0;"> </div>
<div class="circleThumb cThumb2" data-elem="slideThumb" data-options="index:1;"> </div>
<div class="circleThumb cThumb3" data-elem="slideThumb" data-options="index:2;"> </div>
<div class="circleThumb cThumb4" data-elem="slideThumb" data-options="index:3;"> </div>
</div>
</div>
</div>
</div>
</div>
.slider, .slide
{
width:735px;
height:366px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
.descHolder
{
position:absolute;
width:735px;
height:80px;
left:0px;
bottom:0px;
overflow:hidden;
}
.descBg
{
width:735px;
height:90px;
background-color:#7F4F27
}
.titleText, .descText
{
font-family: Arial, Helvetica, sans-serif;
line-height:1;
display:block;
font-weight:bold;
text-align:center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width:705px;
position:absolute;
text-align:left;
padding:15px;
}
.titleText
{
left:0px;
top:0px;
color:#E5E18F;
font-size:24px;
}
.descText
{
left:0px;
top:30px;
color:#CCCCCC;
font-size:14px;
}
.cheeseBoard, .cheeseBoardBlur, .bread, .familyQuiche, .familyQuicheBlur, .bologneseMeal, .bologneseMealBlur
{
position:absolute;
width:735px;
height:auto;
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
transform: rotate(0.01deg);
}
.cheeseBoard
{
left:0px;
top:0px;
height:489px;
}
.cheeseBoardBlur
{
position:absolute;
left:0px;
top:0px;
height:204px;
}
.bread, .familyQuiche
{
left:0px;
bottom:0px;
height:366px;
}
.breadBlurHolder, .familyQuicheBlurHolder
{
width:735px;
height:366px;
left:0px;
bottom:0px;
position:absolute;
}
.breadBlur, .familyQuicheBlur
{
position:absolute;
left:0px;
bottom:0px;
width:735px;
height:104px;
}
.bologneseMeal
{
left:0px;
bottom:0px;
height:489px;
}
.bologneseMealBlur
{
position:absolute;
left:0px;
bottom:0px;
height:204px;
}
.circleThumbHolder
{
width:100%;
height:0px;
position:absolute;
bottom:0px;
left:0px
}
.circlePosHolder
{
position:absolute;
width:0px;
height:30px;
left:50%;
bottom:0px;
}
.cThumb1
{
right:28px
}
.cThumb2
{
right:2px
}
.cThumb3
{
left:2px
}
.cThumb4
{
left:28px
}
This is a simple demo that shows how easy it is to animate DOM elements using Motion Slider Plugin.
This example shows how different layers of div and images are animated to their position.
Each slide shows different ways of image tile animation and also features some text effects using SplitText plugin
