rotating images css for effy

In this example below you will see how to do a rotating images css for effy with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>rotating images css for effy</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="sect-banner">
  <p> you put the first image on 0% and the last needs to be the same image at 100%</p>
 <!--List items for bg images -->

 <!-- Vertically Center Content -->
  <div class="banner_bg">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  </div>
  

</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mush_el/rotating-images-css-for-effy-OmqVvN */
p {
  color: #222;
  text-align: left;
  position: fixed;
  left: 0;
  padding: 10px;
  width: 25%;
}
/*-- Vertically center --*/
ul.kf-slider li {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  z-index: 0;
  opacity: 0;
  animation: fade-out 12s infinite both;
  background-image: url("http://djnicerack.com/images/glitter1.png");
}
@keyframes fade-out {
  33% {
    opacity: 1;
  }
  66% {
    opacity: 0.5;
  }
}
/*-- Image 2 --*/
li:nth-child(2) {
  background-image: url("http://djnicerack.com/images/glitter2.png");
  /*-- Animation delay: 3s --*/
  animation: delay(3s);
}
li:nth-child(3) {
  background-image: url("http://djnicerack.com/images/glitter3.png");
  animation: delay(6s);
}
li:nth-child(4) {
  background-image: url("http://djnicerack.com/images/glitter4.png");
  animation: delay(9s);
}
.banner_bg {
  height: 100%;
  width: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  z-index: 0;
  animation: rotator ease-in-out 9s both infinite;
  margin: 10px auto;
}
/* banner that slides not fades */
div {
  animation-name: move;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  -moz-animation-name: move;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-delay: 0.5s;
  -moz-animation-iteration-count: 2;
  -moz-animation-direction: alternate;
  -webkit-animation-name: move;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0.5s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
}
/* This is the animation code. */
@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
@-moz-keyframes move {
  from {
    -moz-transform: translateX(0);
  }
  to {
    -moz-transform: translateX(100px);
  }
}
@-webkit-keyframes move {
  from {
    -webkit-transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(100px);
  }
}
/*@keyframes rotator{
  0% {
    background-image: url("http://www.effyblue.com/wp-content/uploads/2016/10/effyblue_fullscreen-1-dark.png");
  }
  25% {
    background-image: url("http://www.effyblue.com/wp-content/uploads/2017/02/is-it-for-you-book-cover.png");
  }
  50% {
    background-image: url("http://www.effyblue.com/wp-content/uploads/2017/02/ppe-book.png");
  }
  75% {
    background-image: url("http://www.effyblue.com/wp-content/uploads/2017/03/10-ways-book-cover.png");
  }
  100% {
    background-image: url("http://www.effyblue.com/wp-content/uploads/2016/10/effyblue_fullscreen-1-dark.png");
  }
}*/
.sect-banner {
  display: table;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  height: 100vh;
  color: rgba(255, 255, 255, 0.9);
}

Comments