├── _config.yml ├── demo ├── demo1.jpg ├── demo2.jpg ├── demo3.jpg ├── demo4.jpg ├── tiltedpage-scroll.css ├── jquery.tiltedpage-scroll.js └── tiltedpage_scroll_demo.html ├── jquery.tiltedpage-scroll.min.js ├── README.md ├── jquery.tiltedpage-scroll.js └── LICENSE /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /demo/demo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/tiltedpage_scroll/HEAD/demo/demo1.jpg -------------------------------------------------------------------------------- /demo/demo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/tiltedpage_scroll/HEAD/demo/demo2.jpg -------------------------------------------------------------------------------- /demo/demo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/tiltedpage_scroll/HEAD/demo/demo3.jpg -------------------------------------------------------------------------------- /demo/demo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/tiltedpage_scroll/HEAD/demo/demo4.jpg -------------------------------------------------------------------------------- /demo/tiltedpage-scroll.css: -------------------------------------------------------------------------------- 1 | .tps-section { 2 | width: 100%; 3 | height: 500px; 4 | -webkit-perspective: 10em; 5 | -moz-perspective: 10em; 6 | -ms-perspective: 10em; 7 | -o-perspective: 10em; 8 | perspective: 10em; 9 | -webkit-perspective-origin: center bottom; 10 | -moz-perspective-origin: center bottom; 11 | -ms-perspective-origin: center bottom; 12 | -o-perspective-origin: center bottom; 13 | perspective-origin: center bottom; 14 | -webkit-perspective-origin: 50% 50%; 15 | -moz-perspective-origin: 50% 50%; 16 | -ms-perspective-origin: 50% 50%; 17 | -o-perspective-origin: 50% 50%; 18 | perspective-origin: 50% 50%; 19 | -webkit-transform-style: preserve-3d; 20 | -moz-transform-style: preserve-3d; 21 | -ms-transform-style: preserve-3d; 22 | -o-transform-style: preserve-3d; 23 | transform-style: preserve-3d; 24 | } 25 | 26 | 27 | .tps-wrapper { 28 | float: left; 29 | width: 100%; 30 | height: 100%; 31 | } -------------------------------------------------------------------------------- /jquery.tiltedpage-scroll.min.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={sectionContainer:"> section",angle:50,opacity:true,scale:true,outAnimation:true};e.fn.tiltedpage_scroll=function(n){function s(t){var n=e(window).scrollTop(),r=n+e(window).height(),i=t.offset().top,s=i+t.outerHeight(true);return s>=n&&i<=r}function o(e){if(s(e)){e.addClass("tps-inview")}else{e.removeClass("tps-inview")}}var r=e.extend({},t,n),i=e(this);i.find(r.sectionContainer).addClass("tps-section");i.find(".tps-section").each(function(){var t=e(this);t.wrapInner("
")});e(window).on("DOMContentLoaded load resize scroll",function(){i.find(r.sectionContainer).each(function(){o(e(this))});i.find(".tps-section.tps-inview > .tps-wrapper").each(function(t){var n=e(this),i=0,s=e(window).scrollTop(),o=(n.parent().offset().top-n.parent().height()-s)/e(window).height()*r.angle*3,u=(s+e(window).height()-(n.parent().offset().top-n.parent().height()))/e(window).height();if(u>1)u=1;if(o<0)o=0;if(s>n.parent().offset().top){if(r.outAnimation==false){i=1;if(i<0)i=0;if(o<0)o=0}else{i=(n.parent().offset().top+e(window).height()*1.2-s)/e(window).height();i=Math.pow(i,25);o=(n.parent().offset().top-s)/e(window).height()*r.angle*3;u=(s+e(window).height()-n.parent().offset().top)/e(window).height()}}else{if(t!=0){var i=(s+e(window).height()-n.parent().offset().top+n.height()/2)/e(window).height();if(i>1){i=1}}else{i=1;o=0;u=1}}if(r.scale==false)u=1;if(r.angle==false)o=0;if(r.opacity==false)i=1;n.css({transform:"rotateX("+o+"deg) scale("+u+", "+u+")",opacity:i})})})}}(window.jQuery) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Tilted Page Scroll by Pete R. 2 | Create a beautilful 3D tilted scrolling effect for your website with jQuery Tilted Page Scroll. 3 | Created by [Pete R.](http://www.thepetedesign.com), Founder of [Travelistly](http://www.Travelistly.com) and [BucketListly](http://www.bucketlistly.com) 4 | 5 | 6 | ## Demo 7 | [View demo](http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html) 8 | 9 | ## Compatibility 10 | Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE. 11 | 12 | ## Basic Usage 13 | 14 | With this plugin, you can create a beautiful scrolling effect and turn a simple layout website into something surprising. 15 | 16 | To do this, first you have to include the latest jQuery library together with `jquery.tiltedpage_scroll.js` and `tiltedpage_scroll.css` into your document's ``. Now lay out your HTML markup as follows: 17 | 18 | 19 | ````html 20 |
21 |
22 | ... 23 |
24 |
25 | ... 26 |
27 | ... 28 |
29 | ... 30 |
31 |
32 | ```` 33 | 34 | That's it for the HTML part. Isn't that easy? Now, you can just call the function like this, and watch the magic happens: 35 | 36 | ````javascript 37 | $(".main").tiltedpage_scroll({ 38 | sectionContainer: "> section", // In case you don't want to use
tag, you can define your won CSS selector here 39 | angle: 50, // You can define the angle of the tilted section here. Change this to false if you want to disable the tilted effect. The default value is 50 degrees. 40 | opacity: true, // You can toggle the opacity effect with this option. The default value is true 41 | scale: true, // You can toggle the scaling effect here as well. The default value is true. 42 | outAnimation: true // In case you do not want the out animation, you can toggle this to false. The defaul value is true. 43 | }); 44 | ```` 45 | 46 | Now you will have another cool way to showcase your website to your viewers. I hope you find this free plugin useful. 47 | 48 | If you want to see more of my plugins, visit [The Pete Design](http://www.thepetedesign.com/#design), or follow me on [Twitter](http://www.twitter.com/peachananr) and [Github](http://www.github.com/peachananr). 49 | 50 | ## Other Resources 51 | - Tutorial (Coming Soon) 52 | -------------------------------------------------------------------------------- /jquery.tiltedpage-scroll.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * jquery-tiltedpage-scroll.js v1.2.1 3 | * =========================================================== 4 | * Copyright 2013 Pete Rojwongsuriya. 5 | * http://www.thepetedesign.com 6 | * 7 | * Create a beautiful 3D tilted effect on scroll 8 | * with Tilted Page Scroll plugin 9 | * 10 | * https://github.com/peachananr/tiltedpage-scroll 11 | * 12 | * License: GPL v3 13 | * 14 | * ========================================================== */ 15 | 16 | !function($){ 17 | 18 | var defaults = { 19 | sectionContainer: "> section", 20 | angle: 50, 21 | opacity: true, 22 | scale: true, 23 | outAnimation: true 24 | }; 25 | 26 | 27 | $.fn.tiltedpage_scroll = function(options){ 28 | var settings = $.extend({}, defaults, options), 29 | el = $(this); 30 | 31 | el.find(settings.sectionContainer).addClass("tps-section"); 32 | 33 | el.find('.tps-section').each(function(){ 34 | var el2 = $(this); 35 | el2.wrapInner("
"); 36 | }); 37 | 38 | function isElementInViewport (el3) { 39 | var docViewTop = $(window).scrollTop(), 40 | docViewBottom = docViewTop + $(window).height(), 41 | elemTop = el3.offset().top, 42 | elemBottom = elemTop + el3.outerHeight(true); 43 | 44 | return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) ); 45 | } 46 | 47 | function elementVisibilityMayChange (el4) { 48 | 49 | if ( isElementInViewport(el4) ) { 50 | el4.addClass("tps-inview") 51 | } else { 52 | el4.removeClass("tps-inview") 53 | } 54 | } 55 | 56 | 57 | 58 | $(window).on('DOMContentLoaded load resize scroll', function() { 59 | el.find(settings.sectionContainer).each(function(){ 60 | elementVisibilityMayChange($(this)); 61 | }); 62 | 63 | 64 | el.find('.tps-section.tps-inview > .tps-wrapper').each(function(index){ 65 | var el2 = $(this), 66 | opacity = 0, 67 | st = $(window).scrollTop(), 68 | deg = ((el2.parent().offset().top - el2.parent().height()) - st) / $(window).height() * (settings.angle * 3), 69 | scale = ((st + $(window).height() - (el2.parent().offset().top - el2.parent().height())) / ($(window).height() )) ; 70 | if(scale > 1) scale = 1; 71 | if(deg < 0) deg = 0; 72 | 73 | if(st > el2.parent().offset().top) { 74 | 75 | if (settings.outAnimation == false) { 76 | opacity = 1; 77 | if(opacity < 0) opacity = 0; 78 | if (deg < 0) deg = 0; 79 | } else { 80 | opacity = ((el2.parent().offset().top + ($(window).height() * 1.2) - st)) / ($(window).height()); 81 | opacity = Math.pow(opacity,25); 82 | deg = (el2.parent().offset().top - st) / $(window).height() * (settings.angle * 3); 83 | scale = ((st + $(window).height() - el2.parent().offset().top ) / ($(window).height() )) ; 84 | } 85 | 86 | 87 | } else { 88 | if(index != 0) { 89 | var opacity = ((st + $(window).height() - el2.parent().offset().top + (el2.height()/2))/ $(window).height()); 90 | 91 | if(opacity > 1) { opacity = 1; } 92 | 93 | } else { 94 | opacity = 1; 95 | deg = 0; 96 | scale = 1; 97 | } 98 | } 99 | 100 | if (settings.scale == false) scale = 1; 101 | if (settings.angle == false) deg = 0; 102 | if (settings.opacity == false) opacity = 1; 103 | 104 | el2.css({ 105 | 'transform': 'rotateX(' + deg + 'deg) scale('+scale+', '+scale+')', 106 | opacity: opacity 107 | }); 108 | }); 109 | }); 110 | 111 | } 112 | 113 | 114 | }(window.jQuery); 115 | -------------------------------------------------------------------------------- /demo/jquery.tiltedpage-scroll.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * jquery-tiltedpage-scroll.js v1.2.1 3 | * =========================================================== 4 | * Copyright 2013 Pete Rojwongsuriya. 5 | * http://www.thepetedesign.com 6 | * 7 | * Create a beautiful 3D tilted effect on scroll 8 | * with Tilted Page Scroll plugin 9 | * 10 | * https://github.com/peachananr/tiltedpage-scroll 11 | * 12 | * License: GPL v3 13 | * 14 | * ========================================================== */ 15 | 16 | !function($){ 17 | 18 | var defaults = { 19 | sectionContainer: "> section", 20 | angle: 50, 21 | opacity: true, 22 | scale: true, 23 | outAnimation: true 24 | }; 25 | 26 | 27 | $.fn.tiltedpage_scroll = function(options){ 28 | var settings = $.extend({}, defaults, options), 29 | el = $(this); 30 | 31 | el.find(settings.sectionContainer).addClass("tps-section"); 32 | 33 | el.find('.tps-section').each(function(){ 34 | var el2 = $(this); 35 | el2.wrapInner("
"); 36 | }); 37 | 38 | function isElementInViewport (el3) { 39 | var docViewTop = $(window).scrollTop(), 40 | docViewBottom = docViewTop + $(window).height(), 41 | elemTop = el3.offset().top, 42 | elemBottom = elemTop + el3.outerHeight(true); 43 | 44 | return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) ); 45 | } 46 | 47 | function elementVisibilityMayChange (el4) { 48 | 49 | if ( isElementInViewport(el4) ) { 50 | el4.addClass("tps-inview") 51 | } else { 52 | el4.removeClass("tps-inview") 53 | } 54 | } 55 | 56 | 57 | 58 | $(window).on('DOMContentLoaded load resize scroll', function() { 59 | el.find(settings.sectionContainer).each(function(){ 60 | elementVisibilityMayChange($(this)); 61 | }); 62 | 63 | 64 | el.find('.tps-section.tps-inview > .tps-wrapper').each(function(index){ 65 | var el2 = $(this), 66 | opacity = 0, 67 | st = $(window).scrollTop(), 68 | deg = ((el2.parent().offset().top - el2.parent().height()) - st) / $(window).height() * (settings.angle * 3), 69 | scale = ((st + $(window).height() - (el2.parent().offset().top - el2.parent().height())) / ($(window).height() )) ; 70 | if(scale > 1) scale = 1; 71 | if(deg < 0) deg = 0; 72 | 73 | if(st > el2.parent().offset().top) { 74 | 75 | if (settings.outAnimation == false) { 76 | opacity = 1; 77 | if(opacity < 0) opacity = 0; 78 | if (deg < 0) deg = 0; 79 | } else { 80 | opacity = ((el2.parent().offset().top + ($(window).height() * 1.2) - st)) / ($(window).height()); 81 | opacity = Math.pow(opacity,25); 82 | deg = (el2.parent().offset().top - st) / $(window).height() * (settings.angle * 3); 83 | scale = ((st + $(window).height() - el2.parent().offset().top ) / ($(window).height() )) ; 84 | } 85 | 86 | 87 | } else { 88 | if(index != 0) { 89 | var opacity = ((st + $(window).height() - el2.parent().offset().top + (el2.height()/2))/ $(window).height()); 90 | 91 | if(opacity > 1) { opacity = 1; } 92 | 93 | } else { 94 | opacity = 1; 95 | deg = 0; 96 | scale = 1; 97 | } 98 | } 99 | 100 | if (settings.scale == false) scale = 1; 101 | if (settings.angle == false) deg = 0; 102 | if (settings.opacity == false) opacity = 1; 103 | 104 | el2.css({ 105 | 'transform': 'rotateX(' + deg + 'deg) scale('+scale+', '+scale+')', 106 | opacity: opacity 107 | }); 108 | }); 109 | }); 110 | 111 | } 112 | 113 | 114 | }(window.jQuery); 115 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. -------------------------------------------------------------------------------- /demo/tiltedpage_scroll_demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Tilted Page Scroll by Pete R. | The Pete Design 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 539 | 547 | 548 | 549 | 550 | 551 | 552 |
553 | 554 |
555 | 556 |
557 | 558 |
559 |
560 |

jQuery Tilted Page Scroll

561 |

Create a 3D Tilted Scroll Effect with jQuery Tilted Page Scroll Plugin

562 |

Created by Pete R., Founder of Travelistly and BucketListly

563 |
564 | Download on Github 565 |
566 |
567 |
568 | 571 |
572 |
573 | 576 |
577 |
578 | 581 |
582 |
583 | 586 |
587 |
588 | 591 |
592 |
593 | 596 |
597 |
598 | 601 |
602 |
603 | 606 |
607 |
608 | Back to The Pete Design 609 | Fork me on GitHub 610 |
611 | 612 | 613 | 620 | 621 | 622 | 623 | --------------------------------------------------------------------------------