Responsive 3D Fold Animations with jQuery and CSS3

An awesome jQuery plugin that makes use of CSS3 transforms/transitions to apply paper-folding like responsive 3D fold animations on DOM elements as you scroll the web page.

See also:

• 3D Thumbnail Paper Folding Effect
• Paperfold CSS - Fold Elements Like Paper
• Folding Up The DOM Element Like Paper with jQuery oriDomi Plugin

How to use it:

1. Load the jQuery library and the responsive_3dfoldscroll.js in your web page.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="assets/js/responsive_3dfoldscroll.js"></script>

2. Wrap your DOM elements into a container.

<div class="foldWrapper">
  <img src="demo.jpg">
</div>

3. The required CSS/CSS3 styles for the 3D fold animations.

.topHalf,
.bottomHalf {
  position: relative;
  display: block;
  z-index: 2;
  width: 100%;
  transition: none;
  overflow: hidden;
}

.topHalf {
  z-index: 3 !important;
  -webkit-transform-origin: top;
  transition: -webkit-transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in;
  position: absolute;
  top: 0px;
  transition: none;
}

.bottomHalf {
  transition: -webkit-transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in;
  -webkit-transform-origin: bottom;
  position: absolute;
  bottom: 0px;
  transition: none;
}

.bottomHalf img {
  top: -100%;
  position: absolute;
}

.foldWrapper {
  position: relative;
  vertical-align: top;
  padding: 0px;
  width: 100%;
  height: auto;
  background: rgba(0,0,0,0.1);
  z-index: 1;
  display: block;
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  transition: none;
}

#footer-top {
  position: fixed;
  width: 100%;
  height: 400px;
  top: 0px;
  left: 0px;
  display: table;
  background: #373737;
  display: none;
  z-index: 3;
}

#footer-bottom {
  position: absolute;
  width: 100%;
  height: 400px;
  bottom: 0px;
  left: 0px;
  display: table;
  background: #373737;
}

.footer-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 70px;
  color: white;
}

4. Initialize the plugin to enable the fold animations on scroll.

$( document ).ready(function() {
  window.onload=function(){
    var fold = $.fn.responsive_3dfoldscroll();
  };
});

---

This awesome jQuery plugin is developed by nickavignone. For more Advanced Usages, please check the demo page or visit the official website.