"ken burns"
Bootstrap 3.3.0 Snippet by timbusken

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="header">
<h1>Smooth Ken Burns Effect Using the Transition Property</h1>
<p><a href="http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/">Paul Irish</a> on why translate is better than positioning to move elements. The same is true for a lot of transition values and their counterparts. The first image shows a Ken Burns effect using transition:scale;. The second uses zoom; notice how at the very end of the animation the image is pixel fit, causing a stuttering effect on the bottom.</p>
</section>
<div class="imageWrapper"><div class="image">
<img src="http://static.squarespace.com/static/4fb50a18e4b0f2fffeb51dda/4fb50a19e4b0f2fffeb51ddf/50255b3184ae111bdb329ce6/1344625457128/sqspc2-1.jpg?format=1500w" />
</div></div>
</div>
<div class="imageWrapperZoom"><div class="imageZoom">
<img src="http://static.squarespace.com/static/4fb50a18e4b0f2fffeb51dda/4fb50a19e4b0f2fffeb51ddf/50255b3184ae111bdb329ce6/1344625457128/sqspc2-1.jpg?format=1500w" />
</div></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
margin: 0;
padding: 0;
background-color: whitesmoke;
}
.header {
font-family: Sans-Serif;
padding: 100px 0;
text-align: center;
font-weight: 300;
border-bottom: 1px solid #DDD;
h1 {
font-weight: 400;
font-size: 1.3em;
}
p {
width: 500px;
margin: 0 auto;
line-height: 1.4em;
margin-bottom: 15px;
}
/* SCALE (USE THIS)
========================================== */
.imageWrapper {
background-color: #EEE;
border-bottom: 2px solid #DDD;
padding: 50px 0;
}
.image {
width:1200px;
height:700px;
margin:0 auto;
overflow:hidden;
position: relative;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
* See: http://www.css-101.org/articles/ken-burns_effect/css-transition.php
*/
/**
* The idea is to cycle through the images to apply the "fx" class to them every n seconds.
* We can't simply set and remove that class though, because that would make the previous image move back into its original position while the new one fades in.
* We need to keep the class on two images at a time (the two that are involved with the transition).
*/
(function(){
// we set the 'fx' class on the first image when the page loads
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
// this calls the kenBurns function every 4 seconds
// you can increase or decrease this value to get different effects
window.setInterval(kenBurns, 6000);
// the third variable is to keep track of where we are in the loop
// if it is set to 1 (instead of 0) it is because the first image is styled when the page loads
var images = document.getElementById('slideshow').getElementsByTagName('img'),
numberOfImages = images.length,
i = 1;
function kenBurns() {
if(i==numberOfImages){ i = 0;}
images[i].className = "fx";
// we can't remove the class from the previous element or we'd get a bouncing effect so we clean up the one before last
// (there must be a smarter way to do this though)
if(i===0){ images[numberOfImages-2].className = "";}
if(i===1){ images[numberOfImages-1].className = "";}
if(i>1){ images[i-2].className = "";}
i++;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Black Dashboard Pro

Questions / Comments: