Giter VIP home page Giter VIP logo

fancy-scroll's Introduction

#Fancy Scroll by Pete R. Add an Overflow Scroll Effect like on iOS/Android but for your website Created by Pete R., Founder of BucketListly

Notify Better

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari have been tested. IE and Mobile browsers have not been tested.

Basic Usage

To add an overflow scrolling effect with Fancy Scroll plugin, simply include the latest jQuery library together with jquery.fancy-scroll.js into your document's <head> and call the function as follows:

$(window).fancy_scroll({
  animation: "bounce" // Options available are bounce (like on iOS), or glow (like on Android 4.0+)
});

That's it. The function call above will add a bounce effect whenever you scroll up and reach the top/bottom of the website indicating the beginning/end of the page. With this script, you can customise these animations even further by using several options I had put in place for you to play around with. See more under Further Customisation.

Further Customisation

With Fancy Scroll, you can define animation's duration, colours (for glow effect), distance (for bounce effect) and even the CSS animation easing as you wish. Here are all the available options for you to play around with:

$(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.
 	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/
 });

Advanced Usage

Fancy Scroll can also be applied to divs rather than the whole document as well. All you have to do is prepare an html as follows:

<div class="container">
  <div class="innerWrapper">
    ...
  </div>
</div>

Make sure you have overflow-y scroll on the container. See example below:

.container {
  overflow:hidden;
  max-height: 400px;
}

Once all the markups are setup as shown above, you can call the function specifying the container and the innerWrapper as follows:

$(".container").fancy_scroll({
  innerWrapper: ".innerWrapper" // Let you define the selector of the inner div for the animation to be applied.
 });

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.

Other Resources

fancy-scroll's People

Contributors

peachananr avatar

Watchers

Yashi Lanka avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.