├── .DS_Store
├── LICENSE
├── README.md
├── includes
    ├── .DS_Store
    ├── css
    │   └── global.css
    ├── images
    │   ├── p1.jpg
    │   ├── p2.jpg
    │   ├── p3.jpg
    │   ├── p4.jpg
    │   ├── p5.jpg
    │   └── p6.jpg
    └── js
    │   ├── responsive_3dfoldscroll.js
    │   └── responsive_3dfoldscroll.min.js
└── index.php


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickavignone/responsive_3dfoldscroll/f54268ec003d2216caec702ed96330b96cc4c452/.DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 nickavignone
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | responsive_3dfoldscroll
 2 | =======================
 3 | [See it in action](http://nickavi.com/responsive_3dfoldscroll/)
 4 | 
 5 | Example:
 6 | `````javascript
 7 | $( document ).ready(function() {
 8 |   var fold = $.fn.responsive_3dfoldscroll({
 9 |     animationLength : 1500
10 |   });
11 | });
12 | `````
13 | 


--------------------------------------------------------------------------------
/includes/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickavignone/responsive_3dfoldscroll/f54268ec003d2216caec702ed96330b96cc4c452/includes/.DS_Store


--------------------------------------------------------------------------------
/includes/css/global.css:
--------------------------------------------------------------------------------
  1 | /* Global */
  2 | 
  3 | * {
  4 | text-rendering: optimizeLegibility;
  5 | }
  6 | 
  7 | body, html { 
  8 | 	width: 100%; 
  9 | 	background: lightblue;
 10 | 	font-family: "Open-Sans", Helvetica, Arial, sans-serif;
 11 | 	color: #84888c;
 12 | 	font-size: 14px;
 13 | 	margin:0px;
 14 | }
 15 | 
 16 | .clearfix::after {
 17 | 	content: ".";
 18 | 	display: block;
 19 | 	height: 0;
 20 | 	clear: both;
 21 | 	visibility: hidden;
 22 | 	font-size:0;
 23 | }
 24 | 
 25 | img{
 26 | 	width:100%;
 27 | 	height:auto;
 28 | }
 29 | 
 30 | #container{
 31 | 	z-index: 2;
 32 | 	width:100%;
 33 | 	position:fixed; 
 34 | 	top:0px;
 35 | 	left:0px;
 36 | }
 37 | #page{
 38 | 	position: relative;
 39 | }
 40 | /* ********************************************************************** */
 41 | /* Folds */
 42 | /* ********************************************************************** */
 43 | .topHalf,
 44 | .bottomHalf {
 45 | 	position: relative;
 46 | 	display: block;
 47 | 	z-index: 2;
 48 | 	width:100%;
 49 | 	transition:none;
 50 | 	overflow: hidden;
 51 | }
 52 | 
 53 | .topHalf{
 54 | 	z-index: 3 !important;
 55 | 	-webkit-transform-origin:top;
 56 | 	transition: -webkit-transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in;
 57 | 	position: absolute;
 58 | 	top:0px;
 59 | 	transition:none;
 60 | }
 61 | .bottomHalf{
 62 | 	transition: -webkit-transform 500ms cubic-bezier(0.000, 0.450, 1.000, 0.950), background-color 500ms ease-in;
 63 | 	-webkit-transform-origin:bottom;
 64 | 	position: absolute;
 65 | 	bottom:0px;
 66 | 	
 67 | 	transition:none;
 68 | }
 69 | .bottomHalf img{
 70 | 	top:-100%;
 71 | 	position: absolute;
 72 | }
 73 | .foldWrapper {
 74 | 	position:relative;
 75 | 	vertical-align: top;
 76 | 	padding: 0px;
 77 | 	width: 100%; height: auto;
 78 | 	background: rgba(0,0,0,0.1);
 79 | 	z-index: 1;
 80 | 	display: block;
 81 | 	overflow:hidden;
 82 | 	-webkit-transform-style: preserve-3d;
 83 | 	-webkit-perspective: 1000px;
 84 | 	transition:none;
 85 | }
 86 | #footer-top{
 87 | 	position: fixed;
 88 | 	width:100%;
 89 | 	height:400px;
 90 | 	top:0px;
 91 | 	left:0px;
 92 | 	display: table;
 93 | 	background:#373737;
 94 | 	display:none;
 95 | 	z-index:3;
 96 | }
 97 | #footer-bottom{
 98 | 	position: absolute;
 99 | 	width:100%;
