From f920cfc0ae4a3ab04d8e35b2a5d5d9d2f8347b0d Mon Sep 17 00:00:00 2001 From: Ghanan Gowripalan Date: Mon, 21 Sep 2015 12:17:15 -0400 Subject: [PATCH 1/7] Formatting --- jquery.fancy-scroll.js | 38 +++++++++++++++++--------------------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/jquery.fancy-scroll.js b/jquery.fancy-scroll.js index b87534f..3d3b9f0 100644 --- a/jquery.fancy-scroll.js +++ b/jquery.fancy-scroll.js @@ -22,7 +22,7 @@ innerWrapper: document }; - $.fn.fancy_scroll = function(options){ + $.fn.fancy_scroll = function(options) { var settings = $.extend({}, defaults, options), el = $(settings.innerWrapper), container = $(this), @@ -32,7 +32,6 @@ $.fn.bounceEffect = function(px, s, anim, settings) { - if (settings.innerWrapper == document) { var selector = $(this).find("body") } else { @@ -50,6 +49,8 @@ "transition": "all " + s + " " + anim }) } + + $.fn.glowEffect = function(shadow, s, anim, settings) { if (settings.innerWrapper == document) { var selector = $(this).find("body") @@ -67,11 +68,10 @@ } - - container.scroll(function(event){ + 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") { + if (pos > posWas) { //if the user is scrolling down... + if ((container.scrollTop() + container.height() >= el.height()) && status == "off") { status = "on" switch (settings.animation) { case "bounce": @@ -82,7 +82,8 @@ status = "off" }); }); - break; + break; + case "glow": el.glowEffect(settings.glowColor + " 0 -30px 50px -30px inset", settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { @@ -91,14 +92,12 @@ 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... + if ((container.scrollTop() + container.height() != el.height()) && status == "off") { + if (container.scrollTop() <= 0) { status = "on" switch (settings.animation) { case "bounce": @@ -109,7 +108,8 @@ status = "off" }); }); - break; + break; + case "glow": el.glowEffect(settings.glowColor + " 0 30px 50px -30px inset", settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { @@ -118,19 +118,15 @@ status = "off" }); }); - break; + break; } - - } } - } + } + posWas = pos; - }); - } - }(window.jQuery); From 7a60cef85599fdf5093a09038f8b1cff8d6febcc Mon Sep 17 00:00:00 2001 From: Ghanan Gowripalan Date: Mon, 21 Sep 2015 13:12:51 -0400 Subject: [PATCH 2/7] Added horizontal effects --- demo.html | 58 +++++++++++++++++++++++++++++++-- jquery.fancy-scroll.js | 73 +++++++++++++++++++++++++++++++----------- 2 files changed, 109 insertions(+), 22 deletions(-) diff --git a/demo.html b/demo.html index 0e4da08..c0f2bd3 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 { @@ -239,6 +251,23 @@ animDuration: "0.3s", animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", }); + + $(".small-main3").fancy_scroll({ + innerWrapper: ".innerWrapper", + animation: "glow", + direction: "horizontal", + animDuration: "0.3s", + animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", + }); + + $(".small-main4").fancy_scroll({ + innerWrapper: ".innerWrapper", + animation: "bounce", + direction: "horizontal", + bounceDistance: 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 3d3b9f0..120e1aa 100644 --- a/jquery.fancy-scroll.js +++ b/jquery.fancy-scroll.js @@ -15,6 +15,7 @@ var defaults = { animation: "bounce", + direction: "vertical", bounceDistance: 50, glowColor: "#02A1FA", animDuration: "0.2s", @@ -38,16 +39,29 @@ 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.direction == "horizontal") { + selector.css({ + "-webkit-transform": "translate3d(" + px + ", 0, 0)", + "-webkit-transition": "all " + s + " " + anim, + "-moz-transform": "translate3d(" + px + ", 0, 0)", + "-moz-transition": "all " + s + " " + anim, + "-ms-transform": "translate3d(" + px + ", 0, 0)", + "-ms-transition": "all " + s + " " + anim, + "transform": "translate3d(" + px + ", 0, 0)", + "transition": "all " + s + " " + anim + }) + } else { + 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 + }) + } } @@ -69,9 +83,20 @@ 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") { + var pos, container_hw, el_hw; + + if (settings.direction == "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) && status == "off") { status = "on" switch (settings.animation) { case "bounce": @@ -85,7 +110,12 @@ break; case "glow": - el.glowEffect(settings.glowColor + " 0 -30px 50px -30px inset", settings.animDuration, settings.animEasing, settings); + if (settings.direction == "horizontal") { + el.glowEffect(settings.glowColor + " -30px 0 50px -30px inset", settings.animDuration, settings.animEasing, settings); + } else { + el.glowEffect(settings.glowColor + " 0 -30px 50px -30px inset", settings.animDuration, settings.animEasing, settings); + } + el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { el.glowEffect("none", settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { @@ -95,15 +125,15 @@ break; } } - } else 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.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" }); @@ -111,7 +141,12 @@ break; case "glow": - el.glowEffect(settings.glowColor + " 0 30px 50px -30px inset", settings.animDuration, settings.animEasing, settings); + if (settings.direction == "horizontal") { + el.glowEffect(settings.glowColor + " 30px 0 50px -30px inset", settings.animDuration, settings.animEasing, settings); + } else { + el.glowEffect(settings.glowColor + " 0 30px 50px -30px inset", settings.animDuration, settings.animEasing, settings); + } + el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { el.glowEffect("none", settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { From 1ab31e0ce569275027c526fc229997aa014e7dec Mon Sep 17 00:00:00 2001 From: Ghanan Gowripalan Date: Mon, 21 Sep 2015 13:28:37 -0400 Subject: [PATCH 3/7] Allow for dynamic width/height of glow, added my info to readme and js file, updated version to 1.1 (in comments) --- README.md | 13 +++++-- demo.html | 4 +-- jquery.fancy-scroll.js | 82 +++++++++++++++++++++++------------------- 3 files changed, 59 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index e52e2ae..f19980f 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({ + direction: "horizontal" // Let you define the scrolling direction which you want to apply the effect for. + }); +```` + ## Other Resources - Tutorial (Coming Soon) - [CSS Easing generator by Matthew Lein](http://matthewlein.com/ceaser/) diff --git a/demo.html b/demo.html index c0f2bd3..9740379 100644 --- a/demo.html +++ b/demo.html @@ -247,7 +247,7 @@ $(".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)", }); @@ -264,7 +264,7 @@ innerWrapper: ".innerWrapper", animation: "bounce", direction: "horizontal", - bounceDistance: 100, + distance: 100, animDuration: "0.3s", animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", }); diff --git a/jquery.fancy-scroll.js b/jquery.fancy-scroll.js index 120e1aa..909bc73 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 @@ -16,7 +16,7 @@ var defaults = { animation: "bounce", direction: "vertical", - bounceDistance: 50, + distance: 50, glowColor: "#02A1FA", animDuration: "0.2s", animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", @@ -32,7 +32,7 @@ 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 { @@ -41,44 +41,64 @@ if (settings.direction == "horizontal") { selector.css({ - "-webkit-transform": "translate3d(" + px + ", 0, 0)", + "-webkit-transform": "translate3d(" + d + "px, 0, 0)", "-webkit-transition": "all " + s + " " + anim, - "-moz-transform": "translate3d(" + px + ", 0, 0)", + "-moz-transform": "translate3d(" + d + "px, 0, 0)", "-moz-transition": "all " + s + " " + anim, - "-ms-transform": "translate3d(" + px + ", 0, 0)", + "-ms-transform": "translate3d(" + d + "px, 0, 0)", "-ms-transition": "all " + s + " " + anim, - "transform": "translate3d(" + px + ", 0, 0)", + "transform": "translate3d(" + d + "px, 0, 0)", "transition": "all " + s + " " + anim }) } else { selector.css({ - "-webkit-transform": "translate3d(0, " + px + ", 0)", + "-webkit-transform": "translate3d(0, " + d + "px, 0)", "-webkit-transition": "all " + s + " " + anim, - "-moz-transform": "translate3d(0, " + px + ", 0)", + "-moz-transform": "translate3d(0, " + d + "px, 0)", "-moz-transition": "all " + s + " " + anim, - "-ms-transform": "translate3d(0, " + px + ", 0)", + "-ms-transform": "translate3d(0, " + d + "px, 0)", "-ms-transition": "all " + s + " " + anim, - "transform": "translate3d(0, " + px + ", 0)", + "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.direction == "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, + }) + } } @@ -100,7 +120,7 @@ status = "on" 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) { @@ -110,14 +130,9 @@ break; case "glow": - if (settings.direction == "horizontal") { - el.glowEffect(settings.glowColor + " -30px 0 50px -30px inset", settings.animDuration, settings.animEasing, settings); - } else { - 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" }); @@ -131,7 +146,7 @@ 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("0", settings.animDuration, settings.animEasing, settings); el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { @@ -141,14 +156,9 @@ break; case "glow": - if (settings.direction == "horizontal") { - el.glowEffect(settings.glowColor + " 30px 0 50px -30px inset", settings.animDuration, settings.animEasing, settings); - } else { - 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" }); From 5be5957df3c49f12106fa2c4f1d3ddb019d6137e Mon Sep 17 00:00:00 2001 From: Ghanan Gowripalan Date: Mon, 21 Sep 2015 13:39:37 -0400 Subject: [PATCH 4/7] innerWrapper should be within container --- jquery.fancy-scroll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.fancy-scroll.js b/jquery.fancy-scroll.js index 909bc73..f1cad5a 100644 --- a/jquery.fancy-scroll.js +++ b/jquery.fancy-scroll.js @@ -25,7 +25,7 @@ $.fn.fancy_scroll = function(options) { var settings = $.extend({}, defaults, options), - el = $(settings.innerWrapper), + el = $(this).find(settings.innerWrapper), container = $(this), posWas = 0, status = "off"; From 0f42febb942d725ec72981c33a941175c7bc3588 Mon Sep 17 00:00:00 2001 From: Ghanan Gowripalan Date: Mon, 21 Sep 2015 14:51:14 -0400 Subject: [PATCH 5/7] Boolean horizontal flag --- README.md | 2 +- demo.html | 4 ++-- jquery.fancy-scroll.js | 11 +++++------ 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index f19980f..e4474fd 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ Now, your container div will finally have a bounce overflow effect just like you 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({ - direction: "horizontal" // Let you define the scrolling direction which you want to apply the effect for. + horizontal: true // Let you define the scrolling direction to be horizontal. }); ```` diff --git a/demo.html b/demo.html index 9740379..0af5236 100644 --- a/demo.html +++ b/demo.html @@ -255,7 +255,7 @@ $(".small-main3").fancy_scroll({ innerWrapper: ".innerWrapper", animation: "glow", - direction: "horizontal", + horizontal: true, animDuration: "0.3s", animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", }); @@ -263,7 +263,7 @@ $(".small-main4").fancy_scroll({ innerWrapper: ".innerWrapper", animation: "bounce", - direction: "horizontal", + horizontal: true, distance: 100, animDuration: "0.3s", animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", diff --git a/jquery.fancy-scroll.js b/jquery.fancy-scroll.js index f1cad5a..3c9026a 100644 --- a/jquery.fancy-scroll.js +++ b/jquery.fancy-scroll.js @@ -15,7 +15,7 @@ var defaults = { animation: "bounce", - direction: "vertical", + horizontal: false, distance: 50, glowColor: "#02A1FA", animDuration: "0.2s", @@ -31,7 +31,7 @@ status = "off"; if (settings.innerWrapper != document) var el = container.find($(settings.innerWrapper)); - + $.fn.bounceEffect = function(d, s, anim, settings) { if (settings.innerWrapper == document) { var selector = $(this).find("body") @@ -39,7 +39,7 @@ var selector = $(this) } - if (settings.direction == "horizontal") { + if (settings.horizontal) { selector.css({ "-webkit-transform": "translate3d(" + d + "px, 0, 0)", "-webkit-transition": "all " + s + " " + anim, @@ -64,7 +64,6 @@ } } - $.fn.glowEffect = function(d, s, anim, settings) { if (settings.innerWrapper == document) { var selector = $(this).find("body") @@ -73,7 +72,7 @@ } if (d) { - if (settings.direction == "horizontal") { + if (settings.horizontal) { selector.css({ "box-shadow": settings.glowColor + " " + d + "px 0 50px -30px inset", "-webkit-transition": "all " + s + " " + anim, @@ -105,7 +104,7 @@ container.scroll(function(event) { var pos, container_hw, el_hw; - if (settings.direction == "horizontal") { + if (settings.horizontal) { pos = container.scrollLeft(); container_hw = container.width(); el_hw = el.width(); From a97acc4bad94729be21e62fe7a38c0248dbdc647 Mon Sep 17 00:00:00 2001 From: Ghanan Gowripalan Date: Mon, 21 Sep 2015 15:12:56 -0400 Subject: [PATCH 6/7] Fix an issue where when scrolling left/down doesnt scroll completly by 1px --- jquery.fancy-scroll.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/jquery.fancy-scroll.js b/jquery.fancy-scroll.js index 3c9026a..8ab7bd3 100644 --- a/jquery.fancy-scroll.js +++ b/jquery.fancy-scroll.js @@ -64,6 +64,7 @@ } } + $.fn.glowEffect = function(d, s, anim, settings) { if (settings.innerWrapper == document) { var selector = $(this).find("body") @@ -115,8 +116,19 @@ } if (pos > posWas) { // if the user is scrolling down/left... - if ((pos + container_hw >= el_hw) && status == "off") { + 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.distance * -1, settings.animDuration, settings.animEasing, settings); @@ -143,6 +155,7 @@ if ((pos + container_hw != el_hw) && status == "off") { if (pos <= 0) { status = "on" + switch (settings.animation) { case "bounce": el.bounceEffect(settings.distance, settings.animDuration, settings.animEasing, settings); @@ -172,5 +185,3 @@ }); } }(window.jQuery); - - From 82a3d32d8f273c9c85a2f7a8a5f1b797ced9619f Mon Sep 17 00:00:00 2001 From: Ghanan Date: Mon, 21 Sep 2015 21:28:11 -0400 Subject: [PATCH 7/7] Update jquery.fancy-scroll.min.js Minified fancy-scroll with changes --- jquery.fancy-scroll.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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);