├── _config.yml ├── Demo ├── .DS_Store ├── phones.png ├── back-phone.png ├── tilted-phone.png ├── onepage-scroll.css ├── jquery.onepage-scroll.js └── demo.html ├── bower.json ├── onepage-scroll.css ├── README.md ├── jquery.onepage-scroll.min.js └── jquery.onepage-scroll.js /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /Demo/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/onepage-scroll/HEAD/Demo/.DS_Store -------------------------------------------------------------------------------- /Demo/phones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/onepage-scroll/HEAD/Demo/phones.png -------------------------------------------------------------------------------- /Demo/back-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/onepage-scroll/HEAD/Demo/back-phone.png -------------------------------------------------------------------------------- /Demo/tilted-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/onepage-scroll/HEAD/Demo/tilted-phone.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "onepage-scroll", 3 | "version": "1.3.1", 4 | "author": "Pete R", 5 | "main": [ 6 | "jquery.onepage-scroll.js", 7 | "onepage-scroll.css" 8 | ], 9 | "ignore": [ 10 | "Demo", 11 | "README.md" 12 | ], 13 | "dependencies": { 14 | "jquery": "~1.10.2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /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 .section { 27 | width: 100%; 28 | height: 100%; 29 | } 30 | 31 | .onepage-pagination { 32 | position: absolute; 33 | right: 10px; 34 | top: 50%; 35 | z-index: 5; 36 | list-style: none; 37 | margin: 0; 38 | padding: 0; 39 | } 40 | .onepage-pagination li { 41 | padding: 0; 42 | text-align: center; 43 | } 44 | .onepage-pagination li a{ 45 | padding: 10px; 46 | width: 4px; 47 | height: 4px; 48 | display: block; 49 | 50 | } 51 | .onepage-pagination li a:before{ 52 | content: ''; 53 | position: absolute; 54 | width: 4px; 55 | height: 4px; 56 | background: rgba(0,0,0,0.85); 57 | border-radius: 10px; 58 | -webkit-border-radius: 10px; 59 | -moz-border-radius: 10px; 60 | } 61 | 62 | .onepage-pagination li a.active:before{ 63 | width: 10px; 64 | height: 10px; 65 | background: none; 66 | border: 1px solid black; 67 | margin-top: -4px; 68 | left: 8px; 69 | } 70 | 71 | .disabled-onepage-scroll, .disabled-onepage-scroll .wrapper { 72 | overflow: auto; 73 | } 74 | 75 | .disabled-onepage-scroll .onepage-wrapper .section { 76 | position: relative !important; 77 | top: auto !important; 78 | left: 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/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 .section { 27 | width: 100%; 28 | height: 100%; 29 | } 30 | 31 | .onepage-pagination { 32 | position: absolute; 33 | right: 10px; 34 | top: 50%; 35 | z-index: 5; 36 | list-style: none; 37 | margin: 0; 38 | padding: 0; 39 | } 40 | .onepage-pagination li { 41 | padding: 0; 42 | text-align: center; 43 | } 44 | .onepage-pagination li a{ 45 | padding: 10px; 46 | width: 4px; 47 | height: 4px; 48 | display: block; 49 | 50 | } 51 | .onepage-pagination li a:before{ 52 | content: ''; 53 | position: absolute; 54 | width: 4px; 55 | height: 4px; 56 | background: rgba(0,0,0,0.85); 57 | border-radius: 10px; 58 | -webkit-border-radius: 10px; 59 | -moz-border-radius: 10px; 60 | } 61 | 62 | .onepage-pagination li a.active:before{ 63 | width: 10px; 64 | height: 10px; 65 | background: none; 66 | border: 1px solid black; 67 | margin-top: -4px; 68 | left: 8px; 69 | } 70 | 71 | .disabled-onepage-scroll, .disabled-onepage-scroll .wrapper { 72 | overflow: auto; 73 | } 74 | 75 | .disabled-onepage-scroll .onepage-wrapper .section { 76 | position: relative !important; 77 | top: auto !important; 78 | left: 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 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #One Page Scroll 1.3.1 by Pete R. 2 | Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin 3 | Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com) 4 | 5 | License: [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/deed.en_US) 6 | 7 | 8 | ## Requirement 9 | 10 | jQuery (1.9.0 or later) 11 | 12 | note: jQuery 1.9.0 or later is strongly recommended because using jQuery less than 1.8.3 and jquery.onepage-scroll.js together turns out to be a hash-based XSS vulnerabiliry. 13 | 14 | see: http://jsfiddle.net/33WJx/ 15 | 16 | ## Demo 17 | [View demo](http://peachananr.github.io/onepage-scroll/Demo/demo.html) 18 | 19 | ## Compatibility 20 | Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Should work fine on IE8 and IE9 as well. 21 | 22 | ## Basic Usage 23 | 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. 24 | 25 | 26 | To add this to your website, simply include the latest jQuery library together with `jquery.onepage-scroll.js`, `onepage-scroll.css` into your document's `` and call the function as follows: 27 | 28 | ````html 29 | 30 | ... 31 |
32 |
...
33 |
...
34 | ... 35 |
36 | ... 37 | 38 | ```` 39 | 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: 40 | 41 | ````javascript 42 | $(".main").onepage_scroll({ 43 | sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section 44 | easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", 45 | // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)" 46 | animationTime: 1000, // AnimationTime let you define how long each section takes to animate 47 | pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide. 48 | updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page. 49 | beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves. 50 | afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves. 51 | 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. 52 | keyboard: true, // You can activate the keyboard controls 53 | responsiveFallback: false, // You can fallback to normal page scroll by defining the width of the browser in which 54 | // you want the responsive fallback to be triggered. For example, set this to 600 and whenever 55 | // the browser's width is less than 600, the fallback will kick in. 56 | direction: "vertical" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical". 57 | }); 58 | ```` 59 | 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. 60 | 61 | ## Keyboard Shortcuts 62 | You can trigger page move with hotkeys as well: 63 | 64 | ### Up arrow / Page Up 65 | Pressing the up arrow or the page up key allows you to move the page up by one. 66 | 67 | 68 | ### Down arrow / Page Donw 69 | Pressing the down arrow or the page down key allows you to move the page down by one. 70 | 71 | ### Spacebar 72 | Pressing the space key allows you to move the page down by one. 73 | 74 | ### Home 75 | Pressing the home key brings you back to the first page. 76 | 77 | 78 | ### End 79 | Pressing the end key brings you to the last page. 80 | 81 | ## Public Methods 82 | You can also trigger page move programmatically as well: 83 | 84 | ### $.fn.moveUp() 85 | This method allows you to move the page up by one. This action is equivalent to scrolling up/swiping down. 86 | 87 | ````javascript 88 | $(".main").moveUp(); 89 | ```` 90 | 91 | ### $.fn.moveDown() 92 | This method allows you to move the page down by one. This action is equivalent to scrolling down/swiping up. 93 | 94 | ````javascript 95 | $(".main").moveDown(); 96 | ```` 97 | 98 | ### $.fn.moveTo(page_index) 99 | This method allows you to move to the specified page index programatically. 100 | 101 | ````javascript 102 | $(".main").moveTo(3); 103 | ```` 104 | 105 | ## Callbacks 106 | You can use callbacks to perform actions before or after the page move. 107 | 108 | ### beforeMove(current_page_index) 109 | This callback gets called before the plugin performs its move. 110 | 111 | ````javascript 112 | $(".main").onepage_scroll({ 113 | beforeMove: function(index) { 114 | ... 115 | } 116 | }); 117 | ```` 118 | 119 | ### afterMove(next_page_index) 120 | This callback gets called after the move animation was performed. 121 | 122 | ````javascript 123 | $(".main").onepage_scroll({ 124 | afterMove: function(index) { 125 | ... 126 | } 127 | }); 128 | ```` 129 | 130 | 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). 131 | 132 | ## Other Resources 133 | - [OnePageScroll.js: Creating an Apple’s iPhone 5S Website](http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/) 134 | - [Eike Send's jQuery Swipe Events](https://github.com/eikes/jquery.swipe-events.js) 135 | - [CSS Easing generator by Matthew Lein](http://matthewlein.com/ceaser/) 136 | -------------------------------------------------------------------------------- /jquery.onepage-scroll.min.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={sectionContainer:"section",easing:"ease",animationTime:1e3,pagination:true,updateURL:false,keyboard:true,beforeMove:null,afterMove:null,loop:true,responsiveFallback:false,direction:"vertical"};e.fn.swipeEvents=function(){return this.each(function(){function i(e){var i=e.originalEvent.touches;if(i&&i.length){t=i[0].pageX;n=i[0].pageY;r.bind("touchmove",s)}}function s(e){var i=e.originalEvent.touches;if(i&&i.length){var o=t-i[0].pageX;var u=n-i[0].pageY;if(o>=50){r.trigger("swipeLeft")}if(o<=-50){r.trigger("swipeRight")}if(u>=50){r.trigger("swipeUp")}if(u<=-50){r.trigger("swipeDown")}if(Math.abs(o)>=50||Math.abs(u)>=50){r.unbind("touchmove",s)}}}var t,n,r=e(this);r.bind("touchstart",i)})};e.fn.onepage_scroll=function(n){function o(){var t=false;var n=typeof r.responsiveFallback;if(n=="number"){t=e(window).width()0){if(typeof r.beforeMove=="function")r.beforeMove(next.data("index"));current.removeClass("active");next.addClass("active");e(".onepage-pagination li a"+".active").removeClass("active");e(".onepage-pagination li a"+"[data-index='"+t+"']").addClass("active");e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");e("body").addClass("viewing-page-"+next.data("index"));pos=(t-1)*100*-1;if(history.replaceState&&r.updateURL==true){var n=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(t-1);history.pushState({},document.title,n)}i.transformPage(r,pos,t)}};i.addClass("onepage-wrapper").css("position","relative");e.each(s,function(t){e(this).css({position:"absolute",top:topPos+"%"}).addClass("section").attr("data-index",t+1);e(this).css({position:"absolute",left:r.direction=="horizontal"?leftPos+"%":0,top:r.direction=="vertical"||r.direction!="horizontal"?topPos+"%":0});if(r.direction=="horizontal")leftPos=leftPos+100;else topPos=topPos+100;if(r.pagination==true){paginationList+="
    • "}});i.swipeEvents().bind("swipeDown",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveUp()}).bind("swipeUp",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveDown()});if(r.pagination==true){if(e("ul.onepage-pagination").length<1)e("").prependTo("body");if(r.direction=="horizontal"){posLeft=i.find(".onepage-pagination").width()/2*-1;i.find(".onepage-pagination").css("margin-left",posLeft)}else{posTop=i.find(".onepage-pagination").height()/2*-1;i.find(".onepage-pagination").css("margin-top",posTop)}e("ul.onepage-pagination").html(paginationList)}if(window.location.hash!=""&&window.location.hash!="#1"){init_index=window.location.hash.replace("#","");if(parseInt(init_index)<=total&&parseInt(init_index)>0){e(r.sectionContainer+"[data-index='"+init_index+"']").addClass("active");e("body").addClass("viewing-page-"+init_index);if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+init_index+"']").addClass("active");next=e(r.sectionContainer+"[data-index='"+init_index+"']");if(next){next.addClass("active");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+init_index+"']").addClass("active");e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");e("body").addClass("viewing-page-"+next.data("index"));if(history.replaceState&&r.updateURL==true){var a=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+init_index;history.pushState({},document.title,a)}}pos=(init_index-1)*100*-1;i.transformPage(r,pos,init_index)}else{e(r.sectionContainer+"[data-index='1']").addClass("active");e("body").addClass("viewing-page-1");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='1']").addClass("active")}}else{e(r.sectionContainer+"[data-index='1']").addClass("active");e("body").addClass("viewing-page-1");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='1']").addClass("active")}if(r.pagination==true){e(".onepage-pagination li a").click(function(){var t=e(this).data("index");i.moveTo(t)})}e(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll",function(t){t.preventDefault();var n=t.originalEvent.wheelDelta||-t.originalEvent.detail;if(!e("body").hasClass("disabled-onepage-scroll"))u(t,n)});if(r.responsiveFallback!=false){e(window).resize(function(){o()});o()}if(r.keyboard==true){e(document).keydown(function(t){var n=t.target.tagName.toLowerCase();if(!e("body").hasClass("disabled-onepage-scroll")){switch(t.which){case 38:if(n!="input"&&n!="textarea")i.moveUp();break;case 40:if(n!="input"&&n!="textarea")i.moveDown();break;case 32:if(n!="input"&&n!="textarea")i.moveDown();break;case 33:if(n!="input"&&n!="textarea")i.moveUp();break;case 34:if(n!="input"&&n!="textarea")i.moveDown();break;case 36:i.moveTo(1);break;case 35:i.moveTo(total);break;default:return}}})}return false}}(window.jQuery) 2 | -------------------------------------------------------------------------------- /jquery.onepage-scroll.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * jquery-onepage-scroll.js v1.3.1 3 | * =========================================================== 4 | * Copyright 2013 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/onepage-scroll 12 | * 13 | * License: GPL v3 14 | * 15 | * ========================================================== */ 16 | 17 | !function($){ 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: true, 29 | responsiveFallback: false, 30 | direction : 'vertical' 31 | }; 32 | 33 | /*------------------------------------------------*/ 34 | /* Credit: Eike Send for the awesome swipe event */ 35 | /*------------------------------------------------*/ 36 | 37 | $.fn.swipeEvents = function() { 38 | return this.each(function() { 39 | 40 | var startX, 41 | startY, 42 | $this = $(this); 43 | 44 | $this.bind('touchstart', touchstart); 45 | 46 | function touchstart(event) { 47 | var touches = event.originalEvent.touches; 48 | if (touches && touches.length) { 49 | startX = touches[0].pageX; 50 | startY = touches[0].pageY; 51 | $this.bind('touchmove', touchmove); 52 | } 53 | } 54 | 55 | function touchmove(event) { 56 | var touches = event.originalEvent.touches; 57 | if (touches && touches.length) { 58 | var deltaX = startX - touches[0].pageX; 59 | var deltaY = startY - touches[0].pageY; 60 | 61 | if (deltaX >= 50) { 62 | $this.trigger("swipeLeft"); 63 | } 64 | if (deltaX <= -50) { 65 | $this.trigger("swipeRight"); 66 | } 67 | if (deltaY >= 50) { 68 | $this.trigger("swipeUp"); 69 | } 70 | if (deltaY <= -50) { 71 | $this.trigger("swipeDown"); 72 | } 73 | if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { 74 | $this.unbind('touchmove', touchmove); 75 | } 76 | } 77 | } 78 | 79 | }); 80 | }; 81 | 82 | 83 | $.fn.onepage_scroll = function(options){ 84 | var settings = $.extend({}, defaults, options), 85 | el = $(this), 86 | sections = $(settings.sectionContainer) 87 | total = sections.length, 88 | status = "off", 89 | topPos = 0, 90 | leftPos = 0, 91 | lastAnimation = 0, 92 | quietPeriod = 500, 93 | paginationList = ""; 94 | 95 | $.fn.transformPage = function(settings, pos, index) { 96 | if (typeof settings.beforeMove == 'function') settings.beforeMove(index); 97 | 98 | // Just a simple edit that makes use of modernizr to detect an IE8 browser and changes the transform method into 99 | // an top animate so IE8 users can also use this script. 100 | if($('html').hasClass('ie8')){ 101 | if (settings.direction == 'horizontal') { 102 | var toppos = (el.width()/100)*pos; 103 | $(this).animate({left: toppos+'px'},settings.animationTime); 104 | } else { 105 | var toppos = (el.height()/100)*pos; 106 | $(this).animate({top: toppos+'px'},settings.animationTime); 107 | } 108 | } else{ 109 | $(this).css({ 110 | "-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", 111 | "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, 112 | "-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", 113 | "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing, 114 | "-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", 115 | "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing, 116 | "transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", 117 | "transition": "all " + settings.animationTime + "ms " + settings.easing 118 | }); 119 | } 120 | $(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 121 | if (typeof settings.afterMove == 'function') settings.afterMove(index); 122 | }); 123 | } 124 | 125 | $.fn.moveDown = function() { 126 | var el = $(this) 127 | index = $(settings.sectionContainer +".active").data("index"); 128 | current = $(settings.sectionContainer + "[data-index='" + index + "']"); 129 | next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); 130 | if(next.length < 1) { 131 | if (settings.loop == true) { 132 | pos = 0; 133 | next = $(settings.sectionContainer + "[data-index='1']"); 134 | } else { 135 | return 136 | } 137 | 138 | }else { 139 | pos = (index * 100) * -1; 140 | } 141 | if (typeof settings.beforeMove == 'function') settings.beforeMove( next.data("index")); 142 | current.removeClass("active") 143 | next.addClass("active"); 144 | if(settings.pagination == true) { 145 | $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); 146 | $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); 147 | } 148 | 149 | $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); 150 | $("body").addClass("viewing-page-"+next.data("index")) 151 | 152 | if (history.replaceState && settings.updateURL == true) { 153 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1); 154 | history.pushState( {}, document.title, href ); 155 | } 156 | el.transformPage(settings, pos, next.data("index")); 157 | } 158 | 159 | $.fn.moveUp = function() { 160 | var el = $(this) 161 | index = $(settings.sectionContainer +".active").data("index"); 162 | current = $(settings.sectionContainer + "[data-index='" + index + "']"); 163 | next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); 164 | 165 | if(next.length < 1) { 166 | if (settings.loop == true) { 167 | pos = ((total - 1) * 100) * -1; 168 | next = $(settings.sectionContainer + "[data-index='"+total+"']"); 169 | } 170 | else { 171 | return 172 | } 173 | }else { 174 | pos = ((next.data("index") - 1) * 100) * -1; 175 | } 176 | if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index")); 177 | current.removeClass("active") 178 | next.addClass("active") 179 | if(settings.pagination == true) { 180 | $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); 181 | $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); 182 | } 183 | $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); 184 | $("body").addClass("viewing-page-"+next.data("index")) 185 | 186 | if (history.replaceState && settings.updateURL == true) { 187 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1); 188 | history.pushState( {}, document.title, href ); 189 | } 190 | el.transformPage(settings, pos, next.data("index")); 191 | } 192 | 193 | $.fn.moveTo = function(page_index) { 194 | current = $(settings.sectionContainer + ".active") 195 | next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']"); 196 | if(next.length > 0) { 197 | if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index")); 198 | current.removeClass("active") 199 | next.addClass("active") 200 | $(".onepage-pagination li a" + ".active").removeClass("active"); 201 | $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active"); 202 | $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); 203 | $("body").addClass("viewing-page-"+next.data("index")) 204 | 205 | pos = ((page_index - 1) * 100) * -1; 206 | 207 | if (history.replaceState && settings.updateURL == true) { 208 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1); 209 | history.pushState( {}, document.title, href ); 210 | } 211 | el.transformPage(settings, pos, page_index); 212 | } 213 | } 214 | 215 | function responsive() { 216 | //start modification 217 | var valForTest = false; 218 | var typeOfRF = typeof settings.responsiveFallback 219 | 220 | if(typeOfRF == "number"){ 221 | valForTest = $(window).width() < settings.responsiveFallback; 222 | } 223 | if(typeOfRF == "boolean"){ 224 | valForTest = settings.responsiveFallback; 225 | } 226 | if(typeOfRF == "function"){ 227 | valFunction = settings.responsiveFallback(); 228 | valForTest = valFunction; 229 | typeOFv = typeof valForTest; 230 | if(typeOFv == "number"){ 231 | valForTest = $(window).width() < valFunction; 232 | } 233 | } 234 | 235 | //end modification 236 | if (valForTest) { 237 | $("body").addClass("disabled-onepage-scroll"); 238 | $(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll'); 239 | el.swipeEvents().unbind("swipeDown swipeUp"); 240 | } else { 241 | if($("body").hasClass("disabled-onepage-scroll")) { 242 | $("body").removeClass("disabled-onepage-scroll"); 243 | $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast"); 244 | } 245 | 246 | 247 | el.swipeEvents().bind("swipeDown", function(event){ 248 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); 249 | el.moveUp(); 250 | }).bind("swipeUp", function(event){ 251 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); 252 | el.moveDown(); 253 | }); 254 | 255 | $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { 256 | event.preventDefault(); 257 | var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; 258 | init_scroll(event, delta); 259 | }); 260 | } 261 | } 262 | 263 | 264 | function init_scroll(event, delta) { 265 | deltaOfInterest = delta; 266 | var timeNow = new Date().getTime(); 267 | // Cancel scroll if currently animating or within quiet period 268 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { 269 | event.preventDefault(); 270 | return; 271 | } 272 | 273 | if (deltaOfInterest < 0) { 274 | el.moveDown() 275 | } else { 276 | el.moveUp() 277 | } 278 | lastAnimation = timeNow; 279 | } 280 | 281 | // Prepare everything before binding wheel scroll 282 | 283 | el.addClass("onepage-wrapper").css("position","relative"); 284 | $.each( sections, function(i) { 285 | $(this).css({ 286 | position: "absolute", 287 | top: topPos + "%" 288 | }).addClass("section").attr("data-index", i+1); 289 | 290 | 291 | $(this).css({ 292 | position: "absolute", 293 | left: ( settings.direction == 'horizontal' ) 294 | ? leftPos + "%" 295 | : 0, 296 | top: ( settings.direction == 'vertical' || settings.direction != 'horizontal' ) 297 | ? topPos + "%" 298 | : 0 299 | }); 300 | 301 | if (settings.direction == 'horizontal') 302 | leftPos = leftPos + 100; 303 | else 304 | topPos = topPos + 100; 305 | 306 | 307 | if(settings.pagination == true) { 308 | paginationList += "
    • " 309 | } 310 | }); 311 | 312 | el.swipeEvents().bind("swipeDown", function(event){ 313 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); 314 | el.moveUp(); 315 | }).bind("swipeUp", function(event){ 316 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); 317 | el.moveDown(); 318 | }); 319 | 320 | // Create Pagination and Display Them 321 | if (settings.pagination == true) { 322 | if ($('ul.onepage-pagination').length < 1) $("").prependTo("body"); 323 | 324 | if( settings.direction == 'horizontal' ) { 325 | posLeft = (el.find(".onepage-pagination").width() / 2) * -1; 326 | el.find(".onepage-pagination").css("margin-left", posLeft); 327 | } else { 328 | posTop = (el.find(".onepage-pagination").height() / 2) * -1; 329 | el.find(".onepage-pagination").css("margin-top", posTop); 330 | } 331 | $('ul.onepage-pagination').html(paginationList); 332 | } 333 | 334 | if(window.location.hash != "" && window.location.hash != "#1") { 335 | init_index = window.location.hash.replace("#", "") 336 | 337 | if (parseInt(init_index) <= total && parseInt(init_index) > 0) { 338 | $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active") 339 | $("body").addClass("viewing-page-"+ init_index) 340 | if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); 341 | 342 | next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']"); 343 | if(next) { 344 | next.addClass("active") 345 | if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active"); 346 | $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); 347 | $("body").addClass("viewing-page-"+next.data("index")) 348 | if (history.replaceState && settings.updateURL == true) { 349 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index); 350 | history.pushState( {}, document.title, href ); 351 | } 352 | } 353 | pos = ((init_index - 1) * 100) * -1; 354 | el.transformPage(settings, pos, init_index); 355 | } else { 356 | $(settings.sectionContainer + "[data-index='1']").addClass("active") 357 | $("body").addClass("viewing-page-1") 358 | if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); 359 | } 360 | }else{ 361 | $(settings.sectionContainer + "[data-index='1']").addClass("active") 362 | $("body").addClass("viewing-page-1") 363 | if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); 364 | } 365 | 366 | if(settings.pagination == true) { 367 | $(".onepage-pagination li a").click(function (){ 368 | var page_index = $(this).data("index"); 369 | el.moveTo(page_index); 370 | }); 371 | } 372 | 373 | 374 | $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { 375 | event.preventDefault(); 376 | var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; 377 | if(!$("body").hasClass("disabled-onepage-scroll")) init_scroll(event, delta); 378 | }); 379 | 380 | 381 | if(settings.responsiveFallback != false) { 382 | $(window).resize(function() { 383 | responsive(); 384 | }); 385 | 386 | responsive(); 387 | } 388 | 389 | if(settings.keyboard == true) { 390 | $(document).keydown(function(e) { 391 | var tag = e.target.tagName.toLowerCase(); 392 | 393 | if (!$("body").hasClass("disabled-onepage-scroll")) { 394 | switch(e.which) { 395 | case 38: 396 | if (tag != 'input' && tag != 'textarea') el.moveUp() 397 | break; 398 | case 40: 399 | if (tag != 'input' && tag != 'textarea') el.moveDown() 400 | break; 401 | case 32: //spacebar 402 | if (tag != 'input' && tag != 'textarea') el.moveDown() 403 | break; 404 | case 33: //pageg up 405 | if (tag != 'input' && tag != 'textarea') el.moveUp() 406 | break; 407 | case 34: //page dwn 408 | if (tag != 'input' && tag != 'textarea') el.moveDown() 409 | break; 410 | case 36: //home 411 | el.moveTo(1); 412 | break; 413 | case 35: //end 414 | el.moveTo(total); 415 | break; 416 | default: return; 417 | } 418 | } 419 | 420 | }); 421 | } 422 | return false; 423 | } 424 | 425 | 426 | }(window.jQuery); 427 | -------------------------------------------------------------------------------- /Demo/jquery.onepage-scroll.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * jquery-onepage-scroll.js v1.3.1 3 | * =========================================================== 4 | * Copyright 2013 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/onepage-scroll 12 | * 13 | * License: GPL v3 14 | * 15 | * ========================================================== */ 16 | 17 | !function($){ 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: true, 29 | responsiveFallback: false, 30 | direction : 'vertical' 31 | }; 32 | 33 | /*------------------------------------------------*/ 34 | /* Credit: Eike Send for the awesome swipe event */ 35 | /*------------------------------------------------*/ 36 | 37 | $.fn.swipeEvents = function() { 38 | return this.each(function() { 39 | 40 | var startX, 41 | startY, 42 | $this = $(this); 43 | 44 | $this.bind('touchstart', touchstart); 45 | 46 | function touchstart(event) { 47 | var touches = event.originalEvent.touches; 48 | if (touches && touches.length) { 49 | startX = touches[0].pageX; 50 | startY = touches[0].pageY; 51 | $this.bind('touchmove', touchmove); 52 | } 53 | } 54 | 55 | function touchmove(event) { 56 | var touches = event.originalEvent.touches; 57 | if (touches && touches.length) { 58 | var deltaX = startX - touches[0].pageX; 59 | var deltaY = startY - touches[0].pageY; 60 | 61 | if (deltaX >= 50) { 62 | $this.trigger("swipeLeft"); 63 | } 64 | if (deltaX <= -50) { 65 | $this.trigger("swipeRight"); 66 | } 67 | if (deltaY >= 50) { 68 | $this.trigger("swipeUp"); 69 | } 70 | if (deltaY <= -50) { 71 | $this.trigger("swipeDown"); 72 | } 73 | if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { 74 | $this.unbind('touchmove', touchmove); 75 | } 76 | } 77 | } 78 | 79 | }); 80 | }; 81 | 82 | 83 | $.fn.onepage_scroll = function(options){ 84 | var settings = $.extend({}, defaults, options), 85 | el = $(this), 86 | sections = $(settings.sectionContainer) 87 | total = sections.length, 88 | status = "off", 89 | topPos = 0, 90 | leftPos = 0, 91 | lastAnimation = 0, 92 | quietPeriod = 500, 93 | paginationList = ""; 94 | 95 | $.fn.transformPage = function(settings, pos, index) { 96 | if (typeof settings.beforeMove == 'function') settings.beforeMove(index); 97 | 98 | // Just a simple edit that makes use of modernizr to detect an IE8 browser and changes the transform method into 99 | // an top animate so IE8 users can also use this script. 100 | if($('html').hasClass('ie8')){ 101 | if (settings.direction == 'horizontal') { 102 | var toppos = (el.width()/100)*pos; 103 | $(this).animate({left: toppos+'px'},settings.animationTime); 104 | } else { 105 | var toppos = (el.height()/100)*pos; 106 | $(this).animate({top: toppos+'px'},settings.animationTime); 107 | } 108 | } else{ 109 | $(this).css({ 110 | "-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", 111 | "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, 112 | "-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", 113 | "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing, 114 | "-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", 115 | "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing, 116 | "transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", 117 | "transition": "all " + settings.animationTime + "ms " + settings.easing 118 | }); 119 | } 120 | $(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 121 | if (typeof settings.afterMove == 'function') settings.afterMove(index); 122 | }); 123 | } 124 | 125 | $.fn.moveDown = function() { 126 | var el = $(this) 127 | index = $(settings.sectionContainer +".active").data("index"); 128 | current = $(settings.sectionContainer + "[data-index='" + index + "']"); 129 | next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); 130 | if(next.length < 1) { 131 | if (settings.loop == true) { 132 | pos = 0; 133 | next = $(settings.sectionContainer + "[data-index='1']"); 134 | } else { 135 | return 136 | } 137 | 138 | }else { 139 | pos = (index * 100) * -1; 140 | } 141 | if (typeof settings.beforeMove == 'function') settings.beforeMove( next.data("index")); 142 | current.removeClass("active") 143 | next.addClass("active"); 144 | if(settings.pagination == true) { 145 | $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); 146 | $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); 147 | } 148 | 149 | $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); 150 | $("body").addClass("viewing-page-"+next.data("index")) 151 | 152 | if (history.replaceState && settings.updateURL == true) { 153 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1); 154 | history.pushState( {}, document.title, href ); 155 | } 156 | el.transformPage(settings, pos, next.data("index")); 157 | } 158 | 159 | $.fn.moveUp = function() { 160 | var el = $(this) 161 | index = $(settings.sectionContainer +".active").data("index"); 162 | current = $(settings.sectionContainer + "[data-index='" + index + "']"); 163 | next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); 164 | 165 | if(next.length < 1) { 166 | if (settings.loop == true) { 167 | pos = ((total - 1) * 100) * -1; 168 | next = $(settings.sectionContainer + "[data-index='"+total+"']"); 169 | } 170 | else { 171 | return 172 | } 173 | }else { 174 | pos = ((next.data("index") - 1) * 100) * -1; 175 | } 176 | if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index")); 177 | current.removeClass("active") 178 | next.addClass("active") 179 | if(settings.pagination == true) { 180 | $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); 181 | $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); 182 | } 183 | $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); 184 | $("body").addClass("viewing-page-"+next.data("index")) 185 | 186 | if (history.replaceState && settings.updateURL == true) { 187 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1); 188 | history.pushState( {}, document.title, href ); 189 | } 190 | el.transformPage(settings, pos, next.data("index")); 191 | } 192 | 193 | $.fn.moveTo = function(page_index) { 194 | current = $(settings.sectionContainer + ".active") 195 | next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']"); 196 | if(next.length > 0) { 197 | if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index")); 198 | current.removeClass("active") 199 | next.addClass("active") 200 | $(".onepage-pagination li a" + ".active").removeClass("active"); 201 | $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active"); 202 | $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); 203 | $("body").addClass("viewing-page-"+next.data("index")) 204 | 205 | pos = ((page_index - 1) * 100) * -1; 206 | 207 | if (history.replaceState && settings.updateURL == true) { 208 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1); 209 | history.pushState( {}, document.title, href ); 210 | } 211 | el.transformPage(settings, pos, page_index); 212 | } 213 | } 214 | 215 | function responsive() { 216 | //start modification 217 | var valForTest = false; 218 | var typeOfRF = typeof settings.responsiveFallback 219 | 220 | if(typeOfRF == "number"){ 221 | valForTest = $(window).width() < settings.responsiveFallback; 222 | } 223 | if(typeOfRF == "boolean"){ 224 | valForTest = settings.responsiveFallback; 225 | } 226 | if(typeOfRF == "function"){ 227 | valFunction = settings.responsiveFallback(); 228 | valForTest = valFunction; 229 | typeOFv = typeof valForTest; 230 | if(typeOFv == "number"){ 231 | valForTest = $(window).width() < valFunction; 232 | } 233 | } 234 | 235 | //end modification 236 | if (valForTest) { 237 | $("body").addClass("disabled-onepage-scroll"); 238 | $(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll'); 239 | el.swipeEvents().unbind("swipeDown swipeUp"); 240 | } else { 241 | if($("body").hasClass("disabled-onepage-scroll")) { 242 | $("body").removeClass("disabled-onepage-scroll"); 243 | $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast"); 244 | } 245 | 246 | 247 | el.swipeEvents().bind("swipeDown", function(event){ 248 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); 249 | el.moveUp(); 250 | }).bind("swipeUp", function(event){ 251 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); 252 | el.moveDown(); 253 | }); 254 | 255 | $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { 256 | event.preventDefault(); 257 | var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; 258 | init_scroll(event, delta); 259 | }); 260 | } 261 | } 262 | 263 | 264 | function init_scroll(event, delta) { 265 | deltaOfInterest = delta; 266 | var timeNow = new Date().getTime(); 267 | // Cancel scroll if currently animating or within quiet period 268 | if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { 269 | event.preventDefault(); 270 | return; 271 | } 272 | 273 | if (deltaOfInterest < 0) { 274 | el.moveDown() 275 | } else { 276 | el.moveUp() 277 | } 278 | lastAnimation = timeNow; 279 | } 280 | 281 | // Prepare everything before binding wheel scroll 282 | 283 | el.addClass("onepage-wrapper").css("position","relative"); 284 | $.each( sections, function(i) { 285 | $(this).css({ 286 | position: "absolute", 287 | top: topPos + "%" 288 | }).addClass("section").attr("data-index", i+1); 289 | 290 | 291 | $(this).css({ 292 | position: "absolute", 293 | left: ( settings.direction == 'horizontal' ) 294 | ? leftPos + "%" 295 | : 0, 296 | top: ( settings.direction == 'vertical' || settings.direction != 'horizontal' ) 297 | ? topPos + "%" 298 | : 0 299 | }); 300 | 301 | if (settings.direction == 'horizontal') 302 | leftPos = leftPos + 100; 303 | else 304 | topPos = topPos + 100; 305 | 306 | 307 | if(settings.pagination == true) { 308 | paginationList += "
    • " 309 | } 310 | }); 311 | 312 | el.swipeEvents().bind("swipeDown", function(event){ 313 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); 314 | el.moveUp(); 315 | }).bind("swipeUp", function(event){ 316 | if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); 317 | el.moveDown(); 318 | }); 319 | 320 | // Create Pagination and Display Them 321 | if (settings.pagination == true) { 322 | if ($('ul.onepage-pagination').length < 1) $("").prependTo("body"); 323 | 324 | if( settings.direction == 'horizontal' ) { 325 | posLeft = (el.find(".onepage-pagination").width() / 2) * -1; 326 | el.find(".onepage-pagination").css("margin-left", posLeft); 327 | } else { 328 | posTop = (el.find(".onepage-pagination").height() / 2) * -1; 329 | el.find(".onepage-pagination").css("margin-top", posTop); 330 | } 331 | $('ul.onepage-pagination').html(paginationList); 332 | } 333 | 334 | if(window.location.hash != "" && window.location.hash != "#1") { 335 | init_index = window.location.hash.replace("#", "") 336 | 337 | if (parseInt(init_index) <= total && parseInt(init_index) > 0) { 338 | $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active") 339 | $("body").addClass("viewing-page-"+ init_index) 340 | if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); 341 | 342 | next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']"); 343 | if(next) { 344 | next.addClass("active") 345 | if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active"); 346 | $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); 347 | $("body").addClass("viewing-page-"+next.data("index")) 348 | if (history.replaceState && settings.updateURL == true) { 349 | var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index); 350 | history.pushState( {}, document.title, href ); 351 | } 352 | } 353 | pos = ((init_index - 1) * 100) * -1; 354 | el.transformPage(settings, pos, init_index); 355 | } else { 356 | $(settings.sectionContainer + "[data-index='1']").addClass("active") 357 | $("body").addClass("viewing-page-1") 358 | if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); 359 | } 360 | }else{ 361 | $(settings.sectionContainer + "[data-index='1']").addClass("active") 362 | $("body").addClass("viewing-page-1") 363 | if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); 364 | } 365 | 366 | if(settings.pagination == true) { 367 | $(".onepage-pagination li a").click(function (){ 368 | var page_index = $(this).data("index"); 369 | el.moveTo(page_index); 370 | }); 371 | } 372 | 373 | 374 | $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { 375 | event.preventDefault(); 376 | var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; 377 | if(!$("body").hasClass("disabled-onepage-scroll")) init_scroll(event, delta); 378 | }); 379 | 380 | 381 | if(settings.responsiveFallback != false) { 382 | $(window).resize(function() { 383 | responsive(); 384 | }); 385 | 386 | responsive(); 387 | } 388 | 389 | if(settings.keyboard == true) { 390 | $(document).keydown(function(e) { 391 | var tag = e.target.tagName.toLowerCase(); 392 | 393 | if (!$("body").hasClass("disabled-onepage-scroll")) { 394 | switch(e.which) { 395 | case 38: 396 | if (tag != 'input' && tag != 'textarea') el.moveUp() 397 | break; 398 | case 40: 399 | if (tag != 'input' && tag != 'textarea') el.moveDown() 400 | break; 401 | case 32: //spacebar 402 | if (tag != 'input' && tag != 'textarea') el.moveDown() 403 | break; 404 | case 33: //pageg up 405 | if (tag != 'input' && tag != 'textarea') el.moveUp() 406 | break; 407 | case 34: //page dwn 408 | if (tag != 'input' && tag != 'textarea') el.moveDown() 409 | break; 410 | case 36: //home 411 | el.moveTo(1); 412 | break; 413 | case 35: //end 414 | el.moveTo(total); 415 | break; 416 | default: return; 417 | } 418 | } 419 | 420 | }); 421 | } 422 | return false; 423 | } 424 | 425 | 426 | }(window.jQuery); 427 | -------------------------------------------------------------------------------- /Demo/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery One Page Scroll by Pete R. | The Pete Design 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 578 | 588 | 589 | 590 |
    591 | 592 |
    593 | 594 |
    595 | 596 |
    597 | 598 |
    599 |
    600 |

    One Page Scroll

    601 |

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

    602 |

    Created by Pete R., Founder of BucketListly

    603 |
    604 | Download on Github 605 |
    606 |
    607 | phones 608 |
    609 | 610 |
    611 |
    612 |

    Ready-to-use plugin

    613 |

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

    614 | 615 | <div class="main">
    616 | <section>...</section>
    617 | <section>...</section>
    618 | ...
    619 | </div> 620 |     621 | 622 | 623 | $(".main").onepage_scroll(); 624 | 625 |
    626 |
    627 | 628 |
    629 |
    630 |

    Pretty Neat Eh?

    631 |

    You can customise 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'

    632 |
    633 | Download on Github 634 |
    635 |
    636 |
    637 |
    638 | Back to The Pete Design 639 | Fork me on GitHub 640 |
    641 | 642 | 643 | 650 | 651 | 652 | 653 | 654 | --------------------------------------------------------------------------------