LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
#slideshow {
    position:relative;
    width:100%;
    height:100%;
    min-height: 100vh;
    overflow:hidden;
  background-color: #ccc;
}

#slideshow img {
    position: absolute;
  opacity: 0;
min-width: 100%;
  height: auto; 
top: 50%;
  left: 50%;
   transform: translate(-50%, -50%);
   opacity:0;
  z-index: 0;
}
#slideshow img.zIndex {
  z-index: 0;
}
#slideshow img.burns-fadeInRight {
  animation-name: kenburnsRight, fadeIn;
  animation-duration: 10s, 1s;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
}

#slideshow img.burns-fadeInLeft {
  animation-name: kenburnsLeft, fadeIn;
  animation-duration: 10s, 1s;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
}
#slideshow img.burns-fadeInUp {
  animation-name: kenburnsUp, fadeIn;
  animation-duration: 10s, 1s;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
}

#slideshow img.burns-fadeInDown {
  animation-name: kenburnsDown, fadeIn;
  animation-duration: 10s, 1s;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
}

#slideshow img.burns-fadeOutDown {
  animation-name: kenburnsDown, fadeOut;
  animation-duration: 10s, 1s;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
}

@keyframes kenburnsRight {
    0% {
        transform: scale3d(1, 1, 1) translate(-50%, -50%);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale3d(1.1, 1.1, 1.1) translate(-40%, -40%);
    } 
}

@keyframes kenburnsLeft {
    0% {
        transform: scale3d(1.1, 1.1, 1.1) translate(-50%, -50%);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale3d(1.2, 1.2, 1.2) translate(-51%, -55%);
    } 
}

@keyframes kenburnsUp {
    0% {
        transform: scale3d(1, 1, 1) translate(-50%, -50%);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale3d(1.1, 1.1, 1.1) translate(-40%, -60%);
    } 
}

@keyframes kenburnsDown {
    0% {
        transform: scale3d(1, 1, 1) translate(-50%, -50%);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale3d(1.1, 1.1, 1.1) translate(-51%, -45%);
    } 
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
 
    100% {
        opacity: 1;
    } 
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    } 
}
/* #slideshow .burns:first-child + img ~ img  {
    z-index:-1;
} */
JS
/* Thanks to 
https://www.kirupa.com/html5/ken_burns_effect_css.htm
and 
https://codepen.io/planetgrafix/pen/erAcF

helped me figure this out */


(function(){
 var burnsClassNames = ['burns-fadeInRight', 'burns-fadeInLeft', 'burns-fadeInUp', 'burns-fadeInDown']; 
// we set the 'burns' class on the first image when the page loads
  document.getElementById('slideshow').getElementsByTagName('img')[0].className = burnsClassNames[0];
  
var slideDuration = 9000;

// this calls the kenBurns function every slideDuration
// you can increase or decrease this value to get different effects
window.setInterval(kenBurns, slideDuration);
  
// 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,
      n               = 1,
      z               = 2;
  function kenBurns() {
  var thisImage = images[i];
  if(i==numberOfImages){ 
    i = 0;
  }
  if(n == burnsClassNames.length){
    n = 0;
   /*  setTimeout(function(){ 
      thisImage.style.zIndex = -1; 
       
    }, 1000); */
       
  } 
    
   if(n == burnsClassNames.length -1){
       
        setTimeout(function(){ 
            thisImage.style.zIndex = -1; 
             }, 10000); 
         setTimeout(function(){ 
            thisImage.className = "burns-fadeOutDown";
             }, 9000); 
           
   
   }// end if
  
   
   
  images[i].style.zIndex = 1;
  
  images[i].className = burnsClassNames[n];

   
// 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 = "";
   images[numberOfImages-2].style.zIndex = -1; 
 }
 if(i===1){ 
   images[numberOfImages-1].className = "";
   images[numberOfImages-1].style.zIndex = -1;
 }
  if(i>1){  
    images[i-2].className = "";
    images[i-2].style.zIndex = -1;
   
  }
  i++;
   n++;
  }
})();
Host Instantly Drag and Drop Website Builder

 

Description

Full page ken burns slider minimum of 4 slides at this stage will update for any amount of slides later.
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID