THTR - design - book

by PhilQ

HTML

<div class="body"></div>
<div id="sketchbook">
    <div class="leftwrapper"></div>
    <div class="rightwrapper">
        <div>pg10</div>
        <div>pg9</div>
        <div>pg8</div>
        <div>pg7</div>
        <div>pg6</div>
        <div>pg5</div>
        <div>pg4</div>
        <div>pg3</div>
        <div>pg2</div>
        <div>pg1</div>
    </div>
</div>

CSS

*, *:before, *:after {
    margin: 0px; padding: 0px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}

.body {
    display: inline-block;
    position: fixed;
    z-index: 0;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #2d1d16; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #2d1d16 3%, #000000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(3%,#2d1d16), color-stop(100%,#000000));
    background: -webkit-radial-gradient(center, ellipse cover,  #2d1d16 3%,#000000 100%);
    background: -o-radial-gradient(center, ellipse cover,  #2d1d16 3%,#000000 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #2d1d16 3%,#000000 100%);
    background: radial-gradient(ellipse at center,  #2d1d16 3%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d1d16', endColorstr='#000000',GradientType=1 );
}

#sketchbook {
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 206px;
    perspective: 1200px;
    perspective-origin: 0% 50%;
    transform: rotate(-5deg);
    transform-origin: 0% 0%;
}
#sketchbook:before {
    content: "";
    position: absolute;
    z-index: 4;
    top: -50%;
    bottom: 50%;
    left: -51%;
    right: 49%;
    left: -41%;
    right: 59%;
    left: 0%;
    right: 100%;
    width: 1px;
    background-color: rgba(0,0,0, 0);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0, 0);
    transition: all 1s ease-in;
}
#sketchbook.turn:before {
    left: 0%;
    right: 100%;
    box-shadow: 0px 0px 30px 5px rgba(0,0,0, 1);
    transition: all 1s ease-out;
}
#sketchbook .leftwrapper, #sketchbook .rightwrapper {
    position: absolute;
}

#sketchbook > div {
    width: 50%;
    height: 100%;
}
#sketchbook > div > div...

JavaScript

var flippingPage = false;
$(document).ready(function(){

    $("#sketchbook > div > div").click(function(ev){
        if(!flippingPage) {
            flippingPage = true;
            $(this).add($(this).prev()).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
                $(this).unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
                if($(this).parent().hasClass("leftwrapper")) {
                    $nextPar = $(".rightwrapper");
                } else {
                    $nextPar = $(".leftwrapper");
                }
                $nextPar.append($(this));
                $(this).delay(0).queue(function( n ) {
                    $("#sketchbook").removeClass("turn");
                    $(this).removeClass("turn").toggleClass("up down").dequeue().bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
                        flippingPage = false;
                        $(this).removeClass("down").unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
                    });
                });
            }).add("#sketchbook").addClass("turn up");
        }
    });
    
});