SVG Slideshow Background

by piper

HTML

<div id="slideshow">

    <img src="http://s21.postimg.org/kfr0xwk9j/image.jpg"
         alt="">
    <img src="http://s22.postimg.org/ljsnvvxwh/image.jpg"
         alt="">
    <img src="http://s28.postimg.org/axiccs219/image.jpg"
         alt="">
    <img src="http://s17.postimg.org/pb5b5jqnz/image.jpg"
         alt="">
    <img src="http://s13.postimg.org/q0d67y41j/image.jpg"
         alt="">
    <img src="http://s9.postimg.org/x9ptk9dgv/image.jpg"
         alt="">
</div>


<?xml version="1.0" encoding="UTF-8"?>
<svg width="501px" height="133px" viewBox="0 0 501 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <text id="text-1" font-family="Padaloma" font-size="144" font-weight="normal" letter-spacing="15" fill-opacity="0" fill="#F8E81C">
            <tspan x="5.33" y="121">W</tspan>
            <tspan x="245.978" y="121" letter-spacing="10">N</tspan>
            <tspan x="417.402" y="121">I</tspan>
        </text>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
            <feOffset dx="4" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0 ...

CSS

#slideshow {
  position:relative;
  width:480px!important;
  height:320px;
  overflow:hidden;
  border:5px solid #666666;
  -webkit-box-shadow:1px 1px 5px #000000;
  -moz-box-shadow:1px 1px 5px #000000;
  -o-box-shadow:1px 1px 5px #000000;
  box-shadow:1px 1px 5px #000000;
}
#slideshow img {
  max-width: none;
  position:absolute;
  width:480px;
  height:320px;
  top:50%;
  left:50%;
  margin-left:-180px;
  margin-top:-120px;
  opacity:0;
  -webkit-transition-property: opacity, -webkit-transform;
  -webkit-transition-duration: 3s, 8s;
  -moz-transition-property: opacity, -moz-transform;
  -moz-transition-duration: 3s, 8s;
  -o-transition-property: opacity, -o-transform;
  -o-transition-duration: 3s, 8s;
  transition-property: opacity, transform;
  transition-duration: 3s, 8s;
}
#slideshow img  {
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -o-transform-origin: bottom left;
  transform-origin: bottom left;
}
#slideshow :nth-child(2n+1) {
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
}
#slideshow :nth-child(3n+1) {
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
}
#slideshow :nth-child(4n+1) {
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -o-transform-origin: bottom right;
  transform-origin: bottom right;
}
#slideshow .fx:first-child + img ~ img {
	z-index:-1;
}
#slideshow .fx {
  -webkit-transform: scale(1.5) translate(30px);
  -moz-transform: scale(1.5) translate(30px);
  -o-transform: scale(1.5) translate(30px);
  transform: scale(1.5) translate(30px);
  opacity:1;
}

JavaScript

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, 4000);
    // 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++;
    }
})();