100 | 	height:400px;
101 | 	bottom:0px;
102 | 	left:0px;
103 | 	display: table;
104 | 	background:#373737;
105 | }
106 | .footer-inner{
107 | 	display: table-cell;
108 | 	vertical-align: middle;
109 | 	text-align: center;
110 | 	font-size:70px;
111 | 	color:white;
112 | }
113 | 


--------------------------------------------------------------------------------
/includes/images/p1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickavignone/responsive_3dfoldscroll/f54268ec003d2216caec702ed96330b96cc4c452/includes/images/p1.jpg


--------------------------------------------------------------------------------
/includes/images/p2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickavignone/responsive_3dfoldscroll/f54268ec003d2216caec702ed96330b96cc4c452/includes/images/p2.jpg


--------------------------------------------------------------------------------
/includes/images/p3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickavignone/responsive_3dfoldscroll/f54268ec003d2216caec702ed96330b96cc4c452/includes/images/p3.jpg


--------------------------------------------------------------------------------
/includes/images/p4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickavignone/responsive_3dfoldscroll/f54268ec003d2216caec702ed96330b96cc4c452/includes/images/p4.jpg


--------------------------------------------------------------------------------
/includes/images/p5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickavignone/responsive_3dfoldscroll/f54268ec003d2216caec702ed96330b96cc4c452/includes/images/p5.jpg


--------------------------------------------------------------------------------
/includes/images/p6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickavignone/responsive_3dfoldscroll/f54268ec003d2216caec702ed96330b96cc4c452/includes/images/p6.jpg


