Flip Transition

flip-transition.markdown

Flip Transition

A Pen by Rick Daalhuizen on CodePen.

License.

index.html

<div class="page" id="page-1"></div>
<div class="page" id="page-2"></div>
<div class="page" id="page-3"></div>
<div class="page" id="page-4"></div>
<div class="page" id="page-5"></div>
<div class="page" id="page-6"></div>

script.js

var to = false;
var flipN = 0;

function flip()
{
  flipN++;
  if(flipN > 6) {
    clearTimeout(to);
  }
  
  $('#page-' + (flipN+1)).css('display', 'block');
  $('#page-' + flipN).css('animation-name', 'flip');
  $('#page-' + flipN).css('z-index', flipN + 10);
  
  to = setTimeout('flip()', 7000);
}

$(document).ready(function(){
  for(var i=2; i<=6; i++) {
    $('#page-' + i).css('display', 'none');
  }
  flip();  
});

scripts

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

style.scss

$animation-duration: 3s;

@mixin pageBg($bg-color, $bg-image) {
    width: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-color: $bg-color;
    background-image: url($bg-image);
}

.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ddd;
    text-align: center;
    font-size: 18em;
    color: #aaa;
    transform-origin: left center;
    animation-duration: $animation-duration;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

#page-1 {
    @include pageBg(#fdc,'https://i.ytimg.com/vi/OnHvt_5Hw40/maxresdefault.jpg');
}

#page-2 {
    @include pageBg(#cfc, 'http://static3.gamespot.com/uploads/original/1365/13658182/3106458-nomanssky_lushplanet_1470673214.png');
}

#page-3 {
    @include pageBg(#ccf, 'https://secure.img-shopto.net/ShopToMedia/images/screenshots//PS4NO01/C.jpg');
}

#page-4 {
    @include pageBg(#ffc, 'http://cdn.wccftech.com/wp-content/uploads/2016/08/no-mans-sky-animals.jpg');
}

#page-5 {
    @include pageBg(#fcf, "http://no-mans-sky.com/press/no_man's_sky/images/SunsetBots.png");
}

#page-6 {
    @include pageBg(#ccc, 'http://cdn.wccftech.com/wp-content/uploads/2016/08/no-mans-sky-animals.jpg');
}

@keyframes flip {
    from {
        transform: rotateY(0deg)
    }
    to {
        transform: rotateY(-180deg)
    }
}