diff --git a/README.md b/README.md index e52e2ae..e4474fd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ -#Fancy Scroll by Pete R. +#Fancy Scroll by Pete R, Updated by Ghanan G Add an Overflow Scroll Effect like on iOS/Android but for your website Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com) +Updated by [Ghanan G.](http://ghanan.ca) [![Notify Better](http://www.thepetedesign.com/images/fancy_scroll_image2.png "Fancy Scroll")](http://www.thepetedesign.com/demos/fancy_scroll_demo.html) @@ -26,7 +27,7 @@ With Fancy Scroll, you can define animation's duration, colours (for glow effect ````javascript $(window).fancy_scroll({ animation: "bounce", // Options available are bounce (like on iOS), or glow (like on Android 4.0+) - bounceDistance: 50, // ONLY for bounce effect: The distance in pixels that page will overflow. Default is 50 pixels. + distance: 50, // The distance in pixels that page will overflow (bounce) or show a glow (glow). Default is 50 pixels. glowColor: "#02A1FA", // ONLY for glow effect: The colour of the glow effect. Default is #02A1FA (blueish). animDuration: "0.3s", // The animation duration. Can take milliseconds (200ms) or seconds value (0.2s). Default is 0.2s animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", // This field accept css easing options. Options available are: linear, ease-in, ease-out, ease-in-out or you can generate it with the tool available here: http://matthewlein.com/ceaser/ @@ -61,6 +62,14 @@ $(".container").fancy_scroll({ ```` Now, your container div will finally have a bounce overflow effect just like your websites. This can be apply to as many divs and/or body as you like. Pretty neat huh? I hope you will find this plugin useful. +## Horizontal Scrolling +By default, the effects work with vertical scrolling. To enable the same effects, but when scrolling horizontally, specify the direction as follows: +````javascript +$(".container").fancy_scroll({ + horizontal: true // Let you define the scrolling direction to be horizontal. + }); +```` + ## Other Resources - Tutorial (Coming Soon) - [CSS Easing generator by Matthew Lein](http://matthewlein.com/ceaser/) diff --git a/demo.html b/demo.html index 0e4da08..0af5236 100644 --- a/demo.html +++ b/demo.html @@ -33,7 +33,6 @@ .wrapper { height: auto !important; - height: 100%; margin: 0 auto; overflow: hidden; } @@ -206,10 +205,23 @@ float: left; background: rgba(255, 255, 255, 0.2); } - .small-main p, .small-main2 p { + .small-main3, .small-main4 { + max-width: 350px; + margin: 15px auto 70px; + overflow-x: scroll; + height: auto; + float: left; + white-space: nowrap; + background: rgba(255, 255, 255, 0.2); + } + .small-main3 .innerWrapper, + .small-main4 .innerWrapper { + display: inline-block; + } + .small-main p, .small-main2, .small-main3 p, .small-main4 p { color: #488AAF; } - .small-main2 { + .small-main2, .small-main4 { margin-left: 15px; } .innerWrapper { @@ -235,10 +247,27 @@ $(".small-main2").fancy_scroll({ innerWrapper: ".innerWrapper", animation: "bounce", - bounceDistance: 100, + distance: 100, animDuration: "0.3s", animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", }); + + $(".small-main3").fancy_scroll({ + innerWrapper: ".innerWrapper", + animation: "glow", + horizontal: true, + animDuration: "0.3s", + animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", + }); + + $(".small-main4").fancy_scroll({ + innerWrapper: ".innerWrapper", + animation: "bounce", + horizontal: true, + distance: 100, + animDuration: "0.3s", + animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", + }); }); @@ -275,6 +304,29 @@

Add Overflow Scroll Effect like on iOS/Android but for your website

+
+

Try scrolling to the left/right

+
+
+
+

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

+

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

+

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

+
+
+
+
+

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

+

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

+

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