--------------------------------------------------------------------------------
/includes/js/responsive_3dfoldscroll.js:
--------------------------------------------------------------------------------
  1 | (function($) {
  2 | 	$.fn.responsive_3dfoldscroll = function(options) {
  3 | 		options = $.extend({
  4 | 			'animationLength': 1500,
  5 | 			'foldHolder': 'foldWrapper'
  6 | 		}, options);
  7 | 		
  8 | 		var foldingElements = $("."+options.foldHolder);
  9 | 		var folds = [];
 10 | 		init();
 11 | 		function fold (element, i, hh){
 12 | 			this.element = element;
 13 | 			this.i = i;
 14 | 			this.hh = hh;
 15 | 			
 16 | 								
 17 | 		}
 18 | 		function init(){
 19 | 			var foldhtml = "";
 20 | 			$.each(foldingElements, function(i, element){
 21 | 				var hh = $(element).find("img").height();
 22 | 			    foldhtml += "<div id=\"f-"+i+"\" class=\""+options.foldHolder+"\" style=\"height:"+hh+"px;\">";
 23 | 			    if(hh%2 == 1){
 24 | 			    	foldhtml += 	"<div class=\"topHalf\" style=\"height:"+(Math.floor((hh/2))+1)+"px\">"+$(element).html()+"</div>";
 25 | 			    }else{
 26 | 			    	foldhtml += 	"<div class=\"topHalf\" style=\"height:"+Math.floor((hh/2))+"px\">"+$(element).html()+"</div>";
 27 | 			    }
 28 | 			    foldhtml += 	"<div class=\"bottomHalf\" style=\"height:"+Math.floor((hh/2))+"px\">"+$(element).html()+"</div>";
 29 | 			    foldhtml += "</div>";
 30 | 			    folds[i] = new fold(element, i, hh);
 31 | 			    
 32 | 			});
 33 | 			$("#container").html(foldhtml);
 34 | 			$("#page").height((folds.length+0.5)*(options.animationLength));
 35 | 			$("#footer-top").height(Math.floor($(window).height()*.4));
 36 | 			$("#footer-bottom").height(Math.ceil($(window).height()*.6));
 37 | 		}
 38 | 		
 39 | 		var resizeId;
 40 | 
 41 | 		//when resizing the site, we adjust the heights of the sections
 42 | 		$(window).resize(function() {
 43 | 			doneResizing();
 44 | 		});
 45 | 		function doneResizing() {
 46 | 			var sTop = $(window).scrollTop();
 47 | 			var numtimes = 0;
 48 | 			var carpos = 0;
 49 | 			$("#footer-top").height(Math.floor($(window).height()*.4));
 50 | 			$("#footer-bottom").height(Math.ceil($(window).height()*.6));
 51 | 			for (var j=0;j<folds.length;j++){
 52 | 				curpos = sTop;
 53 | 				numtimes = sTop;
 54 | 
 55 | 				folds[j].hh = $("#f-"+folds[j].i).find("img").height();
 56 | 				 if(folds[j].hh%2 == 1){
 57 | 			    	$("#f-"+folds[j].i+" .topHalf").css("height",(Math.floor((folds[j].hh/2))+1)+"px");
 58 | 			    }else{
 59 | 			    	$("#f-"+folds[j].i+" .topHalf").css("height",Math.floor((folds[j].hh/2))+"px");
 60 | 			    }
 61 | 			    $("#f-"+folds[j].i+" .bottomHalf").css("height",Math.floor((folds[j].hh/2))+"px");
 62 | 			    $("#page").height((folds.length+0.5)*(options.animationLength));
 63 | 				if(numtimes <= (options.animationLength * folds[j].i)){
 64 | 					$("#f-"+folds[j].i+" .topHalf").css("-webkit-transform","rotateX(0deg)");
 65 | 					$("#f-"+folds[j].i+" .topHalf").css("-moz-transform","rotateX(0deg)");
 66 | 					$("#f-"+folds[j].i+" .topHalf").css("transform","rotateX(0deg)");
 67 | 					
 68 | 					
 69 | 					$("#f-"+folds[j].i+" .bottomHalf").css("-webkit-transform","rotateX(0deg)");
 70 | 					$("#f-"+folds[j].i+" .bottomHalf").css("-moz-transform","rotateX(0deg)");
 71 | 					$("#f-"+folds[j].i+" .bottomHalf").css("transform","rotateX(0deg)");
 72 | 					$("#f-"+folds[j].i+".foldWrapper").css("height",""+folds[j].hh+"px");
 73 | 				}else{
 74 | 					
 75 | 					
 76 | 					var percentage = (1-((numtimes-(options.animationLength*(folds[j].i)))/(options.animationLength)));
 77 | 				    if(percentage < 0){
 78 | 					    percentage = 0;
 79 | 				    }
 80 | 				    var c = folds[j].hh * percentage
 81 | 				    ,   a = b = folds[j].hh/2
 82 | 				    ,   part = 2*b*c
 83 | 				    ,   bottomAngle = part <= 0 ? 90 : Math.acos( (b*b+c*c-a*a) / part )*180/Math.PI
 84 | 				    ,   topAngle = 360-bottomAngle;
 85 | 				    
 86 | 				    $("#f-"+folds[j].i+" .topHalf").css("-webkit-transform", 'rotateX(' + topAngle + 'deg)');
 87 | 				    $("#f-"+folds[j].i+" .bottomHalf").css("-webkit-transform", 'rotateX(' + bottomAngle + 'deg)');
 88 | 				      
 89 | 				    // change folds height
 90 | 				    var foldHeight = folds[j].hh/1 * percentage;
 91 | 				    $("#f-"+folds[j].i+".foldWrapper").height(foldHeight);
 92 | 				}
 93 | 			}
 94 | 		
 95 | 		}
 96 | 		var complete = false;
 97 | 		$(window).scroll(function(){
 98 | 			var totalHeight, currentScroll, visibleHeight;
 99 | 			
100 | 			if (document.documentElement.scrollTop)
101 | 		    	{ currentScroll = document.documentElement.scrollTop; }
102 | 		    else
103 | 		    	{ currentScroll = document.body.scrollTop; }
104 | 		  
105 | 		    totalHeight = document.body.offsetHeight;
106 | 		    visibleHeight = document.documentElement.clientHeight;
107 | 		  
108 | 		  	if (totalHeight <= currentScroll + visibleHeight ){
109 | 		  		if(!complete){
110 | 					$("#footer-top").fadeIn();
111 | 					complete = true;
112 | 				}
113 | 			}else{
114 | 				if(complete){
115 | 					$("#footer-top").fadeOut();
116 | 					complete = false;
117 | 				}
118 | 			}
119 | 			var sTop = $(window).scrollTop();
120 | 			var numtimes = 0;
121 | 			var carpos = 0;
122 | 			for (var j=0;j<folds.length;j++){
123 | 				curpos = sTop;
124 | 				numtimes = sTop;
125 | 				
126 | 				if(numtimes <= (options.animationLength * folds[j].i)){
127 | 					$("#f-"+folds[j].i+" .topHalf").css("-webkit-transform","rotateX(0deg)");
128 | 					$("#f-"+folds[j].i+" .topHalf").css("-moz-transform","rotateX(0deg)");
129 | 					$("#f-"+folds[j].i+" .topHalf").css("transform","rotateX(0deg)");
130 | 					
131 | 					
132 | 					$("#f-"+folds[j].i+" .bottomHalf").css("-webkit-transform","rotateX(0deg)");
133 | 					$("#f-"+folds[j].i+" .bottomHalf").css("-moz-transform","rotateX(0deg)");
134 | 					$("#f-"+folds[j].i+" .bottomHalf").css("transform","rotateX(0deg)");
135 | 					$("#f-"+folds[j].i+".foldWrapper").css("height",""+folds[j].hh+"px");
136 | 				}else{
137 | 					
138 | 					
139 | 					var percentage = (1-((numtimes-(options.animationLength*(folds[j].i)))/(options.animationLength)));
140 | 				    if(percentage < 0){
141 | 					    percentage = 0;
142 | 				    }
143 | 				    var c = folds[j].hh * percentage
144 | 				    ,   a = b = folds[j].hh/2
145 | 				    ,   part = 2*b*c
146 | 				    ,   bottomAngle = part <= 0 ? 90 : Math.acos( (b*b+c*c-a*a) / part )*180/Math.PI
147 | 				    ,   topAngle = 360-bottomAngle;
148 | 				    
149 | 				    $("#f-"+folds[j].i+" .topHalf").css("-webkit-transform", 'rotateX(' + topAngle + 'deg)');
150 | 				    $("#f-"+folds[j].i+" .bottomHalf").css("-webkit-transform", 'rotateX(' + bottomAngle + 'deg)');
151 | 				      
152 | 				    // change folds height
153 | 				    var foldHeight = folds[j].hh/1 * percentage;
154 | 				    $("#f-"+folds[j].i+".foldWrapper").height(foldHeight);
155 | 				}
156 | 			}
157 | 		
158 | 		});
159 | 		
160 | 		
161 | 	};	
162 | 	
163 | })(jQuery);


