Bountify: Paper effect/origami on bootstrap page.

https://bountify.co/paper-effect-origami-on-bootstrap-page

by social_quotient

HTML

<script src="http://rawgit.com/dmotz/oriDomi/master/oridomi.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <div class="post-container col-md-6">
        <div class="btn-container">
            <button type="button" class="btn btn-default edit">Edit</button>
        </div>
        <div class="editorholder">
            <div class="editor">
                <input type="text" class="form-control title"></input>
                <textarea class="form-control content"></textarea>
            </div>
        </div>
        <div class="postholder">
            <div class="post">
                <div class="origami">
                     <h3>Title</h3>

                    <hr>
                    <div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis dictum molestie. Phasellus molestie at odio eu pellentesque. Nullam non erat suscipit, tempor augue ac, porttitor velit. Sed quis mollis orci, sed lacinia nibh.</p>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis dictum molestie. Phasellus molestie at odio eu pellentesque. Nullam non erat suscipit, tempor augue ac, porttitor velit. Sed quis mollis orci, sed lacinia nibh.</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis dictum molestie. Phasellus molestie at odio eu pellentesque. Nullam non erat suscipit, tempor augue ac, porttitor velit. Sed quis mollis orci, sed lacinia nibh.</p>
<iframe src="http://player.vimeo.com/video/88710463" width="800" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="http://vimeo.com/88710463">Real Estate - Crime</a> from <a href="http://vimeo.com/productioncompany">Production Company Productions</a> on <a...

CSS

body {
    padding: 40px 0;
    background-color: #f3f3f3;
}
.post-container {
    position: relative;
    background-color: #fff;
    min-height: 400px;
}
.btn-container {
    text-align: center;
}
.btn {
    position:relative;
    z-index:1;
    margin-top: -20px;
    padding:10px;
}
.postholder {
    position: absolute;
    height:100%;
    width:100%;
}
.origami {
    height:100%;
}
.post {
    position: relative;
    margin: 0 15px;
    padding-right: 25px;
    top:-10px;
    height:100%;
    word-wrap: break-word;
}
.post img, iframe {
    max-width:100%;
}
.editorholder {
    position: relative;
    width:100%;
    height:100%;
    z-index:1;
}
.editor {
    position: absolute;
    display:none;
    width:100%;
    padding-top: 20px;
}
.editor input {
    margin-bottom: 20px;
}
.editor .content {
    height:100%;
}

JavaScript

var maxPanels = 16;

var $folded;
var iframeID = 0;
var iframes = [];
var minHeight = parseInt($('.post-container').css('min-height'), 10);

function getPostHeight() {
    return $('.post .content').height() + $('.post h3').height() + 100;
}

function setPostHeight(newHeight) {
    if (newHeight > minHeight) {
        $('.post-container').css('min-height', newHeight + "px");
    } else {
        $('.post-container').css('min-height', minHeight + "px");
    }
}
setPostHeight(getPostHeight());

function collectAndAddIframes(elementsToAdd, addToThis) {
    $.each(elementsToAdd, function (i, obj) {
        if (obj.tagName == 'IFRAME') {
            var tmpIframe = $('<div>')
                .width(obj.width)
                .height(obj.height)
                .attr('id', 'tmpIframe-' + iframeID);
            addToThis.append(tmpIframe);
            iframes.push(obj);
            iframeID++;
        } else if (obj.tagName == 'DIV') {
            var tmpDiv = $(obj);
            collectAndAddIframes($.parseHTML(obj.innerHTML, null, true), tmpDiv.empty());
            addToThis.append(tmpDiv);
        } else {
            addToThis.append(obj);
        }
    });
}

$('.post-container').on('click', '.edit', function () {
    $(this).removeClass('edit btn-default').addClass('save btn-success').text('Save');
    $('.btn').prop('disabled', true);

    $('.editor').height($('.post-container').height() - 200);
    $('.editor .title').val($('.post h3').text());
    $('.editor .content').val($('.post .content').html());

    var nPanels = Math.ceil($('.post-container').height() / 100);
    nPanels += nPanels % 2;
    if (nPanels > maxPanels) {
        nPanels = maxPanels;
    }

    $('.post .content iframe').attr('src', 'about:blank');

    $folded = $('.origami').oriDomi({
        touchEnabled: false,
        hPanels: nPanels,
        vPanels: 1,
        shading: 'hard'
    });

    $('.editor').delay(150).slideDown(600);

    $folded.oriDomi('accordion', -Math.acos((100 -...