diff --git a/Demo/demo.html b/Demo/demo.html index 457e7ed..a68b0ba 100644 --- a/Demo/demo.html +++ b/Demo/demo.html @@ -374,7 +374,6 @@

You can customise the animation timing, the selector or even the animation e - Back to The Pete Design Fork me on GitHub diff --git a/Demo/jquery.onepage-scroll.js b/Demo/jquery.onepage-scroll.js index 48a8c26..70f1912 100644 --- a/Demo/jquery.onepage-scroll.js +++ b/Demo/jquery.onepage-scroll.js @@ -1,5 +1,5 @@ /* =========================================================== - * jquery-onepage-scroll.js v1 + * jquery-onepage-scroll.js v1.1 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com @@ -9,6 +9,8 @@ * * Credit: Eike Send for the awesome swipe event * https://github.com/peachananr/onepage-scroll + * + * License: GPL v3 * * ========================================================== */ @@ -19,7 +21,11 @@ easing: "ease", animationTime: 1000, pagination: true, - updateURL: false + updateURL: false, + keyboard: true, + beforeMove: null, + afterMove: null, + loop: false }; /*------------------------------------------------*/ @@ -85,7 +91,7 @@ quietPeriod = 500, paginationList = ""; - $.fn.transformPage = function(settings, pos) { + $.fn.transformPage = function(settings, pos, index) { $(this).css({ "-webkit-transform": "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, @@ -96,59 +102,67 @@ "transform": "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"); - if(index < total) { - current = $(settings.sectionContainer + "[data-index='" + index + "']"); - next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); - if(next) { - 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='" + (index + 1) + "']").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 ); - } - } + current = $(settings.sectionContainer + "[data-index='" + index + "']"); + next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); + if(next.length < 1) { + pos = 0; + next = $(settings.sectionContainer + "[data-index='1']"); + }else { pos = (index * 100) * -1; - el.transformPage(settings, pos); } + if (typeof settings.beforeMove == 'function') settings.beforeMove( current.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, index); } $.fn.moveUp = function() { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); - if(index <= total && index > 1) { - current = $(settings.sectionContainer + "[data-index='" + index + "']"); - next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); - - if(next) { - 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='" + (index - 1) + "']").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 ); - } - } + current = $(settings.sectionContainer + "[data-index='" + index + "']"); + next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); + + if(next.length < 1) { + pos = ((total - 1) * 100) * -1; + next = $(settings.sectionContainer + "[data-index='"+total+"']"); + }else { pos = ((next.data("index") - 1) * 100) * -1; - el.transformPage(settings, pos); } + if (typeof settings.beforeMove == 'function') settings.beforeMove(current.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, index); } function init_scroll(event, delta) { @@ -213,7 +227,7 @@ } } pos = ((init_index - 1) * 100) * -1; - el.transformPage(settings, pos); + el.transformPage(settings, pos, init_index); }else{ $(settings.sectionContainer + "[data-index='1']").addClass("active") @@ -235,7 +249,7 @@ $("body").addClass("viewing-page-"+next.data("index")) } pos = ((page_index - 1) * 100) * -1; - el.transformPage(settings, pos); + el.transformPage(settings, pos, page_index); } if (settings.updateURL == false) return false; }); @@ -248,10 +262,25 @@ var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); + + if(settings.keyboard == true) { + $(document).keydown(function(e) { + var tag = e.target.tagName.toLowerCase(); + switch(e.which) { + case 38: + if (tag != 'input' && tag != 'textarea') el.moveUp() + break; + case 40: + if (tag != 'input' && tag != 'textarea') el.moveDown() + break; + default: return; + } + e.preventDefault(); + }); + } return false; } }(window.jQuery); - diff --git a/README.md b/README.md index 332caad..362eae3 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,10 @@ $(".main").onepage_scroll({ 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. + 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. }); ```` 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. @@ -57,6 +60,31 @@ This method allows you to move the page down by one. This action is equivalent t $(".main").moveDown(); ```` +## 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 diff --git a/jquery.onepage-scroll.js b/jquery.onepage-scroll.js index 48a8c26..70f1912 100644 --- a/jquery.onepage-scroll.js +++ b/jquery.onepage-scroll.js @@ -1,5 +1,5 @@ /* =========================================================== - * jquery-onepage-scroll.js v1 + * jquery-onepage-scroll.js v1.1 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com @@ -9,6 +9,8 @@ * * Credit: Eike Send for the awesome swipe event * https://github.com/peachananr/onepage-scroll + * + * License: GPL v3 * * ========================================================== */ @@ -19,7 +21,11 @@ easing: "ease", animationTime: 1000, pagination: true, - updateURL: false + updateURL: false, + keyboard: true, + beforeMove: null, + afterMove: null, + loop: false }; /*------------------------------------------------*/ @@ -85,7 +91,7 @@ quietPeriod = 500, paginationList = ""; - $.fn.transformPage = function(settings, pos) { + $.fn.transformPage = function(settings, pos, index) { $(this).css({ "-webkit-transform": "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, @@ -96,59 +102,67 @@ "transform": "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"); - if(index < total) { - current = $(settings.sectionContainer + "[data-index='" + index + "']"); - next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); - if(next) { - 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='" + (index + 1) + "']").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 ); - } - } + current = $(settings.sectionContainer + "[data-index='" + index + "']"); + next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); + if(next.length < 1) { + pos = 0; + next = $(settings.sectionContainer + "[data-index='1']"); + }else { pos = (index * 100) * -1; - el.transformPage(settings, pos); } + if (typeof settings.beforeMove == 'function') settings.beforeMove( current.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, index); } $.fn.moveUp = function() { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); - if(index <= total && index > 1) { - current = $(settings.sectionContainer + "[data-index='" + index + "']"); - next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); - - if(next) { - 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='" + (index - 1) + "']").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 ); - } - } + current = $(settings.sectionContainer + "[data-index='" + index + "']"); + next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); + + if(next.length < 1) { + pos = ((total - 1) * 100) * -1; + next = $(settings.sectionContainer + "[data-index='"+total+"']"); + }else { pos = ((next.data("index") - 1) * 100) * -1; - el.transformPage(settings, pos); } + if (typeof settings.beforeMove == 'function') settings.beforeMove(current.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, index); } function init_scroll(event, delta) { @@ -213,7 +227,7 @@ } } pos = ((init_index - 1) * 100) * -1; - el.transformPage(settings, pos); + el.transformPage(settings, pos, init_index); }else{ $(settings.sectionContainer + "[data-index='1']").addClass("active") @@ -235,7 +249,7 @@ $("body").addClass("viewing-page-"+next.data("index")) } pos = ((page_index - 1) * 100) * -1; - el.transformPage(settings, pos); + el.transformPage(settings, pos, page_index); } if (settings.updateURL == false) return false; }); @@ -248,10 +262,25 @@ var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); + + if(settings.keyboard == true) { + $(document).keydown(function(e) { + var tag = e.target.tagName.toLowerCase(); + switch(e.which) { + case 38: + if (tag != 'input' && tag != 'textarea') el.moveUp() + break; + case 40: + if (tag != 'input' && tag != 'textarea') el.moveDown() + break; + default: return; + } + e.preventDefault(); + }); + } return false; } }(window.jQuery); - diff --git a/jquery.onepage-scroll.min.js b/jquery.onepage-scroll.min.js index 364c119..6cc2752 100644 --- a/jquery.onepage-scroll.min.js +++ b/jquery.onepage-scroll.min.js @@ -1 +1 @@ -!function(e){var t={sectionContainer:"section",easing:"ease",animationTime:1e3,pagination:true,updateURL:false};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)}e.preventDefault()}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)}}e.preventDefault()}var t,n,r=e(this);r.bind("touchstart",i)})};e.fn.onepage_scroll=function(n){function o(e,t){deltaOfInterest=t;var n=(new Date).getTime();if(n-lastAnimation1){current=e(r.sectionContainer+"[data-index='"+index+"']");next=e(r.sectionContainer+"[data-index='"+(index-1)+"']");if(next){current.removeClass("active");next.addClass("active");if(r.pagination==true){e(".onepage-pagination li a"+"[data-index='"+index+"']").removeClass("active");e(".onepage-pagination li a"+"[data-index='"+(index-1)+"']").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 n=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(index-1);history.pushState({},document.title,n)}}pos=(next.data("index")-1)*100*-1;t.transformPage(r,pos)}};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);topPos=topPos+100;if(r.pagination==true){paginationList+="
    • "}});i.swipeEvents().bind("swipeDown",function(){i.moveUp()}).bind("swipeUp",function(){i.moveDown()});if(r.pagination==true){e("").prependTo("body");posTop=i.find(".onepage-pagination").height()/2*-1;i.find(".onepage-pagination").css("margin-top",posTop)}if(window.location.hash!=""&&window.location.hash!="#1"){init_index=window.location.hash.replace("#","");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 u=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+init_index;history.pushState({},document.title,u)}}pos=(init_index-1)*100*-1;i.transformPage(r,pos)}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");if(!e(this).hasClass("active")){current=e(r.sectionContainer+".active");next=e(r.sectionContainer+"[data-index='"+t+"']");if(next){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;i.transformPage(r,pos)}if(r.updateURL==false)return false})}e(document).bind("mousewheel DOMMouseScroll",function(e){e.preventDefault();var t=e.originalEvent.wheelDelta||-e.originalEvent.detail;o(e,t)});return false}}(window.jQuery) \ No newline at end of file +!function(e){var t={sectionContainer:"section",easing:"ease",animationTime:1e3,pagination:true,updateURL:false,keyboard:true,beforeMove:null,afterMove:null,loop:false};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)}e.preventDefault()}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)}}e.preventDefault()}var t,n,r=e(this);r.bind("touchstart",i)})};e.fn.onepage_scroll=function(n){function o(e,t){deltaOfInterest=t;var n=(new Date).getTime();if(n-lastAnimation"}});i.swipeEvents().bind("swipeDown",function(){i.moveUp()}).bind("swipeUp",function(){i.moveDown()});if(r.pagination==true){e("
      "+paginationList+"
    ").prependTo("body");posTop=i.find(".onepage-pagination").height()/2*-1;i.find(".onepage-pagination").css("margin-top",posTop)}if(window.location.hash!=""&&window.location.hash!="#1"){init_index=window.location.hash.replace("#","");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 u=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+init_index;history.pushState({},document.title,u)}}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")}if(r.pagination==true){e(".onepage-pagination li a").click(function(){var t=e(this).data("index");if(!e(this).hasClass("active")){current=e(r.sectionContainer+".active");next=e(r.sectionContainer+"[data-index='"+t+"']");if(next){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;i.transformPage(r,pos,t)}if(r.updateURL==false)return false})}e(document).bind("mousewheel DOMMouseScroll",function(e){e.preventDefault();var t=e.originalEvent.wheelDelta||-e.originalEvent.detail;o(e,t)});if(r.keyboard==true){e(document).keydown(function(e){var t=e.target.tagName.toLowerCase();switch(e.which){case 38:if(t!="input"&&t!="textarea")i.moveUp();break;case 40:if(t!="input"&&t!="textarea")i.moveDown();break;default:return}e.preventDefault()})}return false}}(window.jQuery) \ No newline at end of file