Repository: peachananr/onepage-scroll Branch: master Commit: c805fbe98dcb Files: 8 Total size: 55.5 KB Directory structure: gitextract_jwtbp1dq/ ├── Demo/ │ ├── demo.html │ ├── jquery.onepage-scroll.js │ └── onepage-scroll.css ├── README.md ├── _config.yml ├── bower.json ├── jquery.onepage-scroll.js └── onepage-scroll.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: Demo/demo.html ================================================ jQuery One Page Scroll by Pete R. | The Pete Design

One Page Scroll

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

Created by Pete R., Founder of BucketListly

Download on Github
phones

Ready-to-use plugin

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

<div class="main">
<section>...</section>
<section>...</section>
...
</div> $(".main").onepage_scroll();

Pretty Neat Eh?

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'

Download on Github
Back to The Pete Design
================================================ FILE: Demo/jquery.onepage-scroll.js ================================================ /* =========================================================== * jquery-onepage-scroll.js v1.3.1 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com * * Create an Apple-like website that let user scroll * one page at a time * * Credit: Eike Send for the awesome swipe event * https://github.com/peachananr/onepage-scroll * * License: GPL v3 * * ========================================================== */ !function($){ var defaults = { sectionContainer: "section", easing: "ease", animationTime: 1000, pagination: true, updateURL: false, keyboard: true, beforeMove: null, afterMove: null, loop: true, responsiveFallback: false, direction : 'vertical' }; /*------------------------------------------------*/ /* Credit: Eike Send for the awesome swipe event */ /*------------------------------------------------*/ $.fn.swipeEvents = function() { return this.each(function() { var startX, startY, $this = $(this); $this.bind('touchstart', touchstart); function touchstart(event) { var touches = event.originalEvent.touches; if (touches && touches.length) { startX = touches[0].pageX; startY = touches[0].pageY; $this.bind('touchmove', touchmove); } } function touchmove(event) { var touches = event.originalEvent.touches; if (touches && touches.length) { var deltaX = startX - touches[0].pageX; var deltaY = startY - touches[0].pageY; if (deltaX >= 50) { $this.trigger("swipeLeft"); } if (deltaX <= -50) { $this.trigger("swipeRight"); } if (deltaY >= 50) { $this.trigger("swipeUp"); } if (deltaY <= -50) { $this.trigger("swipeDown"); } if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { $this.unbind('touchmove', touchmove); } } } }); }; $.fn.onepage_scroll = function(options){ var settings = $.extend({}, defaults, options), el = $(this), sections = $(settings.sectionContainer) total = sections.length, status = "off", topPos = 0, leftPos = 0, lastAnimation = 0, quietPeriod = 500, paginationList = ""; $.fn.transformPage = function(settings, pos, index) { if (typeof settings.beforeMove == 'function') settings.beforeMove(index); // Just a simple edit that makes use of modernizr to detect an IE8 browser and changes the transform method into // an top animate so IE8 users can also use this script. if($('html').hasClass('ie8')){ if (settings.direction == 'horizontal') { var toppos = (el.width()/100)*pos; $(this).animate({left: toppos+'px'},settings.animationTime); } else { var toppos = (el.height()/100)*pos; $(this).animate({top: toppos+'px'},settings.animationTime); } } else{ $(this).css({ "-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, "-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing, "-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing, "transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "transition": "all " + settings.animationTime + "ms " + settings.easing }); } $(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { if (typeof settings.afterMove == 'function') settings.afterMove(index); }); } $.fn.moveDown = function() { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = 0; next = $(settings.sectionContainer + "[data-index='1']"); } else { return } }else { pos = (index * 100) * -1; } if (typeof settings.beforeMove == 'function') settings.beforeMove( next.data("index")); current.removeClass("active") next.addClass("active"); if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); } $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1); history.pushState( {}, document.title, href ); } el.transformPage(settings, pos, next.data("index")); } $.fn.moveUp = function() { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = ((total - 1) * 100) * -1; next = $(settings.sectionContainer + "[data-index='"+total+"']"); } else { return } }else { pos = ((next.data("index") - 1) * 100) * -1; } if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index")); current.removeClass("active") next.addClass("active") if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); } $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1); history.pushState( {}, document.title, href ); } el.transformPage(settings, pos, next.data("index")); } $.fn.moveTo = function(page_index) { current = $(settings.sectionContainer + ".active") next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']"); if(next.length > 0) { if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index")); current.removeClass("active") next.addClass("active") $(".onepage-pagination li a" + ".active").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active"); $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) pos = ((page_index - 1) * 100) * -1; if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1); history.pushState( {}, document.title, href ); } el.transformPage(settings, pos, page_index); } } function responsive() { //start modification var valForTest = false; var typeOfRF = typeof settings.responsiveFallback if(typeOfRF == "number"){ valForTest = $(window).width() < settings.responsiveFallback; } if(typeOfRF == "boolean"){ valForTest = settings.responsiveFallback; } if(typeOfRF == "function"){ valFunction = settings.responsiveFallback(); valForTest = valFunction; typeOFv = typeof valForTest; if(typeOFv == "number"){ valForTest = $(window).width() < valFunction; } } //end modification if (valForTest) { $("body").addClass("disabled-onepage-scroll"); $(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll'); el.swipeEvents().unbind("swipeDown swipeUp"); } else { if($("body").hasClass("disabled-onepage-scroll")) { $("body").removeClass("disabled-onepage-scroll"); $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast"); } el.swipeEvents().bind("swipeDown", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); } } function init_scroll(event, delta) { deltaOfInterest = delta; var timeNow = new Date().getTime(); // Cancel scroll if currently animating or within quiet period if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { event.preventDefault(); return; } if (deltaOfInterest < 0) { el.moveDown() } else { el.moveUp() } lastAnimation = timeNow; } // Prepare everything before binding wheel scroll el.addClass("onepage-wrapper").css("position","relative"); $.each( sections, function(i) { $(this).css({ position: "absolute", top: topPos + "%" }).addClass("section").attr("data-index", i+1); $(this).css({ position: "absolute", left: ( settings.direction == 'horizontal' ) ? leftPos + "%" : 0, top: ( settings.direction == 'vertical' || settings.direction != 'horizontal' ) ? topPos + "%" : 0 }); if (settings.direction == 'horizontal') leftPos = leftPos + 100; else topPos = topPos + 100; if(settings.pagination == true) { paginationList += "
    • " } }); el.swipeEvents().bind("swipeDown", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); // Create Pagination and Display Them if (settings.pagination == true) { if ($('ul.onepage-pagination').length < 1) $("").prependTo("body"); if( settings.direction == 'horizontal' ) { posLeft = (el.find(".onepage-pagination").width() / 2) * -1; el.find(".onepage-pagination").css("margin-left", posLeft); } else { posTop = (el.find(".onepage-pagination").height() / 2) * -1; el.find(".onepage-pagination").css("margin-top", posTop); } $('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) { $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active") $("body").addClass("viewing-page-"+ init_index) if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']"); if(next) { next.addClass("active") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active"); $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index); history.pushState( {}, document.title, href ); } } pos = ((init_index - 1) * 100) * -1; el.transformPage(settings, pos, init_index); } else { $(settings.sectionContainer + "[data-index='1']").addClass("active") $("body").addClass("viewing-page-1") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); } }else{ $(settings.sectionContainer + "[data-index='1']").addClass("active") $("body").addClass("viewing-page-1") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); } if(settings.pagination == true) { $(".onepage-pagination li a").click(function (){ var page_index = $(this).data("index"); el.moveTo(page_index); }); } $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; if(!$("body").hasClass("disabled-onepage-scroll")) init_scroll(event, delta); }); if(settings.responsiveFallback != false) { $(window).resize(function() { responsive(); }); responsive(); } if(settings.keyboard == true) { $(document).keydown(function(e) { var tag = e.target.tagName.toLowerCase(); if (!$("body").hasClass("disabled-onepage-scroll")) { switch(e.which) { case 38: if (tag != 'input' && tag != 'textarea') el.moveUp() break; case 40: if (tag != 'input' && tag != 'textarea') el.moveDown() break; case 32: //spacebar if (tag != 'input' && tag != 'textarea') el.moveDown() break; case 33: //pageg up if (tag != 'input' && tag != 'textarea') el.moveUp() break; case 34: //page dwn if (tag != 'input' && tag != 'textarea') el.moveDown() break; case 36: //home el.moveTo(1); break; case 35: //end el.moveTo(total); break; default: return; } } }); } return false; } }(window.jQuery); ================================================ FILE: Demo/onepage-scroll.css ================================================ body, html { margin: 0; overflow: hidden; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; transition: opacity 400ms; } body, .onepage-wrapper, html { display: block; position: static; padding: 0; width: 100%; height: 100%; } .onepage-wrapper { width: 100%; height: 100%; display: block; position: relative; padding: 0; -webkit-transform-style: preserve-3d; } .onepage-wrapper .section { width: 100%; height: 100%; } .onepage-pagination { position: absolute; right: 10px; top: 50%; z-index: 5; list-style: none; margin: 0; padding: 0; } .onepage-pagination li { padding: 0; text-align: center; } .onepage-pagination li a{ padding: 10px; width: 4px; height: 4px; display: block; } .onepage-pagination li a:before{ content: ''; position: absolute; width: 4px; height: 4px; background: rgba(0,0,0,0.85); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .onepage-pagination li a.active:before{ width: 10px; height: 10px; background: none; border: 1px solid black; margin-top: -4px; left: 8px; } .disabled-onepage-scroll, .disabled-onepage-scroll .wrapper { overflow: auto; } .disabled-onepage-scroll .onepage-wrapper .section { position: relative !important; top: auto !important; left: auto !important; } .disabled-onepage-scroll .onepage-wrapper { -webkit-transform: none !important; -moz-transform: none !important; transform: none !important; -ms-transform: none !important; min-height: 100%; } .disabled-onepage-scroll .onepage-pagination { display: none; } body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html { position: inherit; } ================================================ FILE: README.md ================================================ #One Page Scroll 1.3.1 by Pete R. Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com) License: [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/deed.en_US) ## Requirement jQuery (1.9.0 or later) 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. see: http://jsfiddle.net/33WJx/ ## Demo [View demo](http://peachananr.github.io/onepage-scroll/Demo/demo.html) ## Compatibility 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. ## Basic Usage 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. 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: ````html ...
    ...
    ...
    ...
    ... ```` 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: ````javascript $(".main").onepage_scroll({ sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)" animationTime: 1000, // AnimationTime let you define how long each section takes to animate pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide. updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page. beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves. afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves. 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. keyboard: true, // You can activate the keyboard controls responsiveFallback: false, // You can fallback to normal page scroll by defining the width of the browser in which // you want the responsive fallback to be triggered. For example, set this to 600 and whenever // the browser's width is less than 600, the fallback will kick in. 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". }); ```` 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. ## Keyboard Shortcuts You can trigger page move with hotkeys as well: ### Up arrow / Page Up Pressing the up arrow or the page up key allows you to move the page up by one. ### Down arrow / Page Donw Pressing the down arrow or the page down key allows you to move the page down by one. ### Spacebar Pressing the space key allows you to move the page down by one. ### Home Pressing the home key brings you back to the first page. ### End Pressing the end key brings you to the last page. ## Public Methods You can also trigger page move programmatically as well: ### $.fn.moveUp() This method allows you to move the page up by one. This action is equivalent to scrolling up/swiping down. ````javascript $(".main").moveUp(); ```` ### $.fn.moveDown() This method allows you to move the page down by one. This action is equivalent to scrolling down/swiping up. ````javascript $(".main").moveDown(); ```` ### $.fn.moveTo(page_index) This method allows you to move to the specified page index programatically. ````javascript $(".main").moveTo(3); ```` ## Callbacks You can use callbacks to perform actions before or after the page move. ### beforeMove(current_page_index) This callback gets called before the plugin performs its move. ````javascript $(".main").onepage_scroll({ beforeMove: function(index) { ... } }); ```` ### afterMove(next_page_index) This callback gets called after the move animation was performed. ````javascript $(".main").onepage_scroll({ afterMove: function(index) { ... } }); ```` 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). ## Other Resources - [OnePageScroll.js: Creating an Apple’s iPhone 5S Website](http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/) - [Eike Send's jQuery Swipe Events](https://github.com/eikes/jquery.swipe-events.js) - [CSS Easing generator by Matthew Lein](http://matthewlein.com/ceaser/) ================================================ FILE: _config.yml ================================================ theme: jekyll-theme-cayman ================================================ FILE: bower.json ================================================ { "name": "onepage-scroll", "version": "1.3.1", "author": "Pete R", "main": [ "jquery.onepage-scroll.js", "onepage-scroll.css" ], "ignore": [ "Demo", "README.md" ], "dependencies": { "jquery": "~1.10.2" } } ================================================ FILE: jquery.onepage-scroll.js ================================================ /* =========================================================== * jquery-onepage-scroll.js v1.3.1 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com * * Create an Apple-like website that let user scroll * one page at a time * * Credit: Eike Send for the awesome swipe event * https://github.com/peachananr/onepage-scroll * * License: GPL v3 * * ========================================================== */ !function($){ var defaults = { sectionContainer: "section", easing: "ease", animationTime: 1000, pagination: true, updateURL: false, keyboard: true, beforeMove: null, afterMove: null, loop: true, responsiveFallback: false, direction : 'vertical' }; /*------------------------------------------------*/ /* Credit: Eike Send for the awesome swipe event */ /*------------------------------------------------*/ $.fn.swipeEvents = function() { return this.each(function() { var startX, startY, $this = $(this); $this.bind('touchstart', touchstart); function touchstart(event) { var touches = event.originalEvent.touches; if (touches && touches.length) { startX = touches[0].pageX; startY = touches[0].pageY; $this.bind('touchmove', touchmove); } } function touchmove(event) { var touches = event.originalEvent.touches; if (touches && touches.length) { var deltaX = startX - touches[0].pageX; var deltaY = startY - touches[0].pageY; if (deltaX >= 50) { $this.trigger("swipeLeft"); } if (deltaX <= -50) { $this.trigger("swipeRight"); } if (deltaY >= 50) { $this.trigger("swipeUp"); } if (deltaY <= -50) { $this.trigger("swipeDown"); } if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { $this.unbind('touchmove', touchmove); } } } }); }; $.fn.onepage_scroll = function(options){ var settings = $.extend({}, defaults, options), el = $(this), sections = $(settings.sectionContainer) total = sections.length, status = "off", topPos = 0, leftPos = 0, lastAnimation = 0, quietPeriod = 500, paginationList = ""; $.fn.transformPage = function(settings, pos, index) { if (typeof settings.beforeMove == 'function') settings.beforeMove(index); // Just a simple edit that makes use of modernizr to detect an IE8 browser and changes the transform method into // an top animate so IE8 users can also use this script. if($('html').hasClass('ie8')){ if (settings.direction == 'horizontal') { var toppos = (el.width()/100)*pos; $(this).animate({left: toppos+'px'},settings.animationTime); } else { var toppos = (el.height()/100)*pos; $(this).animate({top: toppos+'px'},settings.animationTime); } } else{ $(this).css({ "-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, "-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing, "-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing, "transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "transition": "all " + settings.animationTime + "ms " + settings.easing }); } $(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { if (typeof settings.afterMove == 'function') settings.afterMove(index); }); } $.fn.moveDown = function() { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = 0; next = $(settings.sectionContainer + "[data-index='1']"); } else { return } }else { pos = (index * 100) * -1; } if (typeof settings.beforeMove == 'function') settings.beforeMove( next.data("index")); current.removeClass("active") next.addClass("active"); if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); } $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1); history.pushState( {}, document.title, href ); } el.transformPage(settings, pos, next.data("index")); } $.fn.moveUp = function() { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = ((total - 1) * 100) * -1; next = $(settings.sectionContainer + "[data-index='"+total+"']"); } else { return } }else { pos = ((next.data("index") - 1) * 100) * -1; } if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index")); current.removeClass("active") next.addClass("active") if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); } $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1); history.pushState( {}, document.title, href ); } el.transformPage(settings, pos, next.data("index")); } $.fn.moveTo = function(page_index) { current = $(settings.sectionContainer + ".active") next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']"); if(next.length > 0) { if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index")); current.removeClass("active") next.addClass("active") $(".onepage-pagination li a" + ".active").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active"); $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) pos = ((page_index - 1) * 100) * -1; if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1); history.pushState( {}, document.title, href ); } el.transformPage(settings, pos, page_index); } } function responsive() { //start modification var valForTest = false; var typeOfRF = typeof settings.responsiveFallback if(typeOfRF == "number"){ valForTest = $(window).width() < settings.responsiveFallback; } if(typeOfRF == "boolean"){ valForTest = settings.responsiveFallback; } if(typeOfRF == "function"){ valFunction = settings.responsiveFallback(); valForTest = valFunction; typeOFv = typeof valForTest; if(typeOFv == "number"){ valForTest = $(window).width() < valFunction; } } //end modification if (valForTest) { $("body").addClass("disabled-onepage-scroll"); $(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll'); el.swipeEvents().unbind("swipeDown swipeUp"); } else { if($("body").hasClass("disabled-onepage-scroll")) { $("body").removeClass("disabled-onepage-scroll"); $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast"); } el.swipeEvents().bind("swipeDown", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); } } function init_scroll(event, delta) { deltaOfInterest = delta; var timeNow = new Date().getTime(); // Cancel scroll if currently animating or within quiet period if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { event.preventDefault(); return; } if (deltaOfInterest < 0) { el.moveDown() } else { el.moveUp() } lastAnimation = timeNow; } // Prepare everything before binding wheel scroll el.addClass("onepage-wrapper").css("position","relative"); $.each( sections, function(i) { $(this).css({ position: "absolute", top: topPos + "%" }).addClass("section").attr("data-index", i+1); $(this).css({ position: "absolute", left: ( settings.direction == 'horizontal' ) ? leftPos + "%" : 0, top: ( settings.direction == 'vertical' || settings.direction != 'horizontal' ) ? topPos + "%" : 0 }); if (settings.direction == 'horizontal') leftPos = leftPos + 100; else topPos = topPos + 100; if(settings.pagination == true) { paginationList += "
    • " } }); el.swipeEvents().bind("swipeDown", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); // Create Pagination and Display Them if (settings.pagination == true) { if ($('ul.onepage-pagination').length < 1) $("").prependTo("body"); if( settings.direction == 'horizontal' ) { posLeft = (el.find(".onepage-pagination").width() / 2) * -1; el.find(".onepage-pagination").css("margin-left", posLeft); } else { posTop = (el.find(".onepage-pagination").height() / 2) * -1; el.find(".onepage-pagination").css("margin-top", posTop); } $('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) { $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active") $("body").addClass("viewing-page-"+ init_index) if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']"); if(next) { next.addClass("active") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active"); $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index); history.pushState( {}, document.title, href ); } } pos = ((init_index - 1) * 100) * -1; el.transformPage(settings, pos, init_index); } else { $(settings.sectionContainer + "[data-index='1']").addClass("active") $("body").addClass("viewing-page-1") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); } }else{ $(settings.sectionContainer + "[data-index='1']").addClass("active") $("body").addClass("viewing-page-1") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); } if(settings.pagination == true) { $(".onepage-pagination li a").click(function (){ var page_index = $(this).data("index"); el.moveTo(page_index); }); } $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; if(!$("body").hasClass("disabled-onepage-scroll")) init_scroll(event, delta); }); if(settings.responsiveFallback != false) { $(window).resize(function() { responsive(); }); responsive(); } if(settings.keyboard == true) { $(document).keydown(function(e) { var tag = e.target.tagName.toLowerCase(); if (!$("body").hasClass("disabled-onepage-scroll")) { switch(e.which) { case 38: if (tag != 'input' && tag != 'textarea') el.moveUp() break; case 40: if (tag != 'input' && tag != 'textarea') el.moveDown() break; case 32: //spacebar if (tag != 'input' && tag != 'textarea') el.moveDown() break; case 33: //pageg up if (tag != 'input' && tag != 'textarea') el.moveUp() break; case 34: //page dwn if (tag != 'input' && tag != 'textarea') el.moveDown() break; case 36: //home el.moveTo(1); break; case 35: //end el.moveTo(total); break; default: return; } } }); } return false; } }(window.jQuery); ================================================ FILE: onepage-scroll.css ================================================ body, html { margin: 0; overflow: hidden; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; transition: opacity 400ms; } body, .onepage-wrapper, html { display: block; position: static; padding: 0; width: 100%; height: 100%; } .onepage-wrapper { width: 100%; height: 100%; display: block; position: relative; padding: 0; -webkit-transform-style: preserve-3d; } .onepage-wrapper .section { width: 100%; height: 100%; } .onepage-pagination { position: absolute; right: 10px; top: 50%; z-index: 5; list-style: none; margin: 0; padding: 0; } .onepage-pagination li { padding: 0; text-align: center; } .onepage-pagination li a{ padding: 10px; width: 4px; height: 4px; display: block; } .onepage-pagination li a:before{ content: ''; position: absolute; width: 4px; height: 4px; background: rgba(0,0,0,0.85); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .onepage-pagination li a.active:before{ width: 10px; height: 10px; background: none; border: 1px solid black; margin-top: -4px; left: 8px; } .disabled-onepage-scroll, .disabled-onepage-scroll .wrapper { overflow: auto; } .disabled-onepage-scroll .onepage-wrapper .section { position: relative !important; top: auto !important; left: auto !important; } .disabled-onepage-scroll .onepage-wrapper { -webkit-transform: none !important; -moz-transform: none !important; transform: none !important; -ms-transform: none !important; min-height: 100%; } .disabled-onepage-scroll .onepage-pagination { display: none; } body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html { position: inherit; }