--------------------------------------------------------------------------------
/includes/js/responsive_3dfoldscroll.min.js:
--------------------------------------------------------------------------------
1 | (function(e){e.fn.responsive_3dfoldscroll=function(t){function i(e,t,n){this.element=e;this.i=t;this.hh=n}function s(){var s="";e.each(n,function(n,o){var u=e(o).find("img").height();s+='<div id="f-'+n+'" class="'+t.foldHolder+'" style="height:'+u+'px;">';if(u%2==1){s+='<div class="topHalf" style="height:'+(Math.floor(u/2)+1)+'px">'+e(o).html()+"</div>"}else{s+='<div class="topHalf" style="height:'+Math.floor(u/2)+'px">'+e(o).html()+"</div>"}s+='<div class="bottomHalf" style="height:'+Math.floor(u/2)+'px">'+e(o).html()+"</div>";s+="</div>";r[n]=new i(o,n,u)});e("#container").html(s);e("#page").height((r.length+.5)*t.animationLength);e("#footer-top").height(Math.floor(e(window).height()*.4));e("#footer-bottom").height(Math.ceil(e(window).height()*.6))}function u(){var n=e(window).scrollTop();var i=0;var s=0;e("#footer-top").height(Math.floor(e(window).height()*.4));e("#footer-bottom").height(Math.ceil(e(window).height()*.6));for(var o=0;o<r.length;o++){curpos=n;i=n;r[o].hh=e("#f-"+r[o].i).find("img").height();if(r[o].hh%2==1){e("#f-"+r[o].i+" .topHalf").css("height",Math.floor(r[o].hh/2)+1+"px")}else{e("#f-"+r[o].i+" .topHalf").css("height",Math.floor(r[o].hh/2)+"px")}e("#f-"+r[o].i+" .bottomHalf").css("height",Math.floor(r[o].hh/2)+"px");e("#page").height((r.length+.5)*t.animationLength);if(i<=t.animationLength*r[o].i){e("#f-"+r[o].i+" .topHalf").css("-webkit-transform","rotateX(0deg)");e("#f-"+r[o].i+" .topHalf").css("-moz-transform","rotateX(0deg)");e("#f-"+r[o].i+" .topHalf").css("transform","rotateX(0deg)");e("#f-"+r[o].i+" .bottomHalf").css("-webkit-transform","rotateX(0deg)");e("#f-"+r[o].i+" .bottomHalf").css("-moz-transform","rotateX(0deg)");e("#f-"+r[o].i+" .bottomHalf").css("transform","rotateX(0deg)");e("#f-"+r[o].i+".foldWrapper").css("height",""+r[o].hh+"px")}else{var u=1-(i-t.animationLength*r[o].i)/t.animationLength;if(u<0){u=0}var a=r[o].hh*u,f=b=r[o].hh/2,l=2*b*a,c=l<=0?90:Math.acos((b*b+a*a-f*f)/l)*180/Math.PI,h=360-c;e("#f-"+r[o].i+" .topHalf").css("-webkit-transform","rotateX("+h+"deg)");e("#f-"+r[o].i+" .bottomHalf").css("-webkit-transform","rotateX("+c+"deg)");var p=r[o].hh/1*u;e("#f-"+r[o].i+".foldWrapper").height(p)}}}t=e.extend({animationLength:1500,foldHolder:"foldWrapper"},t);var n=e("."+t.foldHolder);var r=[];s();var o;e(window).resize(function(){u()});var a=false;e(window).scroll(function(){var n,i,s;if(document.documentElement.scrollTop){i=document.documentElement.scrollTop}else{i=document.body.scrollTop}n=document.body.offsetHeight;s=document.documentElement.clientHeight;if(n<=i+s){if(!a){e("#footer-top").fadeIn();a=true}}else{if(a){e("#footer-top").fadeOut();a=false}}var o=e(window).scrollTop();var u=0;var f=0;for(var l=0;l<r.length;l++){curpos=o;u=o;if(u<=t.animationLength*r[l].i){e("#f-"+r[l].i+" .topHalf").css("-webkit-transform","rotateX(0deg)");e("#f-"+r[l].i+" .topHalf").css("-moz-transform","rotateX(0deg)");e("#f-"+r[l].i+" .topHalf").css("transform","rotateX(0deg)");e("#f-"+r[l].i+" .bottomHalf").css("-webkit-transform","rotateX(0deg)");e("#f-"+r[l].i+" .bottomHalf").css("-moz-transform","rotateX(0deg)");e("#f-"+r[l].i+" .bottomHalf").css("transform","rotateX(0deg)");e("#f-"+r[l].i+".foldWrapper").css("height",""+r[l].hh+"px")}else{var c=1-(u-t.animationLength*r[l].i)/t.animationLength;if(c<0){c=0}var h=r[l].hh*c,p=b=r[l].hh/2,d=2*b*h,v=d<=0?90:Math.acos((b*b+h*h-p*p)/d)*180/Math.PI,m=360-v;e("#f-"+r[l].i+" .topHalf").css("-webkit-transform","rotateX("+m+"deg)");e("#f-"+r[l].i+" .bottomHalf").css("-webkit-transform","rotateX("+v+"deg)");var g=r[l].hh/1*c;e("#f-"+r[l].i+".foldWrapper").height(g)}}})}})(jQuery)


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if IEMobile 7]><html class="iem7" lang="en" dir="ltr"><![endif]-->
 3 | <!--[if lte IE 6]><html class="lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"><![endif]-->
 4 | <!--[if (IE 7)&(!IEMobile)]><html class="lt-ie9 lt-ie8" lang="en" dir="ltr"><![endif]-->
 5 | <!--[if IE 8]><html class="lt-ie9" lang="en" dir="ltr"><![endif]-->
 6 | 
 7 | <html>
 8 | 	<head>
 9 | 		<link href="includes/css/global.css" rel="stylesheet" type="text/css">
