Fliplet Sales Demo modules

by tonytlwu

HTML

<div class="brick">
    <div class="brick-content">
        <h3>Lorem ipsum dolor amet</h3>
        <p>Lorem ipsum dolor amet</p>
    </div>
</div>

<div class="panels fly-in">
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</div>

<ol class="nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

CSS

body {
    margin: 0;
}

.brick {
    background: rgba(255,0,0,0.4);
}

.brick-content {
    border-color: rgba(255,0,0,0.4);
}

.brick {
    display: inline-block;
    height: 100px;
    box-sizing: border-box;
    position: relative;
    left: 50px;
}

.brick:before,
.brick:after{
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    background: inherit;
    z-index: -1;
}

.brick:before {
    top: 0px;
    left: -50px;
}
.brick:after {
    bottom: 0;
    right: -50px;
}

.brick-content:before,
.brick-content:after {
    background: inherit;
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    z-index: -1;
}

.brick-content:before {
    border-width: 0 50px 50px 0;
    border-right-color: inherit;
    top: 50px;
    left: -50px;
}

.brick-content:after {
    border-width: 50px 0 0 50px;
    border-left-color: inherit;
    bottom: 50px;
    right: -50px;
}

.brick-content > h3 {
    text-indent: -50px;
    padding-left: 15px;
    padding-right: 10px;
}

.panels {
    width: 45%;
    box-sizing: border-box;
    margin-top: 20px;
    -webkit-perspective: 350px;
}

.panels > p {
    background: rgba(255,0,0,0.4);
    margin: 0;
    padding: 10px;
    border-top: 1px solid rgba(255,0,0,0.6);
    -webkit-transition: all 600ms ease, opacity 300ms ease;
    transition: all 600ms ease, opacity 300ms ease;
    transform-origin: 50% 50% -50px;
    -webkit-animation-name: flyIn;
    -webkit-animation-duration: 600ms;
    -webkit-animation-fill-mode: both;
    animation-name: flyIn;
    animation-duration: 600ms;
    animation-fill-mode: both;
}

.panels > p:first-child {
    border-top: none;
}

@-webkit-keyframes flyIn {
    0% {
        -webkit-transform: rotateX( -180deg );
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes flyIn {
    0% {
        transform:...

JavaScript

var highlightTimeout;
function highlightNext() {
    var len = $('.nav li').length;
    if (!$('.nav li.active').length) {
        $('.nav li').eq(0).addClass('active');
    } else {
        if (!$('.nav li').eq(len-1).hasClass('active')) {
            $('.nav li.active').next().addClass('active').end().removeClass('active');
        } else {
            $('.nav li.active').removeClass('active').parent().find('li:first-child').addClass('active');
        }
    }
    highlightTimeout = setTimeout(highlightNext, 650);
}

$('.nav').on('click', 'li', function(){
    clearTimeout(highlightTimeout);
    $(this).addClass('active').siblings().removeClass('active');
});

highlightTimeout = setTimeout(highlightNext, 800);