logo DevAnswer - Developers Answer

Automatic Slideshow with Rotation

3rd August

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.untitled {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-animation: rotateHue infinite 20s linear;
          animation: rotateHue infinite 20s linear;
  -webkit-animation-delay: 0.625s;
          animation-delay: 0.625s;
}
@-webkit-keyframes rotateHue {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  20% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  25% {
    -webkit-filter: hue-rotate(90deg);
            filter: hue-rotate(90deg);
  }
  45% {
    -webkit-filter: hue-rotate(90deg);
            filter: hue-rotate(90deg);
  }
  50% {
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
  70% {
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
  75% {
    -webkit-filter: hue-rotate(270deg);
            filter: hue-rotate(270deg);
  }
  95% {
    -webkit-filter: hue-rotate(270deg);
            filter: hue-rotate(270deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
@keyframes rotateHue {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  20% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  25% {
    -webkit-filter: hue-rotate(90deg);
            filter: hue-rotate(90deg);
  }
  45% {
    -webkit-filter: hue-rotate(90deg);
            filter: hue-rotate(90deg);
  }
  50% {
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
  70% {
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
  75% {
    -webkit-filter: hue-rotate(270deg);
            filter: hue-rotate(270deg);
  }
  95% {
    -webkit-filter: hue-rotate(270deg);
            filter: hue-rotate(270deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
.untitled__shutters {
  position: absolute;
  height: 150vmax;
  width: 150vmax;
  left: calc(50% - 75vmax);
  top: calc(50% - 75vmax);
  pointer-events: none;
  z-index: 2;
  -webkit-animation: rotateFrame 10s linear infinite;
          animation: rotateFrame 10s linear infinite;
}
@-webkit-keyframes rotateFrame {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@keyframes rotateFrame {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
.untitled__shutters:before, .untitled__shutters:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  background-color: #b3401a;
  pointer-events: auto;
}
.untitled__shutters:before {
  bottom: 50%;
  -webkit-animation: openTop 5s infinite;
          animation: openTop 5s infinite;
}
@-webkit-keyframes openTop {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    -webkit-transform: translate3d(-50%, -65vmax, 0);
            transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    -webkit-transform: translate3d(-50%, -65vmax, 0);
            transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
@keyframes openTop {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    -webkit-transform: translate3d(-50%, -65vmax, 0);
            transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    -webkit-transform: translate3d(-50%, -65vmax, 0);
            transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
.untitled__shutters:after {
  top: 50%;
  -webkit-animation: openBottom 5s infinite;
          animation: openBottom 5s infinite;
}
@-webkit-keyframes openBottom {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    -webkit-transform: translate3d(-50%, 65vmax, 0);
            transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    -webkit-transform: translate3d(-50%, 65vmax, 0);
            transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
@keyframes openBottom {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    -webkit-transform: translate3d(-50%, 65vmax, 0);
            transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    -webkit-transform: translate3d(-50%, 65vmax, 0);
            transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
.untitled__slides {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #b3401a;
}
.untitled__slide {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-animation: showHideSlide infinite 20s steps(1);
          animation: showHideSlide infinite 20s steps(1);
}
@-webkit-keyframes showHideSlide {
  0% {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  25% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}
@keyframes showHideSlide {
  0% {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  25% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}
.untitled__slide:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.untitled__slide:nth-child(1) .untitled__slideBg {
  background-image: url(http://devanswer.com/codes/files/slideshow-1.jpg);
}
.untitled__slide:nth-child(2) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.untitled__slide:nth-child(2) .untitled__slideBg {
  background-image: url(http://devanswer.com/codes/files/slideshow-2.jpg);
}
.untitled__slide:nth-child(3) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
}
.untitled__slide:nth-child(3) .untitled__slideBg {
  background-image: url(http://devanswer.com/codes/files/slideshow-3.jpg);
}
.untitled__slide:nth-child(4) {
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
}
.untitled__slide:nth-child(4) .untitled__slideBg {
  background-image: url(http://devanswer.com/codes/files/slideshow-4.jpg);
}
.untitled__slideBg {
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-color: #b3401a;
  background-blend-mode: hard-light;
  opacity: 1;
  z-index: -1;
  -webkit-animation: bgInOut 5s infinite;
          animation: bgInOut 5s infinite;
}
@-webkit-keyframes bgInOut {
  0% {
    -webkit-transform: rotate(-45deg) scale(1.1);
            transform: rotate(-45deg) scale(1.1);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  33% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  66% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  100% {
    -webkit-transform: rotate(45deg) scale(0.9);
            transform: rotate(45deg) scale(0.9);
  }
}
@keyframes bgInOut {
  0% {
    -webkit-transform: rotate(-45deg) scale(1.1);
            transform: rotate(-45deg) scale(1.1);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  33% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  66% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  100% {
    -webkit-transform: rotate(45deg) scale(0.9);
            transform: rotate(45deg) scale(0.9);
  }
}
.untitled__slideContent {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  color: white;
  font-family: "Abril Fatface", sans-serif;
  line-height: 0.8;
  letter-spacing: -0.025em;
  z-index: 2;
  opacity: 1;
  text-shadow: 0 0 0.5em rgba(179, 64, 26, 0.25);
  mix-blend-mode: lighten;
}
.untitled__slideContent span {
  display: block;
  font-size: 15vmin;
}

.button {
  font-family: 'Roboto Mono', sans-serif;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 2vmin;
  display: inline-block;
  position: relative;
  border: 3px solid white;
  box-shadow: -0.5vmin 0.5vmin 0 rgba(255, 255, 255, 0.5);
  background: transparent;
  margin-top: 5vmin;
  mix-blend-mode: lighten;
  color: white;
  padding: 2vmin 2vmin 1.8vmin 2vmin;
  letter-spacing: 0.1em;
  text-shadow: none;
  line-height: 1;
  -webkit-transform: translate3d(0.5vmin, -0.5vmin, 0);
          transform: translate3d(0.5vmin, -0.5vmin, 0);
  transition: all 100ms linear;
}
.button:hover {
  -webkit-transform: translate3d(1vmin, -1vmin, 0);
          transform: translate3d(1vmin, -1vmin, 0);
  box-shadow: -1vmin 1vmin 0 rgba(255, 255, 255, 0.5);
  background: white;
  color: black;
}
.button:active {
  -webkit-transform: translate3d(0px, 0px, 0);
          transform: translate3d(0px, 0px, 0);
  box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.5);
}
</style>

</head>
<body>
<div class="untitled">
<div class="untitled__slides">
<div class="untitled__slide">
<div class="untitled__slideBg"></div>
<div class="untitled__slideContent">
<span>Developers</span>
<span>Scripts</span>
<a class="button" href="http://devanswer.com" target="/black">DevAnswer.com</a>
</div>
</div>
<div class="untitled__slide">
<div class="untitled__slideBg"></div>
<div class="untitled__slideContent">
<span>Developers</span>
<span>Codes</span>
<a class="button" href="http://devanswer.com" target="/black">DevAnswer.com</a>
</div>
</div>
<div class="untitled__slide">
<div class="untitled__slideBg"></div>
<div class="untitled__slideContent">
<span>Developers</span>
<span>Tutorials</span>
<a class="button" href="http://devanswer.com" target="/black">DevAnswer.com</a>
</div>
</div>
<div class="untitled__slide">
<div class="untitled__slideBg"></div>
<div class="untitled__slideContent">
<span>Developers</span>
<span>Answers</span>
<a class="button" href="http://devanswer.com" target="/black">DevAnswer.com</a>
</div>
</div>
</div>
<div class="untitled__shutters"></div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Hind:300,400,700|Roboto+Mono:400,700" rel="stylesheet"><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>



Other Codes

Circular Slideshow


Circular Slideshow

Circular slider with images and text.
Slider with Overlay Transition Effect


Slider with Overlay Transition Effect

An slider with interesting transition effect and text on the images.
Slideshow with Bar Effect


Slideshow with Bar Effect

Slideshow with automatic bar effect on slide change.
Text and Image Combination Slider


Text and Image Combination Slider

Slider with combination of texts and images.