10 | 	
11 | 		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
12 | 		<script src="includes/js/responsive_3dfoldscroll.js?v=1"></script>
13 | 	</head>
14 | 	<body>
15 | 	
16 | 	
17 | 		<div id="page">
18 | 			<div id="container" style="">
19 | 				<div class="foldWrapper clearfix">
20 | 					<img src="includes/images/p1.jpg" />
21 | 				</div>
22 | 				<div class="foldWrapper clearfix">
23 | 					<img src="includes/images/p2.jpg" />
24 | 				</div>
25 | 				<div class="foldWrapper clearfix">
26 | 					<img src="includes/images/p3.jpg" />
27 | 				</div>
28 | 				<div class="foldWrapper clearfix">
29 | 					<img src="includes/images/p1.jpg" />
30 | 				</div>
31 | 				<div class="foldWrapper clearfix">
32 | 					<img src="includes/images/p2.jpg" />
33 | 				</div>
34 | 				<div class="foldWrapper clearfix">
35 | 					<img src="includes/images/p3.jpg" />
36 | 				</div>
37 | 				<div class="foldWrapper clearfix">
38 | 					<img src="includes/images/p1.jpg" />
39 | 				</div>
40 | 				<div class="foldWrapper clearfix">
41 | 					<img src="includes/images/p2.jpg" />
42 | 				</div>
43 | 				<div class="foldWrapper clearfix">
44 | 					<img src="includes/images/p3.jpg" />
45 | 				</div>
46 | 			</div>
47 | 			<div id="footer-top">
48 | 
49 | 			</div>
50 | 			<div id="footer-bottom">
51 | 				<div class="footer-inner">
52 | 					Thanks for viewing!
53 | 				</div>
54 | 			</div>
55 | 		</div>
56 | 		
57 | 		
58 | 		
59 | 		
60 | 		
61 | 		<script>
62 | 			$( document ).ready(function() {
63 | 				window.onload=function(){
64 | 					var fold = $.fn.responsive_3dfoldscroll();
65 | 				};
66 | 			});
67 | 		
68 | 		</script>
69 | 		
70 | 	</body>
71 | </html>


--------------------------------------------------------------------------------