Fullscreen background slideshow

Fullscreen background slideshow.markdown

Fullscreen background slideshow

So simple it hurts...

A Pen by Antonija Šimić on CodePen.

License.

index.html

<div class="bg-wrapper">
  <div class="bg-img active"></div>
  <div class="bg-img"></div>
  <div class="bg-img"></div>
  <div class="bg-img"></div>
</div>

<a href="http://codepen.io/tonkec" class="ua" target="_blank">
  <i class="fa fa-user"></i></a>

script.js

$(document).ready(function(){
     var imgs = $(".bg-img");
   i = -1;
   (function f() {
     i = (i + 1) % imgs.length;

     $(imgs).not(imgs[i]).removeClass("slide-active")
     $(imgs[i]).addClass("slide-active")
     setTimeout(f, 7000);
   })();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.css

/* IMGS ARE NOT MINE */

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.bg-img {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: all 4s ease-in-out;
  -moz-transition: all 4s ease-in-out;
  -ms-transition: all 4s ease-in-out;
  -o-transition: all 4s ease-in-out;
  transition: all 4s ease-in-out;
  
    -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1)
}

.bg-img:first-child {
  background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .2)), url(http://p2cdn4static.sharpschool.com/UserFiles/Servers/Server_3200643/Image/ButterflyonYellowFlower.jpg);
}

.bg-img:nth-child(2) {
  background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .2)), url(http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg);
}

.bg-img:nth-child(3) {
  background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .2)), url(http://newflowerwallpaper.com/download/blue-flowers-images-and-wallpapers/blue-flowers-images-and-wallpapers-1.jpg);
}

.bg-img:nth-child(4) {
  background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .2)), url(https://newevolutiondesigns.com/images/freebies/flowers-wallpaper-24.jpg);
}

.slide-active {
  opacity: 1;
  -webkit-transition: all 4s ease-in-out;
  -moz-transition: all 4s ease-in-out;
  -ms-transition: all 4s ease-in-out;
  -o-transition: all 4s ease-in-out;
  transition: all 4s ease-in-out;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}


.ua {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #fff;
  font-size: 2em;
}

.fa {
  color: #fff;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

.ua:hover .fa {
   color:#1ba2e7;
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}