CSS Only Banner Rotation

In this example below you will see how to do a CSS Only Banner Rotation with some HTML / CSS and Javascript

Using CSS animations to auto rotate banners.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>CSS Only Banner Rotation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      * {
  box-sizing: border-box;
}

html,
body {
  font-size: 10px;
}

#banners {
  height: 10rem;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}
#banners .banner {
  animation: bannerOne 15s linear infinite;
  height: 10rem;
  position: absolute;
  width: 100%;
}
#banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
  color: #fff;
  font-size: 2rem;
  padding: 1rem;
  margin: 0;
}
#banners .banner.one h1 span, #banners .banner.two h1 span, #banners .banner.three h1 span {
  display: block;
}
#banners .banner.one .image, #banners .banner.two .image, #banners .banner.three .image {
  height: 100%;
  position: absolute;
  top: 0;
  width: 50%;
}
#banners .banner.one {
  background: red;
}
#banners .banner.one h1 {
  text-align: right;
  width: 50%;
}
#banners .banner.one .image {
  background: url("http://lorempixel.com/g/400/400/technics/2") no-repeat right center;
  background-size: 100%;
  right: 0;
}
#banners .banner.two {
  animation-name: bannerTwo;
  background: blue;
}
#banners .banner.two h1 {
  text-align: center;
}
#banners .banner.two .image {
  background: url("http://lorempixel.com/g/1000/200/technics/4") no-repeat center bottom;
  background-size: 100%;
  top: 50%;
  height: 50%;
  width: 100%;
}
#banners .banner.three {
  animation-name: bannerThree;
  background: green;
}
#banners .banner.three h1 {
  float: right;
  width: 50%;
}
#banners .banner.three .image {
  background: url("http://lorempixel.com/g/400/400/technics/5") no-repeat left center;
  background-size: 100%;
  left: 0;
}

@keyframes bannerOne {
  0% {
    left: 0;
  }
  31% {
    left: 0;
  }
  34% {
    left: -100%;
  }
  97% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes bannerTwo {
  0% {
    left: 100%;
  }
  31% {
    left: 100%;
  }
  34% {
    left: 0;
  }
  64% {
    left: 0;
  }
  67% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@keyframes bannerThree {
  0% {
    left: 100%;
  }
  64% {
    left: 100%;
  }
  67% {
    left: 0;
  }
  97% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
/* smallest */
/*@media (max-width: 320px;) {
  #banners {
    height: 10rem;
    .banner {
      &.one,
      &.two,
      &.three {
        height: 10rem;
        h1 {
          font-size: 2rem;
        }
      }
    }
  }
}*/
/* small */
@media (min-width: 321px) and (max-width: 728px) {
  #banners {
    height: 12rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 12rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 3rem;
    padding: 1.5rem;
  }
}
/* medium */
@media (min-width: 729px) and (max-width: 960px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}
/* large */
@media (min-width: 961px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <section id="banners">
  <div class="banner one">
    <h1>Banner One</h1>
    <div class="image"></div>
  </div>
  <div class="banner two">
    <h1>Second Banner</h1>
    <div class="image"></div>
  </div>
  <div class="banner three">
    <h1>Banner <span>The Third</span></h1>
    <div class="image"></div>
  </div>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/brandonkennedy/css-only-banner-rotation-aAbvm */
* {
  box-sizing: border-box;
}

html,
body {
  font-size: 10px;
}

#banners {
  height: 10rem;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}
#banners .banner {
  animation: bannerOne 15s linear infinite;
  height: 10rem;
  position: absolute;
  width: 100%;
}
#banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
  color: #fff;
  font-size: 2rem;
  padding: 1rem;
  margin: 0;
}
#banners .banner.one h1 span, #banners .banner.two h1 span, #banners .banner.three h1 span {
  display: block;
}
#banners .banner.one .image, #banners .banner.two .image, #banners .banner.three .image {
  height: 100%;
  position: absolute;
  top: 0;
  width: 50%;
}
#banners .banner.one {
  background: red;
}
#banners .banner.one h1 {
  text-align: right;
  width: 50%;
}
#banners .banner.one .image {
  background: url("http://lorempixel.com/g/400/400/technics/2") no-repeat right center;
  background-size: 100%;
  right: 0;
}
#banners .banner.two {
  animation-name: bannerTwo;
  background: blue;
}
#banners .banner.two h1 {
  text-align: center;
}
#banners .banner.two .image {
  background: url("http://lorempixel.com/g/1000/200/technics/4") no-repeat center bottom;
  background-size: 100%;
  top: 50%;
  height: 50%;
  width: 100%;
}
#banners .banner.three {
  animation-name: bannerThree;
  background: green;
}
#banners .banner.three h1 {
  float: right;
  width: 50%;
}
#banners .banner.three .image {
  background: url("http://lorempixel.com/g/400/400/technics/5") no-repeat left center;
  background-size: 100%;
  left: 0;
}

@keyframes bannerOne {
  0% {
    left: 0;
  }
  31% {
    left: 0;
  }
  34% {
    left: -100%;
  }
  97% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes bannerTwo {
  0% {
    left: 100%;
  }
  31% {
    left: 100%;
  }
  34% {
    left: 0;
  }
  64% {
    left: 0;
  }
  67% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}
@keyframes bannerThree {
  0% {
    left: 100%;
  }
  64% {
    left: 100%;
  }
  67% {
    left: 0;
  }
  97% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
/* smallest */
/*@media (max-width: 320px;) {
  #banners {
    height: 10rem;
    .banner {
      &.one,
      &.two,
      &.three {
        height: 10rem;
        h1 {
          font-size: 2rem;
        }
      }
    }
  }
}*/
/* small */
@media (min-width: 321px) and (max-width: 728px) {
  #banners {
    height: 12rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 12rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 3rem;
    padding: 1.5rem;
  }
}
/* medium */
@media (min-width: 729px) and (max-width: 960px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}
/* large */
@media (min-width: 961px) {
  #banners {
    height: 20rem;
  }
  #banners .banner.one, #banners .banner.two, #banners .banner.three {
    height: 20rem;
  }
  #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 {
    font-size: 6rem;
    padding: 2rem;
  }
}

Comments