Sunny Sunny - 1 month ago 7
Javascript Question

change images smoothly by pure javascript

I want to do change background images smoothly without using JQuery because I don't know anything about jQuery and also I wanna learn it by using javascript.
So, I have done only that image changes in 1 second by javascript but I don't understand what can I do so images change smoothly like fading in, sliding, etc.
So this is my code



var index = 0,
container = document.getElementById("Imagebackground");

function autochange() {
var image = ['http://placekitten.com/1000/600', 'http://placekitten.com/1024/620', 'http://placekitten.com/960/600'];
container.style.backgroundImage = 'url(' + image[index++] + ')';
if (index > 2) {
index = 0;
}
}
window.setInterval(autochange, 1000);

#Imagebackground {
width: 100vw;
background-image: url("http://placekitten.com/1000/590");
background-size: cover;
height: 80vh;
}

<div id="Imagebackground"></div>




Zze Zze
Answer

Use CSS transitions. No javascript required.

If you need further explanation on this code, it can be found here under Demo 3: http://css3.bradshawenterprises.com/cfimg/

@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

#example {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#example img {
  position:absolute;
  left:0;
}

#example img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 8s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}
#example img:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#example img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#example img:nth-of-type(3) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#example img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
<div id="example">
  <img class="" src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg" />
  <img class="" src="http://css3.bradshawenterprises.com/images/Turtle.jpg" />
  <img class="" src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
  <img class="" src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg" />
</div>