https://github.com/jcblw/scrollimate

:do_not_litter: Jquery Plugin, Animate while you scroll
https://github.com/jcblw/scrollimate

Last synced: 24 days ago
JSON representation

:do_not_litter: Jquery Plugin, Animate while you scroll

• Host: GitHub
• URL: https://github.com/jcblw/scrollimate
• Owner: jcblw
• Created: 2011-11-20T07:12:15.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2012-04-29T04:38:12.000Z (over 12 years ago)
• Last Synced: 2024-10-11T14:38:56.057Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 102 KB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Scrollimate

Scrollimate will animate while you scroll. Scrollimate is built for the jQuery library.

##Supported CSS Properties

* height

* width

* margin -> all in singular form *no shorthand*

* border-width

* padding -> all in singular form *no shorthand*

* top

* bottom

* left

* right

* border-radius

* transform -> All rotates work

*  *any color property if using rgb*

*  *and many more with a numeric single value*

##Usage

Scrolimate has three required parameters. First is the hot spots, this is a start point and an end point. This will define the length of the animation. Next is the start point. This will be a set of css properties that a relativly simple, and are in pixel units. Last is the end point, this is a list of css properties that will be end product of the tranformed element. In a simple senario it will look something like this.

    $('.scrollme')

        .scrollimate(

        // The range of animation in pixels

        {

            start: 1

            end: 1000

        },

        // The CSS property to tranform FROM

        {

            opacity: 0,

            width: '0%',

            height: '20px',

            background : 'rgb(0,0,0)'

        },

        // The CSS property to tranform TO

        {

            opacity:1

            width: '100%',

            height: '20px'

            background : 'rgb(255,255,10)'

        },

        {

            start: function(){

                alert('I started scrollimating');

            },

            end: function(){

                alert('Im done scrollimating');

            }

        }

        );

        

##TODO - Feature-list

_Advanced units_

Eg. Using CSS rotate, box shadow, borders , and maybe even rgb and hsl

_Parent-Scroll_

Right now its always based off of window being scroll i think it could be nice if there was a way delegate the scroll tracking to specific elements as well.