бигборд 2

by avgustre

HTML

<div class="billbord">
  <div class="bord-main">
    <img src="http://demo.marcofolio.net/rotating_billboard/images/billboard.png" alt="">
  </div>
  <div class="bord-wrap">
    <div class="bord-inner">
      <div class="bordad">
        <div id="bordad_1" class="bordad-inner bordad_1">
          <img class="slice_1" />
          <img class="slice_2" />
          <img class="slice_3" />
          <img class="slice_4" />
          <img class="slice_5" />
          <img class="slice_6" />
          <img class="slice_7" />
          <img class="slice_8" />
          <img class="slice_9" />
          <img class="slice_10" />
          <img class="slice_11" />
          <img class="slice_12" />
          <img class="slice_13" />
          <img class="slice_14" />
          <img class="slice_15" />
          <img class="slice_16" />
          <img class="slice_17" />
          <img class="slice_18" />
          <img class="slice_19" />
          <img class="slice_20" />
        </div>
        <div id="bordad_2" class="bordad-inner bordad_2">
          <img class="slice_1" />
          <img class="slice_2" />
          <img class="slice_3" />
          <img class="slice_4" />
          <img class="slice_5" />
          <img class="slice_6" />
          <img class="slice_7" />
          <img class="slice_8" />
          <img class="slice_9" />
          <img class="slice_10" />
          <img class="slice_11" />
          <img class="slice_12" />
          <img class="slice_13" />
          <img class="slice_14" />
          <img class="slice_15" />
          <img class="slice_16" />
          <img class="slice_17" />
          <img class="slice_18" />
          <img class="slice_19" />
          <img class="slice_20" />
        </div>
        <div id="bordad_3" class="bordad-inner bordad_3">
          <img class="slice_1" />
          <img class="slice_2" />
          <img class="slice_3" />
          <img class="slice_4" />
          <img class="slice_5" />
         ...

SCSS

.billbord {
  position: relative;
  height: 480px;
  margin-top: 5%;
}

.bord-main {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}

.bord-wrap {
  position: absolute;
  top: 30px;
  left: 38px;
  width: 87%;
  height: 55%;
}

.bord-inner {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
}

.bordad {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #333;
  perspective: 800px;
  img {
    width: 5%;
    height: 100%;
    position: absolute;
  }
}

.slice_1 {left: 0%;}
.slice_2 {left: 5%;}
.slice_3 {left: 10%;}
.slice_4 {left: 15%;}
.slice_5 {left: 20%;}
.slice_6 {left: 25%;}
.slice_7 {left: 30%;}
.slice_8 {left: 35%;}
.slice_9 {left: 40%;}
.slice_10 {left: 45%;}
.slice_11 {left: 50%;}
.slice_12 {left: 55%;}
.slice_13 {left: 60%;}
.slice_14 {left: 65%;}
.slice_15 {left: 70%;}
.slice_16 {left: 75%;}
.slice_17 {left: 80%;}
.slice_18 {left: 85%;}
.slice_19 {left: 90%;}
.slice_20 {left: 95%;}

#bordad_1 img {
    background: url(http://demo.marcofolio.net/rotating_billboard/images/coffee.png);
    
  animation: bordrotate-1 16s infinite;
}
#bordad_2 img {
    background: url(http://demo.marcofolio.net/rotating_billboard/images/cocktail.png);
  opacity: 0;
    
  animation: bordrotate-2 16s infinite;
}
#bordad_3 img {
    background: url(http://demo.marcofolio.net/rotating_billboard/images/shotglass.png);
  opacity: 0;
    
  animation: bordrotate-3 16s infinite;
}
#bordad_4 img {
    background: url(http://demo.marcofolio.net/rotating_billboard/images/cocktail.png);
  opacity: 0;
    
  animation: bordrotate-4 16s infinite;
}

.bordad-inner > img {
}

@keyframes bordrotate-1 {
  0% {
    transform: rotateY(0);
    opacity: 1;
  }
  8.25% {
    transform: rotateY(180deg);
  }
  24.9% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    transform: rotateY(180deg);
    opacity: 0;
  }
}

@keyframes bordrotate-2 {
  0% {
    opacity: 0;
  }
  24.9% {
    opacity: 0;
  }
  25% {
   ...

JavaScript

/*  // слайдер бигборда
    $('.bordad-inner > img').each(function(i,e){
        rotate($(this),400,1000,i);
    });
    
    function rotate(elem1,speed,timeout,i){
      elem1.animate({'marginLeft':'5%','width':'0px'},speed,function(){
        var other;
        if(elem1.parent().attr('id') == 'bordad_1')
          other = $('#bordad_2').children('img').eq(i);
        else if(elem1.parent().attr('id') == 'bordad_2')
          other = $('#bordad_3').children('img').eq(i);
        else
          other = $('#bordad_1').children('img').eq(i);
          other.animate({'marginLeft':'0px','width':'5%'},speed,function(){
          var f = function() { rotate(other,speed,timeout,i) };
          setTimeout(f,timeout);
        });
      });
    } */