+
+
+
+
Back to The Pete Design Fork me on GitHub diff --git a/jquery.fancy-scroll.js b/jquery.fancy-scroll.js index b87534f..8ab7bd3 100644 --- a/jquery.fancy-scroll.js +++ b/jquery.fancy-scroll.js @@ -1,5 +1,5 @@ /* =========================================================== - * jquery-fancy-scroll.js v1 + * jquery-fancy-scroll.js v1.1 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com @@ -15,122 +15,173 @@ var defaults = { animation: "bounce", - bounceDistance: 50, + horizontal: false, + distance: 50, glowColor: "#02A1FA", animDuration: "0.2s", animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", innerWrapper: document }; - $.fn.fancy_scroll = function(options){ + $.fn.fancy_scroll = function(options) { var settings = $.extend({}, defaults, options), - el = $(settings.innerWrapper), + el = $(this).find(settings.innerWrapper), container = $(this), posWas = 0, status = "off"; if (settings.innerWrapper != document) var el = container.find($(settings.innerWrapper)); - - $.fn.bounceEffect = function(px, s, anim, settings) { - + + $.fn.bounceEffect = function(d, s, anim, settings) { if (settings.innerWrapper == document) { var selector = $(this).find("body") } else { var selector = $(this) } - selector.css({ - "-webkit-transform": "translate3d(0, " + px + ", 0)", - "-webkit-transition": "all " + s + " " + anim, - "-moz-transform": "translate3d(0, " + px + ", 0)", - "-moz-transition": "all " + s + " " + anim, - "-ms-transform": "translate3d(0, " + px + ", 0)", - "-ms-transition": "all " + s + " " + anim, - "transform": "translate3d(0, " + px + ", 0)", - "transition": "all " + s + " " + anim - }) + if (settings.horizontal) { + selector.css({ + "-webkit-transform": "translate3d(" + d + "px, 0, 0)", + "-webkit-transition": "all " + s + " " + anim, + "-moz-transform": "translate3d(" + d + "px, 0, 0)", + "-moz-transition": "all " + s + " " + anim, + "-ms-transform": "translate3d(" + d + "px, 0, 0)", + "-ms-transition": "all " + s + " " + anim, + "transform": "translate3d(" + d + "px, 0, 0)", + "transition": "all " + s + " " + anim + }) + } else { + selector.css({ + "-webkit-transform": "translate3d(0, " + d + "px, 0)", + "-webkit-transition": "all " + s + " " + anim, + "-moz-transform": "translate3d(0, " + d + "px, 0)", + "-moz-transition": "all " + s + " " + anim, + "-ms-transform": "translate3d(0, " + d + "px, 0)", + "-ms-transition": "all " + s + " " + anim, + "transform": "translate3d(0, " + d + "px, 0)", + "transition": "all " + s + " " + anim + }) + } } - $.fn.glowEffect = function(shadow, s, anim, settings) { + + + $.fn.glowEffect = function(d, s, anim, settings) { if (settings.innerWrapper == document) { var selector = $(this).find("body") } else { var selector = $(this) } - - selector.css({ - "box-shadow": shadow, - "-webkit-transition": "all " + s + " " + anim, - "-moz-transition": "all " + s + " " + anim, - "-ms-transition": "all " + s + " " + anim, - "transition": "all " + s + " " + anim, - }) + + if (d) { + if (settings.horizontal) { + selector.css({ + "box-shadow": settings.glowColor + " " + d + "px 0 50px -30px inset", + "-webkit-transition": "all " + s + " " + anim, + "-moz-transition": "all " + s + " " + anim, + "-ms-transition": "all " + s + " " + anim, + "transition": "all " + s + " " + anim, + }) + } else { + selector.css({ + "box-shadow": settings.glowColor + " 0 " + d + "px 50px -30px inset", + "-webkit-transition": "all " + s + " " + anim, + "-moz-transition": "all " + s + " " + anim, + "-ms-transition": "all " + s + " " + anim, + "transition": "all " + s + " " + anim, + }) + } + } else { + selector.css({ + "box-shadow": "none", + "-webkit-transition": "all " + s + " " + anim, + "-moz-transition": "all " + s + " " + anim, + "-ms-transition": "all " + s + " " + anim, + "transition": "all " + s + " " + anim, + }) + } } - - container.scroll(function(event){ - var pos = container.scrollTop(); - if(pos > posWas){ //if the user is scrolling down... - if((container.scrollTop() + container.height() >= el.height()) && status == "off") { + container.scroll(function(event) { + var pos, container_hw, el_hw; + + if (settings.horizontal) { + pos = container.scrollLeft(); + container_hw = container.width(); + el_hw = el.width(); + } else { + pos = container.scrollTop(); + container_hw = container.height(); + el_hw = el.height(); + } + + if (pos > posWas) { // if the user is scrolling down/left... + if ((pos + container_hw >= el_hw - 1) && status == "off") { status = "on" + + // Since scroll left is checking within +1 px, + // set the scroll to max ammount if not already to prevent double effects + if (pos + container_hw < el_hw) { + if (settings.horizontal) { + container.scrollLeft(el_hw); + } else { + container.scrollTop(el_hw); + } + } + switch (settings.animation) { case "bounce": - el.bounceEffect(settings.bounceDistance * -1 + "px", settings.animDuration, settings.animEasing, settings); + el.bounceEffect(settings.distance * -1, settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { el.bounceEffect("0", settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { status = "off" }); }); - break; + break; + case "glow": - el.glowEffect(settings.glowColor + " 0 -30px 50px -30px inset", settings.animDuration, settings.animEasing, settings); + el.glowEffect(settings.distance * -1, settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { - el.glowEffect("none", settings.animDuration, settings.animEasing, settings); + el.glowEffect(null, settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { status = "off" }); }); - break; + break; } - } - } - if(pos < posWas){ //if the user is scrolling up... - if((container.scrollTop() + container.height() != el.height()) && status == "off") { - if(container.scrollTop() <= 0) { + } else if (pos < posWas) { // if the user is scrolling up/right... + if ((pos + container_hw != el_hw) && status == "off") { + if (pos <= 0) { status = "on" + switch (settings.animation) { case "bounce": - el.bounceEffect(settings.bounceDistance + "px", settings.animDuration, settings.animEasing, settings); + el.bounceEffect(settings.distance, settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { - el.bounceEffect("0px", settings.animDuration, settings.animEasing, settings); + el.bounceEffect("0", settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { status = "off" }); }); - break; + break; + case "glow": - el.glowEffect(settings.glowColor + " 0 30px 50px -30px inset", settings.animDuration, settings.animEasing, settings); + el.glowEffect(settings.distance, settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { - el.glowEffect("none", settings.animDuration, settings.animEasing, settings); + el.glowEffect(null, settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { status = "off" }); }); - break; + break; } - - } } - } + } + posWas = pos; - }); - } - }(window.jQuery); - - diff --git a/jquery.fancy-scroll.min.js b/jquery.fancy-scroll.min.js index ff87a0e..23e3c1d 100644 --- a/jquery.fancy-scroll.min.js +++ b/jquery.fancy-scroll.min.js @@ -1 +1 @@ -!function(e){var t={animation:"bounce",bounceDistance:50,glowColor:"#02A1FA",animDuration:"0.2s",animEasing:"cubic-bezier(0.175, 0.885, 0.420, 1.310)",innerWrapper:document};e.fn.fancy_scroll=function(n){var r=e.extend({},t,n),i=e(r.innerWrapper),s=e(this),o=0,u="off";if(r.innerWrapper!=document)var i=s.find(e(r.innerWrapper));e.fn.bounceEffect=function(t,n,r,i){if(i.innerWrapper==document){var s=e(this).find("body")}else{var s=e(this)}s.css({"-webkit-transform":"translate3d(0, "+t+", 0)","-webkit-transition":"all "+n+" "+r,"-moz-transform":"translate3d(0, "+t+", 0)","-moz-transition":"all "+n+" "+r,"-ms-transform":"translate3d(0, "+t+", 0)","-ms-transition":"all "+n+" "+r,transform:"translate3d(0, "+t+", 0)",transition:"all "+n+" "+r})};e.fn.glowEffect=function(t,n,r,i){if(i.innerWrapper==document){var s=e(this).find("body")}else{var s=e(this)}s.css({"box-shadow":t,"-webkit-transition":"all "+n+" "+r,"-moz-transition":"all "+n+" "+r,"-ms-transition":"all "+n+" "+r,transition:"all "+n+" "+r})};s.scroll(function(e){var t=s.scrollTop();if(t>o){if(s.scrollTop()+s.height()>=i.height()&&u=="off"){u="on";switch(r.animation){case"bounce":i.bounceEffect(r.bounceDistance*-1+"px",r.animDuration,r.animEasing,r);i.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(e){i.bounceEffect("0",r.animDuration,r.animEasing,r);i.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(e){u="off"})});break;case"glow":i.glowEffect(r.glowColor+" 0 -30px 50px -30px inset",r.animDuration,r.animEasing,r);i.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(e){i.glowEffect("none",r.animDuration,r.animEasing,r);i.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(e){u="off"})});break}}}if(ts){if(n+i>=t-1&&"off"==e)switch(e="on",t>n+i&&(o.horizontal?r.scrollLeft(t):r.scrollTop(t)),o.animation){case"bounce":a.bounceEffect(-1*o.distance,o.animDuration,o.animEasing,o),a.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(){a.bounceEffect("0",o.animDuration,o.animEasing,o),a.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(){e="off"})});break;case"glow":a.glowEffect(-1*o.distance,o.animDuration,o.animEasing,o),a.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(){a.glowEffect(null,o.animDuration,o.animEasing,o),a.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(){e="off"})})}}else if(s>n&&n+i!=t&&"off"==e&&0>=n)switch(e="on",o.animation){case"bounce":a.bounceEffect(o.distance,o.animDuration,o.animEasing,o),a.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(){a.bounceEffect("0",o.animDuration,o.animEasing,o),a.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(){e="off"})});break;case"glow":a.glowEffect(o.distance,o.animDuration,o.animEasing,o),a.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(){a.glowEffect(null,o.animDuration,o.animEasing,o),a.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(){e="off"})})}s=n})}}(window.jQuery);