I have always been fascinated by the overflow scrolling effects that appears when you’ve reached the end of a list on an iPhone and Android. A simple interface interaction like a bounce can magically make your app seems more responsive.
Today, I have decided to build a plugin that lets you add such effects to your website called FancyScroll.js. You can add the overflow effects to the whole page or any overflow:scroll divs on your website, customize the colors, the animation, or even the animation easing.
Note: This plugin has only been tested on Windows’ and OSX’s Chrome, Firefox, Safari and IE10.
[tut demo=”https://onextrapixel.com/examples/scroll-overflow-effect-with-fancyscroll” download=”https://onextrapixel.com/examples/scroll-overflow-effect-with-fancyscroll/scroll-overflow-effect-with-fancyscroll.zip”]
Create an Overflow Scroll Effect with FancyScroll.js
Note: This plugin has only been tested on Windows’ and OSX’s Chrome, Firefox, Safari and IE10.
[tut demo=”https://onextrapixel.com/examples/scroll-overflow-effect-with-fancyscroll” download=”https://onextrapixel.com/examples/scroll-overflow-effect-with-fancyscroll/scroll-overflow-effect-with-fancyscroll.zip”]
How does it work?
This plugin is extremely simple to understand. First I was planning to use a JS animation to create the bounce effect but I found out early on that it wasn’t as smooth as using the CSS3 transform and transition styles. Plus, it will be easier to maintain and modify for developers out there who are looking to experiment around with Fancy Scroll. For the interaction part, I basically detect your scroll direction and see if it hits the top or the bottom of the page. If it hits the top, and the direction is up then add a transform translate3d style that moves the container (in this case the body) downward and back up with easing effect to create a bounce overflow effect and vice versa.
How-Tos
First things first, make sure you’ve included: the latest jQuery plugin available here, and the jquery.fancy-scroll.js found here into your document’s and all you have to do is call a function as shown below:
JS:
$(window).fancy_scroll({
animation: "bounce"
});
That is it. Pretty simple right? Now, your whole website will have a bounce overflow effect like you see on iPhone applications. Of course there are further customizations that can be made to fit your needs such as:
- animation: There are 2 options for you to choose from. “Bounce” which replicates the overflow animation you see on iPhone and “Glow” which replicates the overflow effect you see on Android 4.0+. The default value is “bounce”.
- bounceDistance (For Bounce animation only) which allows you to determine how far the bounce effect would go in pixels. The default value is “50”. Note: Do not add “px” behind the number. Only use plain integers to define the distance.
- glowColor (For Glow animation only) will let you define the glow colors that will appear when you’ve reached the top/bottom of the page. The default value is “#02A1FA”.
- animDuration will let you define how long the animation will perform each time. This will basically be fed to the CSS3 transition style so the input can be in seconds (“0.2s”) or milliseconds (“200ms”). Default value is “0.2s”.
- animEasing will let you decide which easing effect you want your page to animate. Again, this will be fed to the CSS3 transition style so the available options are linear, ease-in, ease-out, ease-in-out or you can generate it manually with this tool created by Matthew Lein
- innerWrapper will let you define a selector of the inner div for the animation to be applied. This DOESN’T apply to you if you want the whole page to have the overflow effect. ONLY applies if you want certain div containers to have such effects. Default value is
.innerWrapper.
For Further Customization
Fancy Scroll can also be applied to div containers rather than the whole document as well. All you have to do is prepare the HTML, CSS and JS as follows:
HTML
<div class="container">
<div class="innerWrapper">
...
</div>
</div>
CSS:
.container {
overflow:hidden;
max-height: 400px;
}
JS:
$(".container").fancy_scroll({
innerWrapper: ".innerWrapper"
});
As you can see here, with innerWrapper defined, the scrolling animation will now apply to the new container we call the function on correctly. More than that, you can apply these effects on as many divs as you want. You can see an example in our fifth demo.
[tut demo=”https://onextrapixel.com/examples/scroll-overflow-effect-with-fancyscroll” download=”https://onextrapixel.com/examples/scroll-overflow-effect-with-fancyscroll/scroll-overflow-effect-with-fancyscroll.zip”]
Conclusion
And that’s all the features Fancy Scroll provides. I hope you guys enjoy this tutorial. I can’t wait to see what you will come up with using this script. If you have any questions, suggestions or even have something to show, feel free to let us know in the comments section below.
