Git Product home page Git Product logo

jquery.kinetic's Introduction

jQuery.kinetic

Dave Taylor http://the-taylors.org The MIT License (MIT)

jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers.

Compatibility

This plugin works with jQuery and Zepto

Browsers

  • ie: 7,8,9
  • firefox: 3.6,4,5
  • chrome: 13
  • safari: 5
  • iOS Safari: 4

Demos

Take a look at a demo on http://the-taylors.org/jquery.kinetic.

Changes

1.3

  • IE bug fixes when dragging images

  • Adding extensibility for methods by attaching functions to jQuery.

      // add the method
      $.kinetic.callMethods.do = function(settings, options){
          // method functionality
      };
    
      // use the method
      $('#elem').kinetic('do', { ... });
    
  • Added stop method

  • Fix bug with ignored axis triggering animation frames

Notes

The scrollbar plugin is still very much an alpha version.

Options

slowdown    {number}    default: 0.9    This option affects the speed at which the scroll slows
x           {string}    default: true   Toggles movement along the x axis
y           {string}    default: true   Toggles movement along the y axis
maxvelocity {number}    default: 40     This option puts a cap on speed at which the container
                                        can scroll
throttleFPS {number}    default: 60     This adds throttling to the mouse move events to boost
                                        performance when scrolling
movingClass {object} 
    up:     {string}    default: 'kinetic-moving-up'
    down:   {string}    default: 'kinetic-moving-down'
    left:   {string}    default: 'kinetic-moving-left'
    right:  {string}    default: 'kinetic-moving-right'

deceleratingClass {object} 
    up:     {string}    default: 'kinetic-decelerating-up'
    down:   {string}    default: 'kinetic-decelerating-down'
    left:   {string}    default: 'kinetic-decelerating-left'
    right:  {string}    default: 'kinetic-decelerating-right'

Listeners:  All listeners are called with:
            - this = jQuery object holding the scroll container
            - a single settings argument which are all the options and  
              { scrollLeft, scrollTop, velocity, velocityY }

moved       {function(settings)}           A function which is called on every move
stopped     {function(settings)}           A function which is called once all 
                                           movement has stopped

Methods:    You can call methods by running the kinetic plugin
            on an element which has already been activated.

            eg  $('#wrapper').kinetic(); // activate
                $('#wrapper').kinetic('methodname', options);

start       Start movement in the scroll container at a particular velocity.
            This velocity will not slow until the end method is called.

            The following line scrolls the container left.
            $('#wrapper#).kinetic('start', { velocity: -30 });

            The following line scrolls the container right.
            $('#wrapper#).kinetic('start', { velocity: 30 });

            The following line scrolls the container diagonally.
            $('#wrapper#).kinetic('start', { velocity: -30, velocityY: -10 });

end         Begin slowdown of any scrolling velocity in the container.
            $('#wrapper#).kinetic('end');

stop        Stop the scrolling immediately

Add your own method:
            // add the method
            $.kinetic.callMethods.do = function(settings, options){
                // method functionality
            };

            // use the method
            $('#elem').kinetic('do', { ... });

jquery.kinetic's People

Contributors

cc-lam avatar davetayls avatar

Stargazers

 avatar

Watchers

 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.