├── LICENSE ├── README.md ├── demo ├── back-phone.png ├── onepage-scroll.css ├── onepagescroll.js ├── phones.png ├── purejs_onepage_scroll_demo.html └── tilted-phone.png ├── onepage-scroll.css ├── onepagescroll.js └── onepagescroll.min.js /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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Pure JS One Page Scroll by Pete R. 2 | Pure JS One Page Scroll is a javascript version of [One Page Scroll](https://github.com/peachananr/onepage-scroll). The plugin will let you create an Apple-like one page scroll website (iPhone 5S website) **without replying on jQuery**. 3 | 4 | Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com) 5 | 6 | License: [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/deed.en_US) 7 | 8 | 9 | ## Requirement 10 | **NONE! No more jQuery!** 11 | 12 | ## Demo 13 | [View demo](http://peachananr.github.io/purejs-onepage-scroll/demo/purejs_onepage_scroll_demo.html) 14 | 15 | ##Looking for jQuery version? 16 | [jQuery Version](http://www.thepetedesign.com/demos/onepage_scroll_demo.html) 17 | 18 | ##Looking for Zepto JS version? 19 | [Zepto Js Version](http://www.thepetedesign.com/demos/zepto_onepage_scroll_demo.html) 20 | 21 | ## Compatibility 22 | Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Not tested on IE. 23 | 24 | ## Basic Usage 25 | One Page Scroll let you transform your website into a one page scroll website that allows users to scroll one page at a time. It is perfect for creating a website in which you want to present something to the viewers. For example, [Apple's iPhone 5S website](http://www.apple.com/iphone-5s/) uses the same technique. 26 | 27 | 28 | To add this to your website, simply include `onepagescroll.js` and `onepage-scroll.css` into your document's `` and call the function as follows: 29 | 30 | ````html 31 | 32 | ... 33 |
34 |
...
35 |
...
36 | ... 37 |
38 | ... 39 | 40 | ```` 41 | Container "Main" must be one level below the `body` tag in order to make it work full page. Now call the function to activate as follows: 42 | 43 | ````javascript 44 | onePageScroll(".main", { 45 | sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section 46 | easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", 47 | // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)" 48 | animationTime: 1000, // AnimationTime let you define how long each section takes to animate 49 | pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide. 50 | updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page. 51 | beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves. 52 | afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves. 53 | loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page. 54 | keyboard: true, // You can activate the keyboard controls 55 | responsiveFallback: false // You can fallback to normal page scroll by defining the width of the browser in which 56 | // you want the responsive fallback to be triggered. For example, set this to 600 and whenever 57 | // the browser's width is less than 600, the fallback will kick in. 58 | }); 59 | ```` 60 | And that's it. Now, your website should work the same way Apple's iPhone 5S website does. You should be able to swipe up/down as well (thanks to [Eike Send](https://github.com/eikes) for his swipe events!) when viewing your website on mobile phones. 61 | 62 | ## Public Methods 63 | You can also trigger page move programmatically as well: 64 | 65 | ### moveUp(".main") 66 | This method allows you to move the page up by one. This action is equivalent to scrolling up/swiping down. 67 | 68 | ````javascript 69 | moveUp(".main"); 70 | ```` 71 | 72 | ### moveDown(".main") 73 | This method allows you to move the page down by one. This action is equivalent to scrolling down/swiping up. 74 | 75 | ````javascript 76 | moveDown(".main"); 77 | ```` 78 | 79 | ### moveTo(".main", page_index) 80 | This method allows you to move to the specified page index programatically. 81 | 82 | ````javascript 83 | moveTo(".main", 3); 84 | ```` 85 | 86 | ## Callbacks 87 | You can use callbacks to perform actions before or after the page move. 88 | 89 | ### beforeMove(next_page_index, next_section_element) 90 | This callback gets called before the plugin performs its move. 91 | 92 | ````javascript 93 | onePageScroll(".main", { 94 | beforeMove: function(index, next_el) { 95 | ... 96 | } 97 | }); 98 | ```` 99 | 100 | ### afterMove(next_page_index, next_section_element) 101 | This callback gets called after the move animation was performed. 102 | 103 | ````javascript 104 | onePageScroll(".main", { 105 | afterMove: function(index, next_el) { 106 | ... 107 | } 108 | }); 109 | ```` 110 | 111 | 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). 112 | 113 | ## Other Resources 114 | - [jQuery Version](http://www.thepetedesign.com/demos/onepage_scroll_demo.html) 115 | - [Zepto Js Version](http://www.thepetedesign.com/demos/zepto_onepage_scroll_demo.html) 116 | - [OnePageScroll.js: Creating an Apple’s iPhone 5S Website](http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/) 117 | - [Eike Send's jQuery Swipe Events](https://github.com/eikes/jquery.swipe-events.js) 118 | - [CSS Easing generator by Matthew Lein](http://matthewlein.com/ceaser/) 119 | -------------------------------------------------------------------------------- /demo/back-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/purejs-onepage-scroll/b86163211c9e40019a2223bf85f0ad02aa0cf57f/demo/back-phone.png -------------------------------------------------------------------------------- /demo/onepage-scroll.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | overflow: hidden; 4 | -webkit-transition: opacity 400ms; 5 | -moz-transition: opacity 400ms; 6 | transition: opacity 400ms; 7 | } 8 | 9 | body, .onepage-wrapper, html { 10 | display: block; 11 | position: static; 12 | padding: 0; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .onepage-wrapper { 18 | width: 100%; 19 | height: 100%; 20 | display: block; 21 | position: relative; 22 | padding: 0; 23 | -webkit-transform-style: preserve-3d; 24 | } 25 | 26 | .onepage-wrapper .ops-section { 27 | width: 100%; 28 | height: 100%; 29 | position: relative; 30 | } 31 | 32 | .onepage-pagination { 33 | position: absolute; 34 | right: 10px; 35 | top: 50%; 36 | z-index: 5; 37 | list-style: none; 38 | margin: 0; 39 | padding: 0; 40 | } 41 | .onepage-pagination li { 42 | padding: 0; 43 | text-align: center; 44 | } 45 | .onepage-pagination li a{ 46 | padding: 10px; 47 | width: 4px; 48 | height: 4px; 49 | display: block; 50 | 51 | } 52 | .onepage-pagination li a:before{ 53 | content: ''; 54 | position: absolute; 55 | width: 4px; 56 | height: 4px; 57 | background: rgba(0,0,0,0.85); 58 | border-radius: 10px; 59 | -webkit-border-radius: 10px; 60 | -moz-border-radius: 10px; 61 | } 62 | 63 | .onepage-pagination li a.active:before{ 64 | width: 10px; 65 | height: 10px; 66 | background: none; 67 | border: 1px solid black; 68 | margin-top: -4px; 69 | left: 8px; 70 | } 71 | 72 | .disabled-onepage-scroll, .disabled-onepage-scroll .wrapper { 73 | overflow: auto; 74 | } 75 | 76 | .disabled-onepage-scroll .onepage-wrapper .ops-section { 77 | position: relative !important; 78 | top: auto !important; 79 | } 80 | .disabled-onepage-scroll .onepage-wrapper { 81 | -webkit-transform: none !important; 82 | -moz-transform: none !important; 83 | transform: none !important; 84 | -ms-transform: none !important; 85 | min-height: 100%; 86 | } 87 | 88 | 89 | .disabled-onepage-scroll .onepage-pagination { 90 | display: none; 91 | } 92 | 93 | body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html { 94 | position: inherit; 95 | } -------------------------------------------------------------------------------- /demo/onepagescroll.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * onepagescroll.js v1.2.2 3 | * =========================================================== 4 | * Copyright 2014 Pete Rojwongsuriya. 5 | * http://www.thepetedesign.com 6 | * 7 | * Create an Apple-like website that let user scroll 8 | * one page at a time 9 | * 10 | * Credit: Eike Send for the awesome swipe event 11 | * https://github.com/peachananr/purejs-onepage-scroll 12 | * 13 | * License: GPL v3 14 | * 15 | * ========================================================== */ 16 | 17 | function onePageScroll(element, options) { 18 | 19 | var defaults = { 20 | sectionContainer: "section", 21 | easing: "ease", 22 | animationTime: 1000, 23 | pagination: true, 24 | updateURL: false, 25 | keyboard: true, 26 | beforeMove: null, 27 | afterMove: null, 28 | loop: false, 29 | responsiveFallback: false 30 | }, 31 | _root = this, 32 | settings = Object.extend({}, defaults, options), 33 | el = document.querySelector(element), 34 | sections = document.querySelectorAll(settings.sectionContainer), 35 | total = sections.length, 36 | status = "off", 37 | topPos = 0, 38 | lastAnimation = 0, 39 | quietPeriod = 500, 40 | paginationList = "", 41 | body = document.querySelector("body"); 42 | 43 | this.init = function() { 44 | /*-------------------------------------------*/ 45 | /* Prepare Everything */ 46 | /*-------------------------------------------*/ 47 | 48 | _addClass(el, "onepage-wrapper") 49 | el.style.position = "relative"; 50 | 51 | for( var i = 0; i < sections.length; i++){ 52 | _addClass(sections[i], "ops-section") 53 | sections[i].dataset.index = i + 1; 54 | topPos = topPos + 100; 55 | 56 | if(settings.pagination == true) { 57 | paginationList += "
    • "; 58 | } 59 | } 60 | 61 | _swipeEvents(el); 62 | document.addEventListener("swipeDown", function(event){ 63 | if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault(); 64 | moveUp(el); 65 | }); 66 | document.addEventListener("swipeUp", function(event){ 67 | if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault(); 68 | moveDown(el); 69 | }); 70 | 71 | // Create Pagination and Display Them 72 | 73 | if(settings.pagination == true) { 74 | var pagination = document.createElement("ul"); 75 | pagination.setAttribute("class", "onepage-pagination"); 76 | 77 | body.appendChild(pagination) 78 | pagination.innerHTML = paginationList; 79 | var posTop = (document.querySelector(".onepage-pagination").offsetHeight / 2) * -1; 80 | document.querySelector(".onepage-pagination").style.marginTop = posTop; 81 | } 82 | 83 | if(window.location.hash != "" && window.location.hash != "#1") { 84 | var init_index = window.location.hash.replace("#", ""), 85 | next = document.querySelector(settings.sectionContainer + "[data-index='" + (init_index) + "']"), 86 | next_index = next.dataset.index; 87 | 88 | _addClass( document.querySelector(settings.sectionContainer + "[data-index='" + init_index + "']") ,"active") 89 | _addClass(body, "viewing-page-"+ init_index) 90 | if(settings.pagination == true) _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + init_index + "']"), "active"); 91 | 92 | if(next) { 93 | _addClass(next, "active") 94 | if(settings.pagination == true) _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + init_index + "']"), "active"); 95 | 96 | body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, ''); 97 | _addClass(body, "viewing-page-" + next_index) 98 | if (history.replaceState && settings.updateURL == true) { 99 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index); 100 | history.pushState( {}, document.title, href ); 101 | } 102 | } 103 | var pos = ((init_index - 1) * 100) * -1; 104 | _transformPage(el, settings, pos, init_index); 105 | 106 | }else{ 107 | _addClass(document.querySelector(settings.sectionContainer + "[data-index='1']"), "active"); 108 | _addClass(body, "viewing-page-1"); 109 | if(settings.pagination == true) _addClass(document.querySelector(".onepage-pagination li a[data-index='1']"), "active"); 110 | } 111 | 112 | _paginationHandler = function() { 113 | var page_index = this.dataset.index; 114 | moveTo(el, page_index); 115 | } 116 | 117 | 118 | if(settings.pagination == true) { 119 | var pagination_links = document.querySelectorAll(".onepage-pagination li a"); 120 | 121 | for( var i = 0; i < pagination_links.length; i++){ 122 | pagination_links[i].addEventListener('click', _paginationHandler); 123 | } 124 | } 125 | 126 | _mouseWheelHandler = function(event) { 127 | event.preventDefault(); 128 | var delta = event.wheelDelta || -event.detail; 129 | if (!_hasClass(body, "disabled-onepage-scroll")) _init_scroll(event, delta); 130 | } 131 | 132 | document.addEventListener('mousewheel', _mouseWheelHandler); 133 | document.addEventListener('DOMMouseScroll', _mouseWheelHandler); 134 | 135 | 136 | if(settings.responsiveFallback != false) { 137 | window.onresize = function(){ 138 | _responsive(); 139 | } 140 | 141 | _responsive(); 142 | } 143 | 144 | _keydownHandler = function(e) { 145 | var tag = e.target.tagName.toLowerCase(); 146 | 147 | if (!_hasClass(body, "disabled-onepage-scroll")) { 148 | switch(e.which) { 149 | case 38: 150 | if (tag != 'input' && tag != 'textarea') moveUp(el) 151 | break; 152 | case 40: 153 | if (tag != 'input' && tag != 'textarea') moveDown(el) 154 | break; 155 | default: return; 156 | } 157 | } 158 | return false; 159 | } 160 | 161 | if(settings.keyboard == true) { 162 | document.onkeydown = _keydownHandler; 163 | } 164 | return false; 165 | } 166 | 167 | /*-------------------------------------------------------*/ 168 | /* Private Functions */ 169 | /*-------------------------------------------------------*/ 170 | /*------------------------------------------------*/ 171 | /* Credit: Eike Send for the awesome swipe event */ 172 | /*------------------------------------------------*/ 173 | _swipeEvents = function(el){ 174 | var startX, 175 | startY; 176 | 177 | document.addEventListener("touchstart", touchstart); 178 | 179 | function touchstart(event) { 180 | var touches = event.touches; 181 | if (touches && touches.length) { 182 | startX = touches[0].pageX; 183 | startY = touches[0].pageY; 184 | document.addEventListener("touchmove", touchmove); 185 | } 186 | } 187 | 188 | function touchmove(event) { 189 | var touches = event.touches; 190 | if (touches && touches.length) { 191 | event.preventDefault(); 192 | var deltaX = startX - touches[0].pageX; 193 | var deltaY = startY - touches[0].pageY; 194 | 195 | if (deltaX >= 50) { 196 | var event = new Event('swipeLeft'); 197 | document.dispatchEvent(event); 198 | } 199 | if (deltaX <= -50) { 200 | var event = new Event('swipeRight'); 201 | document.dispatchEvent(event); 202 | } 203 | if (deltaY >= 50) { 204 | var event = new Event('swipeUp'); 205 | document.dispatchEvent(event); 206 | } 207 | if (deltaY <= -50) { 208 | var event = new Event('swipeDown'); 209 | document.dispatchEvent(event); 210 | } 211 | 212 | if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { 213 | document.removeEventListener('touchmove', touchmove); 214 | } 215 | } 216 | } 217 | 218 | }; 219 | /*-----------------------------------------------------------*/ 220 | /* Utility to add/remove class easily with javascript */ 221 | /*-----------------------------------------------------------*/ 222 | 223 | _trim = function(str) { 224 | return str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 225 | } 226 | 227 | _hasClass = function(ele,cls) { 228 | if (ele.className) { 229 | return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 230 | } else { 231 | return ele.className = cls; 232 | } 233 | } 234 | 235 | _addClass = function(ele,cls) { 236 | if (!_hasClass(ele,cls)) ele.className += " "+cls; 237 | ele.className = _trim(ele.className) 238 | } 239 | 240 | _removeClass = function(ele,cls) { 241 | if (_hasClass(ele,cls)) { 242 | var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 243 | ele.className=ele.className.replace(reg,' '); 244 | } 245 | ele.className = _trim(ele.className) 246 | } 247 | 248 | /*-----------------------------------------------------------*/ 249 | /* Transtionend Normalizer by Modernizr */ 250 | /*-----------------------------------------------------------*/ 251 | 252 | _whichTransitionEvent = function(){ 253 | var t; 254 | var el = document.createElement('fakeelement'); 255 | var transitions = { 256 | 'transition':'transitionend', 257 | 'OTransition':'oTransitionEnd', 258 | 'MozTransition':'transitionend', 259 | 'WebkitTransition':'webkitTransitionEnd' 260 | } 261 | 262 | for(t in transitions){ 263 | if( el.style[t] !== undefined ){ 264 | return transitions[t]; 265 | } 266 | } 267 | } 268 | 269 | /*-----------------------------------------------------------*/ 270 | /* Function to perform scroll to top animation */ 271 | /*-----------------------------------------------------------*/ 272 | 273 | _scrollTo = function(element, to, duration) { 274 | if (duration < 0) return; 275 | var difference = to - element.scrollTop; 276 | var perTick = difference / duration * 10; 277 | 278 | setTimeout(function() { 279 | element.scrollTop = element.scrollTop + perTick; 280 | if (element.scrollTop == to) return; 281 | _scrollTo(element, to, duration - 10); 282 | }, 10); 283 | } 284 | 285 | 286 | 287 | /*---------------------------------*/ 288 | /* Function to transform the page */ 289 | /*---------------------------------*/ 290 | 291 | _transformPage = function(el2, settings, pos, index, next_el) { 292 | if (typeof settings.beforeMove == 'function') settings.beforeMove(index, next_el); 293 | 294 | var transformCSS = "-webkit-transform: translate3d(0, " + pos + "%, 0); -webkit-transition: -webkit-transform " + settings.animationTime + "ms " + settings.easing + "; -moz-transform: translate3d(0, " + pos + "%, 0); -moz-transition: -moz-transform " + settings.animationTime + "ms " + settings.easing + "; -ms-transform: translate3d(0, " + pos + "%, 0); -ms-transition: -ms-transform " + settings.animationTime + "ms " + settings.easing + "; transform: translate3d(0, " + pos + "%, 0); transition: transform " + settings.animationTime + "ms " + settings.easing + ";"; 295 | 296 | el2.style.cssText = transformCSS; 297 | 298 | var transitionEnd = _whichTransitionEvent(); 299 | el2.addEventListener(transitionEnd, endAnimation, false); 300 | 301 | function endAnimation() { 302 | if (typeof settings.afterMove == 'function') settings.afterMove(index, next_el); 303 | el2.removeEventListener(transitionEnd, endAnimation) 304 | } 305 | } 306 | 307 | /*-------------------------------------------*/ 308 | /* Responsive Fallback trigger */ 309 | /*-------------------------------------------*/ 310 | 311 | _responsive = function() { 312 | 313 | if (document.body.clientWidth < settings.responsiveFallback) { 314 | 315 | _addClass(body, "disabled-onepage-scroll"); 316 | document.removeEventListener('mousewheel', _mouseWheelHandler); 317 | document.removeEventListener('DOMMouseScroll', _mouseWheelHandler); 318 | _swipeEvents(el); 319 | document.removeEventListener("swipeDown"); 320 | document.removeEventListener("swipeUp"); 321 | 322 | } else { 323 | 324 | if (_hasClass(body, "disabled-onepage-scroll")) { 325 | _removeClass(body, "disabled-onepage-scroll"); 326 | _scrollTo(document.documentElement, 0, 2000); 327 | } 328 | 329 | 330 | 331 | _swipeEvents(el); 332 | document.addEventListener("swipeDown", function(event){ 333 | if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault(); 334 | moveUp(el); 335 | }); 336 | document.addEventListener("swipeUp", function(event){ 337 | if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault(); 338 | moveDown(el); 339 | }); 340 | 341 | document.addEventListener('mousewheel', _mouseWheelHandler); 342 | document.addEventListener('DOMMouseScroll', _mouseWheelHandler); 343 | 344 | } 345 | } 346 | 347 | /*-------------------------------------------*/ 348 | /* Initialize scroll detection */ 349 | /*-------------------------------------------*/ 350 | 351 | _init_scroll = function(event, delta) { 352 | var deltaOfInterest = delta, 353 | timeNow = new Date().getTime(); 354 | 355 | // Cancel scroll if currently animating or within quiet period 356 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { 357 | event.preventDefault(); 358 | return; 359 | } 360 | 361 | if (deltaOfInterest < 0) { 362 | moveDown(el) 363 | } else { 364 | moveUp(el) 365 | } 366 | 367 | lastAnimation = timeNow; 368 | } 369 | 370 | 371 | /*-------------------------------------------------------*/ 372 | /* Public Functions */ 373 | /*-------------------------------------------------------*/ 374 | 375 | /*---------------------------------*/ 376 | /* Function to move down section */ 377 | /*---------------------------------*/ 378 | 379 | this.moveDown = function(el3) { 380 | 381 | if (typeof el3 == "string") el3 = document.querySelector(el3); 382 | 383 | var index = document.querySelector(settings.sectionContainer +".active").dataset.index, 384 | current = document.querySelector(settings.sectionContainer + "[data-index='" + index + "']"), 385 | next = document.querySelector(settings.sectionContainer + "[data-index='" + (parseInt(index) + 1) + "']"); 386 | 387 | 388 | if(!next) { 389 | if (settings.loop == true) { 390 | pos = 0; 391 | next = document.querySelector(settings.sectionContainer + "[data-index='1']"); 392 | } else { 393 | return 394 | } 395 | 396 | }else { 397 | pos = (index * 100) * -1; 398 | } 399 | var next_index = next.dataset.index; 400 | _removeClass(current, "active"); 401 | _addClass(next, "active"); 402 | 403 | if(settings.pagination == true) { 404 | _removeClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + index + "']"), "active"); 405 | _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + next_index + "']"), "active"); 406 | } 407 | 408 | body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, ''); 409 | _addClass(body, "viewing-page-"+ next_index); 410 | 411 | if (history.replaceState && settings.updateURL == true) { 412 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(index) + 1); 413 | history.pushState( {}, document.title, href ); 414 | } 415 | _transformPage(el3, settings, pos, next_index, next); 416 | } 417 | 418 | /*---------------------------------*/ 419 | /* Function to move up section */ 420 | /*---------------------------------*/ 421 | 422 | this.moveUp = function(el4) { 423 | 424 | if (typeof el4 == "string") el4 = document.querySelector(el4); 425 | 426 | var index = document.querySelector(settings.sectionContainer +".active").dataset.index, 427 | current = document.querySelector(settings.sectionContainer + "[data-index='" + index + "']"), 428 | next = document.querySelector(settings.sectionContainer + "[data-index='" + (parseInt(index) - 1) + "']"); 429 | 430 | if(!next) { 431 | if (settings.loop == true) { 432 | pos = ((total - 1) * 100) * -1; 433 | next = document.querySelector(settings.sectionContainer + "[data-index='" + total + "']"); 434 | } else { 435 | return 436 | } 437 | }else { 438 | pos = ((next.dataset.index - 1) * 100) * -1; 439 | } 440 | var next_index = next.dataset.index; 441 | _removeClass(current, "active") 442 | _addClass(next, "active") 443 | 444 | if(settings.pagination == true) { 445 | _removeClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + index + "']"), "active"); 446 | _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + next_index + "']"), "active"); 447 | } 448 | body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, ''); 449 | _addClass(body, "viewing-page-"+ next_index); 450 | 451 | if (history.replaceState && settings.updateURL == true) { 452 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(index) - 1); 453 | history.pushState( {}, document.title, href ); 454 | } 455 | _transformPage(el4, settings, pos, next_index, next); 456 | } 457 | 458 | /*-------------------------------------------*/ 459 | /* Function to move to specified section */ 460 | /*-------------------------------------------*/ 461 | 462 | this.moveTo = function(el5, page_index) { 463 | 464 | if (typeof el5 == "string") el5 = document.querySelector(el5); 465 | 466 | var current = document.querySelector(settings.sectionContainer + ".active"), 467 | next = document.querySelector(settings.sectionContainer + "[data-index='" + (page_index) + "']"); 468 | 469 | if(next) { 470 | var next_index = next.dataset.index; 471 | _removeClass(current, "active"); 472 | _addClass(next, "active"); 473 | _removeClass(document.querySelector(".onepage-pagination li a" + ".active"), "active"); 474 | _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + (page_index) + "']"), "active"); 475 | 476 | body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, ''); 477 | _addClass(body, "viewing-page-"+ next_index); 478 | 479 | pos = ((page_index - 1) * 100) * -1; 480 | 481 | if (history.replaceState && settings.updateURL == true) { 482 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(page_index) - 1); 483 | history.pushState( {}, document.title, href ); 484 | } 485 | _transformPage(el5, settings, pos, page_index, next); 486 | } 487 | } 488 | 489 | this.init(); 490 | } 491 | 492 | /*------------------------------------------------*/ 493 | /* Ulitilities Method */ 494 | /*------------------------------------------------*/ 495 | 496 | /*-----------------------------------------------------------*/ 497 | /* Function by John Resig to replicate extend functionality */ 498 | /*-----------------------------------------------------------*/ 499 | 500 | Object.extend = function(orig){ 501 | if ( orig == null ) 502 | return orig; 503 | 504 | for ( var i = 1; i < arguments.length; i++ ) { 505 | var obj = arguments[i]; 506 | if ( obj != null ) { 507 | for ( var prop in obj ) { 508 | var getter = obj.__lookupGetter__( prop ), 509 | setter = obj.__lookupSetter__( prop ); 510 | 511 | if ( getter || setter ) { 512 | if ( getter ) 513 | orig.__defineGetter__( prop, getter ); 514 | if ( setter ) 515 | orig.__defineSetter__( prop, setter ); 516 | } else { 517 | orig[ prop ] = obj[ prop ]; 518 | } 519 | } 520 | } 521 | } 522 | 523 | return orig; 524 | }; 525 | 526 | 527 | -------------------------------------------------------------------------------- /demo/phones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/purejs-onepage-scroll/b86163211c9e40019a2223bf85f0ad02aa0cf57f/demo/phones.png -------------------------------------------------------------------------------- /demo/purejs_onepage_scroll_demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pure JS One Page Scroll by Pete R. | The Pete Design 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 610 | 611 | 612 | 613 |
    614 | 615 |
    616 | 617 |
    618 | 619 |
    620 | 621 |
    622 |
    623 |

    Pure JS One Page Scroll v1.2

    624 |

    Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin. (No jQuery Required)

    625 |

    Created by Pete R., Founder of Travelistly & BucketListly

    626 |
    627 | 628 | Download on Github 629 | Looking for a jQuery version? 630 |
    631 |
    632 | phones 633 |
    634 | 635 |
    636 |
    637 |

    Ready-to-use plugin

    638 |

    All you need is an HTML markup, call the script and BAM!

    639 | 640 | <div class="main">
    641 | <section>...</section>
    642 | <section>...</section>
    643 | ...
    644 | </div> 645 |     646 | 647 | onePageScroll(".main"); 648 | 649 |
    650 |
    651 | 652 |
    653 |
    654 |

    Pretty Neat Eh?

    655 |

    You can customize the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'

    656 |
    657 | Download on Github 658 |
    659 |
    660 |
    661 | 662 |
    663 | Back to The Pete Design 664 | Fork me on GitHub 665 |
    666 | 674 | 675 | 682 | 683 | 684 | 685 | -------------------------------------------------------------------------------- /demo/tilted-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/purejs-onepage-scroll/b86163211c9e40019a2223bf85f0ad02aa0cf57f/demo/tilted-phone.png -------------------------------------------------------------------------------- /onepage-scroll.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | overflow: hidden; 4 | -webkit-transition: opacity 400ms; 5 | -moz-transition: opacity 400ms; 6 | transition: opacity 400ms; 7 | } 8 | 9 | body, .onepage-wrapper, html { 10 | display: block; 11 | position: static; 12 | padding: 0; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .onepage-wrapper { 18 | width: 100%; 19 | height: 100%; 20 | display: block; 21 | position: relative; 22 | padding: 0; 23 | -webkit-transform-style: preserve-3d; 24 | } 25 | 26 | .onepage-wrapper .ops-section { 27 | width: 100%; 28 | height: 100%; 29 | position: relative; 30 | } 31 | 32 | .onepage-pagination { 33 | position: absolute; 34 | right: 10px; 35 | top: 50%; 36 | z-index: 5; 37 | list-style: none; 38 | margin: 0; 39 | padding: 0; 40 | } 41 | .onepage-pagination li { 42 | padding: 0; 43 | text-align: center; 44 | } 45 | .onepage-pagination li a{ 46 | padding: 10px; 47 | width: 4px; 48 | height: 4px; 49 | display: block; 50 | 51 | } 52 | .onepage-pagination li a:before{ 53 | content: ''; 54 | position: absolute; 55 | width: 4px; 56 | height: 4px; 57 | background: rgba(0,0,0,0.85); 58 | border-radius: 10px; 59 | -webkit-border-radius: 10px; 60 | -moz-border-radius: 10px; 61 | } 62 | 63 | .onepage-pagination li a.active:before{ 64 | width: 10px; 65 | height: 10px; 66 | background: none; 67 | border: 1px solid black; 68 | margin-top: -4px; 69 | left: 8px; 70 | } 71 | 72 | .disabled-onepage-scroll, .disabled-onepage-scroll .wrapper { 73 | overflow: auto; 74 | } 75 | 76 | .disabled-onepage-scroll .onepage-wrapper .ops-section { 77 | position: relative !important; 78 | top: auto !important; 79 | } 80 | .disabled-onepage-scroll .onepage-wrapper { 81 | -webkit-transform: none !important; 82 | -moz-transform: none !important; 83 | transform: none !important; 84 | -ms-transform: none !important; 85 | min-height: 100%; 86 | } 87 | 88 | 89 | .disabled-onepage-scroll .onepage-pagination { 90 | display: none; 91 | } 92 | 93 | body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html { 94 | position: inherit; 95 | } -------------------------------------------------------------------------------- /onepagescroll.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * onepagescroll.js v1.2.2 3 | * =========================================================== 4 | * Copyright 2014 Pete Rojwongsuriya. 5 | * http://www.thepetedesign.com 6 | * 7 | * Create an Apple-like website that let user scroll 8 | * one page at a time 9 | * 10 | * Credit: Eike Send for the awesome swipe event 11 | * https://github.com/peachananr/purejs-onepage-scroll 12 | * 13 | * License: GPL v3 14 | * 15 | * ========================================================== */ 16 | 17 | function onePageScroll(element, options) { 18 | 19 | var defaults = { 20 | sectionContainer: "section", 21 | easing: "ease", 22 | animationTime: 1000, 23 | pagination: true, 24 | updateURL: false, 25 | keyboard: true, 26 | beforeMove: null, 27 | afterMove: null, 28 | loop: false, 29 | responsiveFallback: false 30 | }, 31 | _root = this, 32 | settings = Object.extend({}, defaults, options), 33 | el = document.querySelector(element), 34 | sections = document.querySelectorAll(settings.sectionContainer), 35 | total = sections.length, 36 | status = "off", 37 | topPos = 0, 38 | lastAnimation = 0, 39 | quietPeriod = 500, 40 | paginationList = "", 41 | body = document.querySelector("body"); 42 | 43 | this.init = function() { 44 | /*-------------------------------------------*/ 45 | /* Prepare Everything */ 46 | /*-------------------------------------------*/ 47 | 48 | _addClass(el, "onepage-wrapper") 49 | el.style.position = "relative"; 50 | 51 | for( var i = 0; i < sections.length; i++){ 52 | _addClass(sections[i], "ops-section") 53 | sections[i].dataset.index = i + 1; 54 | topPos = topPos + 100; 55 | 56 | if(settings.pagination == true) { 57 | paginationList += "
    • "; 58 | } 59 | } 60 | 61 | _swipeEvents(el); 62 | document.addEventListener("swipeDown", function(event){ 63 | if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault(); 64 | moveUp(el); 65 | }); 66 | document.addEventListener("swipeUp", function(event){ 67 | if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault(); 68 | moveDown(el); 69 | }); 70 | 71 | // Create Pagination and Display Them 72 | 73 | if(settings.pagination == true) { 74 | var pagination = document.createElement("ul"); 75 | pagination.setAttribute("class", "onepage-pagination"); 76 | 77 | body.appendChild(pagination) 78 | pagination.innerHTML = paginationList; 79 | var posTop = (document.querySelector(".onepage-pagination").offsetHeight / 2) * -1; 80 | document.querySelector(".onepage-pagination").style.marginTop = posTop; 81 | } 82 | 83 | if(window.location.hash != "" && window.location.hash != "#1") { 84 | var init_index = window.location.hash.replace("#", ""), 85 | next = document.querySelector(settings.sectionContainer + "[data-index='" + (init_index) + "']"), 86 | next_index = next.dataset.index; 87 | 88 | _addClass( document.querySelector(settings.sectionContainer + "[data-index='" + init_index + "']") ,"active") 89 | _addClass(body, "viewing-page-"+ init_index) 90 | if(settings.pagination == true) _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + init_index + "']"), "active"); 91 | 92 | if(next) { 93 | _addClass(next, "active") 94 | if(settings.pagination == true) _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + init_index + "']"), "active"); 95 | 96 | body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, ''); 97 | _addClass(body, "viewing-page-" + next_index) 98 | if (history.replaceState && settings.updateURL == true) { 99 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index); 100 | history.pushState( {}, document.title, href ); 101 | } 102 | } 103 | var pos = ((init_index - 1) * 100) * -1; 104 | _transformPage(el, settings, pos, init_index); 105 | 106 | }else{ 107 | _addClass(document.querySelector(settings.sectionContainer + "[data-index='1']"), "active"); 108 | _addClass(body, "viewing-page-1"); 109 | if(settings.pagination == true) _addClass(document.querySelector(".onepage-pagination li a[data-index='1']"), "active"); 110 | } 111 | 112 | _paginationHandler = function() { 113 | var page_index = this.dataset.index; 114 | moveTo(el, page_index); 115 | } 116 | 117 | 118 | if(settings.pagination == true) { 119 | var pagination_links = document.querySelectorAll(".onepage-pagination li a"); 120 | 121 | for( var i = 0; i < pagination_links.length; i++){ 122 | pagination_links[i].addEventListener('click', _paginationHandler); 123 | } 124 | } 125 | 126 | _mouseWheelHandler = function(event) { 127 | event.preventDefault(); 128 | var delta = event.wheelDelta || -event.detail; 129 | if (!_hasClass(body, "disabled-onepage-scroll")) _init_scroll(event, delta); 130 | } 131 | 132 | document.addEventListener('mousewheel', _mouseWheelHandler); 133 | document.addEventListener('DOMMouseScroll', _mouseWheelHandler); 134 | 135 | 136 | if(settings.responsiveFallback != false) { 137 | window.onresize = function(){ 138 | _responsive(); 139 | } 140 | 141 | _responsive(); 142 | } 143 | 144 | _keydownHandler = function(e) { 145 | var tag = e.target.tagName.toLowerCase(); 146 | 147 | if (!_hasClass(body, "disabled-onepage-scroll")) { 148 | switch(e.which) { 149 | case 38: 150 | if (tag != 'input' && tag != 'textarea') moveUp(el) 151 | break; 152 | case 40: 153 | if (tag != 'input' && tag != 'textarea') moveDown(el) 154 | break; 155 | default: return; 156 | } 157 | } 158 | return false; 159 | } 160 | 161 | if(settings.keyboard == true) { 162 | document.onkeydown = _keydownHandler; 163 | } 164 | return false; 165 | } 166 | 167 | /*-------------------------------------------------------*/ 168 | /* Private Functions */ 169 | /*-------------------------------------------------------*/ 170 | /*------------------------------------------------*/ 171 | /* Credit: Eike Send for the awesome swipe event */ 172 | /*------------------------------------------------*/ 173 | _swipeEvents = function(el){ 174 | var startX, 175 | startY; 176 | 177 | document.addEventListener("touchstart", touchstart); 178 | 179 | function touchstart(event) { 180 | var touches = event.touches; 181 | if (touches && touches.length) { 182 | startX = touches[0].pageX; 183 | startY = touches[0].pageY; 184 | document.addEventListener("touchmove", touchmove); 185 | } 186 | } 187 | 188 | function touchmove(event) { 189 | var touches = event.touches; 190 | if (touches && touches.length) { 191 | event.preventDefault(); 192 | var deltaX = startX - touches[0].pageX; 193 | var deltaY = startY - touches[0].pageY; 194 | 195 | if (deltaX >= 50) { 196 | var event = new Event('swipeLeft'); 197 | document.dispatchEvent(event); 198 | } 199 | if (deltaX <= -50) { 200 | var event = new Event('swipeRight'); 201 | document.dispatchEvent(event); 202 | } 203 | if (deltaY >= 50) { 204 | var event = new Event('swipeUp'); 205 | document.dispatchEvent(event); 206 | } 207 | if (deltaY <= -50) { 208 | var event = new Event('swipeDown'); 209 | document.dispatchEvent(event); 210 | } 211 | 212 | if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { 213 | document.removeEventListener('touchmove', touchmove); 214 | } 215 | } 216 | } 217 | 218 | }; 219 | /*-----------------------------------------------------------*/ 220 | /* Utility to add/remove class easily with javascript */ 221 | /*-----------------------------------------------------------*/ 222 | 223 | _trim = function(str) { 224 | return str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 225 | } 226 | 227 | _hasClass = function(ele,cls) { 228 | if (ele.className) { 229 | return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 230 | } else { 231 | return ele.className = cls; 232 | } 233 | } 234 | 235 | _addClass = function(ele,cls) { 236 | if (!_hasClass(ele,cls)) ele.className += " "+cls; 237 | ele.className = _trim(ele.className) 238 | } 239 | 240 | _removeClass = function(ele,cls) { 241 | if (_hasClass(ele,cls)) { 242 | var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 243 | ele.className=ele.className.replace(reg,' '); 244 | } 245 | ele.className = _trim(ele.className) 246 | } 247 | 248 | /*-----------------------------------------------------------*/ 249 | /* Transtionend Normalizer by Modernizr */ 250 | /*-----------------------------------------------------------*/ 251 | 252 | _whichTransitionEvent = function(){ 253 | var t; 254 | var el = document.createElement('fakeelement'); 255 | var transitions = { 256 | 'transition':'transitionend', 257 | 'OTransition':'oTransitionEnd', 258 | 'MozTransition':'transitionend', 259 | 'WebkitTransition':'webkitTransitionEnd' 260 | } 261 | 262 | for(t in transitions){ 263 | if( el.style[t] !== undefined ){ 264 | return transitions[t]; 265 | } 266 | } 267 | } 268 | 269 | /*-----------------------------------------------------------*/ 270 | /* Function to perform scroll to top animation */ 271 | /*-----------------------------------------------------------*/ 272 | 273 | _scrollTo = function(element, to, duration) { 274 | if (duration < 0) return; 275 | var difference = to - element.scrollTop; 276 | var perTick = difference / duration * 10; 277 | 278 | setTimeout(function() { 279 | element.scrollTop = element.scrollTop + perTick; 280 | if (element.scrollTop == to) return; 281 | _scrollTo(element, to, duration - 10); 282 | }, 10); 283 | } 284 | 285 | 286 | 287 | /*---------------------------------*/ 288 | /* Function to transform the page */ 289 | /*---------------------------------*/ 290 | 291 | _transformPage = function(el2, settings, pos, index, next_el) { 292 | if (typeof settings.beforeMove == 'function') settings.beforeMove(index, next_el); 293 | 294 | var transformCSS = "-webkit-transform: translate3d(0, " + pos + "%, 0); -webkit-transition: -webkit-transform " + settings.animationTime + "ms " + settings.easing + "; -moz-transform: translate3d(0, " + pos + "%, 0); -moz-transition: -moz-transform " + settings.animationTime + "ms " + settings.easing + "; -ms-transform: translate3d(0, " + pos + "%, 0); -ms-transition: -ms-transform " + settings.animationTime + "ms " + settings.easing + "; transform: translate3d(0, " + pos + "%, 0); transition: transform " + settings.animationTime + "ms " + settings.easing + ";"; 295 | 296 | el2.style.cssText = transformCSS; 297 | 298 | var transitionEnd = _whichTransitionEvent(); 299 | el2.addEventListener(transitionEnd, endAnimation, false); 300 | 301 | function endAnimation() { 302 | if (typeof settings.afterMove == 'function') settings.afterMove(index, next_el); 303 | el2.removeEventListener(transitionEnd, endAnimation) 304 | } 305 | } 306 | 307 | /*-------------------------------------------*/ 308 | /* Responsive Fallback trigger */ 309 | /*-------------------------------------------*/ 310 | 311 | _responsive = function() { 312 | 313 | if (document.body.clientWidth < settings.responsiveFallback) { 314 | 315 | _addClass(body, "disabled-onepage-scroll"); 316 | document.removeEventListener('mousewheel', _mouseWheelHandler); 317 | document.removeEventListener('DOMMouseScroll', _mouseWheelHandler); 318 | _swipeEvents(el); 319 | document.removeEventListener("swipeDown"); 320 | document.removeEventListener("swipeUp"); 321 | 322 | } else { 323 | 324 | if (_hasClass(body, "disabled-onepage-scroll")) { 325 | _removeClass(body, "disabled-onepage-scroll"); 326 | _scrollTo(document.documentElement, 0, 2000); 327 | } 328 | 329 | 330 | 331 | _swipeEvents(el); 332 | document.addEventListener("swipeDown", function(event){ 333 | if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault(); 334 | moveUp(el); 335 | }); 336 | document.addEventListener("swipeUp", function(event){ 337 | if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault(); 338 | moveDown(el); 339 | }); 340 | 341 | document.addEventListener('mousewheel', _mouseWheelHandler); 342 | document.addEventListener('DOMMouseScroll', _mouseWheelHandler); 343 | 344 | } 345 | } 346 | 347 | /*-------------------------------------------*/ 348 | /* Initialize scroll detection */ 349 | /*-------------------------------------------*/ 350 | 351 | _init_scroll = function(event, delta) { 352 | var deltaOfInterest = delta, 353 | timeNow = new Date().getTime(); 354 | 355 | // Cancel scroll if currently animating or within quiet period 356 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { 357 | event.preventDefault(); 358 | return; 359 | } 360 | 361 | if (deltaOfInterest < 0) { 362 | moveDown(el) 363 | } else { 364 | moveUp(el) 365 | } 366 | 367 | lastAnimation = timeNow; 368 | } 369 | 370 | 371 | /*-------------------------------------------------------*/ 372 | /* Public Functions */ 373 | /*-------------------------------------------------------*/ 374 | 375 | /*---------------------------------*/ 376 | /* Function to move down section */ 377 | /*---------------------------------*/ 378 | 379 | this.moveDown = function(el3) { 380 | 381 | if (typeof el3 == "string") el3 = document.querySelector(el3); 382 | 383 | var index = document.querySelector(settings.sectionContainer +".active").dataset.index, 384 | current = document.querySelector(settings.sectionContainer + "[data-index='" + index + "']"), 385 | next = document.querySelector(settings.sectionContainer + "[data-index='" + (parseInt(index) + 1) + "']"); 386 | 387 | 388 | if(!next) { 389 | if (settings.loop == true) { 390 | pos = 0; 391 | next = document.querySelector(settings.sectionContainer + "[data-index='1']"); 392 | } else { 393 | return 394 | } 395 | 396 | }else { 397 | pos = (index * 100) * -1; 398 | } 399 | var next_index = next.dataset.index; 400 | _removeClass(current, "active"); 401 | _addClass(next, "active"); 402 | 403 | if(settings.pagination == true) { 404 | _removeClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + index + "']"), "active"); 405 | _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + next_index + "']"), "active"); 406 | } 407 | 408 | body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, ''); 409 | _addClass(body, "viewing-page-"+ next_index); 410 | 411 | if (history.replaceState && settings.updateURL == true) { 412 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(index) + 1); 413 | history.pushState( {}, document.title, href ); 414 | } 415 | _transformPage(el3, settings, pos, next_index, next); 416 | } 417 | 418 | /*---------------------------------*/ 419 | /* Function to move up section */ 420 | /*---------------------------------*/ 421 | 422 | this.moveUp = function(el4) { 423 | 424 | if (typeof el4 == "string") el4 = document.querySelector(el4); 425 | 426 | var index = document.querySelector(settings.sectionContainer +".active").dataset.index, 427 | current = document.querySelector(settings.sectionContainer + "[data-index='" + index + "']"), 428 | next = document.querySelector(settings.sectionContainer + "[data-index='" + (parseInt(index) - 1) + "']"); 429 | 430 | if(!next) { 431 | if (settings.loop == true) { 432 | pos = ((total - 1) * 100) * -1; 433 | next = document.querySelector(settings.sectionContainer + "[data-index='" + total + "']"); 434 | } else { 435 | return 436 | } 437 | }else { 438 | pos = ((next.dataset.index - 1) * 100) * -1; 439 | } 440 | var next_index = next.dataset.index; 441 | _removeClass(current, "active") 442 | _addClass(next, "active") 443 | 444 | if(settings.pagination == true) { 445 | _removeClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + index + "']"), "active"); 446 | _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + next_index + "']"), "active"); 447 | } 448 | body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, ''); 449 | _addClass(body, "viewing-page-"+ next_index); 450 | 451 | if (history.replaceState && settings.updateURL == true) { 452 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(index) - 1); 453 | history.pushState( {}, document.title, href ); 454 | } 455 | _transformPage(el4, settings, pos, next_index, next); 456 | } 457 | 458 | /*-------------------------------------------*/ 459 | /* Function to move to specified section */ 460 | /*-------------------------------------------*/ 461 | 462 | this.moveTo = function(el5, page_index) { 463 | 464 | if (typeof el5 == "string") el5 = document.querySelector(el5); 465 | 466 | var current = document.querySelector(settings.sectionContainer + ".active"), 467 | next = document.querySelector(settings.sectionContainer + "[data-index='" + (page_index) + "']"); 468 | 469 | if(next) { 470 | var next_index = next.dataset.index; 471 | _removeClass(current, "active"); 472 | _addClass(next, "active"); 473 | _removeClass(document.querySelector(".onepage-pagination li a" + ".active"), "active"); 474 | _addClass(document.querySelector(".onepage-pagination li a" + "[data-index='" + (page_index) + "']"), "active"); 475 | 476 | body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, ''); 477 | _addClass(body, "viewing-page-"+ next_index); 478 | 479 | pos = ((page_index - 1) * 100) * -1; 480 | 481 | if (history.replaceState && settings.updateURL == true) { 482 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (parseInt(page_index) - 1); 483 | history.pushState( {}, document.title, href ); 484 | } 485 | _transformPage(el5, settings, pos, page_index, next); 486 | } 487 | } 488 | 489 | this.init(); 490 | } 491 | 492 | /*------------------------------------------------*/ 493 | /* Ulitilities Method */ 494 | /*------------------------------------------------*/ 495 | 496 | /*-----------------------------------------------------------*/ 497 | /* Function by John Resig to replicate extend functionality */ 498 | /*-----------------------------------------------------------*/ 499 | 500 | Object.extend = function(orig){ 501 | if ( orig == null ) 502 | return orig; 503 | 504 | for ( var i = 1; i < arguments.length; i++ ) { 505 | var obj = arguments[i]; 506 | if ( obj != null ) { 507 | for ( var prop in obj ) { 508 | var getter = obj.__lookupGetter__( prop ), 509 | setter = obj.__lookupSetter__( prop ); 510 | 511 | if ( getter || setter ) { 512 | if ( getter ) 513 | orig.__defineGetter__( prop, getter ); 514 | if ( setter ) 515 | orig.__defineSetter__( prop, setter ); 516 | } else { 517 | orig[ prop ] = obj[ prop ]; 518 | } 519 | } 520 | } 521 | } 522 | 523 | return orig; 524 | }; 525 | 526 | 527 | -------------------------------------------------------------------------------- /onepagescroll.min.js: -------------------------------------------------------------------------------- 1 | function onePageScroll(e,t){var n={sectionContainer:"section",easing:"ease",animationTime:1e3,pagination:true,updateURL:false,keyboard:true,beforeMove:null,afterMove:null,loop:false,responsiveFallback:false},r=this,i=Object.extend({},n,t),s=document.querySelector(e),o=document.querySelectorAll(i.sectionContainer),u=o.length,a="off",f=0,l=0,c=500,h="",p=document.querySelector("body");this.init=function(){_addClass(s,"onepage-wrapper");s.style.position="relative";for(var e=0;e"}}_swipeEvents(s);document.addEventListener("swipeDown",function(e){if(!_hasClass(p,"disabled-onepage-scroll"))e.preventDefault();moveUp(s)});document.addEventListener("swipeUp",function(e){if(!_hasClass(p,"disabled-onepage-scroll"))e.preventDefault();moveDown(s)});if(i.pagination==true){var t=document.createElement("ul");t.setAttribute("class","onepage-pagination");p.appendChild(t);t.innerHTML=h;var n=document.querySelector(".onepage-pagination").offsetHeight/2*-1;document.querySelector(".onepage-pagination").style.marginTop=n}if(window.location.hash!=""&&window.location.hash!="#1"){var r=window.location.hash.replace("#",""),u=document.querySelector(i.sectionContainer+"[data-index='"+r+"']"),a=u.dataset.index;_addClass(document.querySelector(i.sectionContainer+"[data-index='"+r+"']"),"active");_addClass(p,"viewing-page-"+r);if(i.pagination==true)_addClass(document.querySelector(".onepage-pagination li a"+"[data-index='"+r+"']"),"active");if(u){_addClass(u,"active");if(i.pagination==true)_addClass(document.querySelector(".onepage-pagination li a"+"[data-index='"+r+"']"),"active");p.className=p.className.replace(/\bviewing-page-\d.*?\b/g,"");_addClass(p,"viewing-page-"+a);if(history.replaceState&&i.updateURL==true){var l=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+r;history.pushState({},document.title,l)}}var c=(r-1)*100*-1;_transformPage(s,i,c,r)}else{_addClass(document.querySelector(i.sectionContainer+"[data-index='1']"),"active");_addClass(p,"viewing-page-1");if(i.pagination==true)_addClass(document.querySelector(".onepage-pagination li a[data-index='1']"),"active")}_paginationHandler=function(){var e=this.dataset.index;moveTo(s,e)};if(i.pagination==true){var d=document.querySelectorAll(".onepage-pagination li a");for(var e=0;e=50){var e=new Event("swipeLeft");document.dispatchEvent(e)}if(s<=-50){var e=new Event("swipeRight");document.dispatchEvent(e)}if(o>=50){var e=new Event("swipeUp");document.dispatchEvent(e)}if(o<=-50){var e=new Event("swipeDown");document.dispatchEvent(e)}if(Math.abs(s)>=50||Math.abs(o)>=50){document.removeEventListener("touchmove",i)}}}var t,n;document.addEventListener("touchstart",r)};_trim=function(e){return e.replace(/^\s\s*/,"").replace(/\s\s*$/,"")};_hasClass=function(e,t){if(e.className){return e.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))}else{return e.className=t}};_addClass=function(e,t){if(!_hasClass(e,t))e.className+=" "+t;e.className=_trim(e.className)};_removeClass=function(e,t){if(_hasClass(e,t)){var n=new RegExp("(\\s|^)"+t+"(\\s|$)");e.className=e.className.replace(n," ")}e.className=_trim(e.className)};_whichTransitionEvent=function(){var e;var t=document.createElement("fakeelement");var n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n){if(t.style[e]!==undefined){return n[e]}}};_scrollTo=function(e,t,n){if(n<0)return;var r=t-e.scrollTop;var i=r/n*10;setTimeout(function(){e.scrollTop=e.scrollTop+i;if(e.scrollTop==t)return;_scrollTo(e,t,n-10)},10)};_transformPage=function(e,t,n,r,i){function u(){if(typeof t.afterMove=="function")t.afterMove(r,i);e.removeEventListener(o,u)}if(typeof t.beforeMove=="function")t.beforeMove(r,i);var s="-webkit-transform: translate3d(0, "+n+"%, 0); -webkit-transition: -webkit-transform "+t.animationTime+"ms "+t.easing+"; -moz-transform: translate3d(0, "+n+"%, 0); -moz-transition: -moz-transform "+t.animationTime+"ms "+t.easing+"; -ms-transform: translate3d(0, "+n+"%, 0); -ms-transition: -ms-transform "+t.animationTime+"ms "+t.easing+"; transform: translate3d(0, "+n+"%, 0); transition: transform "+t.animationTime+"ms "+t.easing+";";e.style.cssText=s;var o=_whichTransitionEvent();e.addEventListener(o,u,false)};_responsive=function(){if(document.body.clientWidth