https://github.com/ariya/kinetic

Kinetic Scrolling with JavaScript
https://github.com/ariya/kinetic

Last synced: about 1 month ago
JSON representation

Kinetic Scrolling with JavaScript

• Host: GitHub
• URL: https://github.com/ariya/kinetic
• Owner: ariya
• License: mit
• Archived: true
• Created: 2013-08-07T07:04:04.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2019-05-30T12:23:01.000Z (over 5 years ago)
• Last Synced: 2024-05-02T01:07:56.350Z (7 months ago)
• Language: HTML
• Homepage: http://ariya.github.io/kinetic/
• Size: 1.04 MB
• Stars: 810
• Watchers: 52
• Forks: 110
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE-MIT

Awesome Lists containing this project

• awesome-indo-projects - Kinetic - Kinetic Scrolling with JavaScript. (JavaScript)
• awesome-indonesia-repo - Kinetic - Kinetic Scrolling with JavaScript. (JavaScript)
• awesome-vietnam-repo - Kinetic - Kinetic Scrolling with JavaScript. (JavaScript)

README

        
# JavaScript Kinetic Scrolling

\#1: **Basic drag-and-scroll** ([demo](http://ariya.github.io/kinetic/1/), [explanation](http://ariya.ofilabs.com/2013/08/javascript-kinetic-scrolling-part-1.html)).


No momentum effect yet, just a plain scroll view.

\#2: **Flick list** with momentum ([demo](http://ariya.github.io/kinetic/2), [explanation](http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html)).


Smooth acceleration and deceleration.

\#3: **Snap-to-grid** flick list ([demo](http://ariya.github.io/kinetic/3), [explanation](http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-3.html)).


Inertial deceleration to stop at the right position.

\#4: **Horizontal swipe** to browse photos ([demo](http://ariya.github.io/kinetic/4), [explanation](http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-4.html)).


Parallax effect included.

\#5: **Cover Flow** with CSS transform ([demo](http://ariya.github.io/kinetic/5), [explanation](http://ariya.ofilabs.com/2014/01/javascript-kinetic-scrolling-part-5-cover-flow-effect.html)).


Flipping images in 3-D space

\#6: _Coming soon_.