https://github.com/bnhovde/jquery.gloryscroll

jQuery scroll-to-animate helper. Animates CSS properties based on scrolltop. (Also animates spritesheets)
https://github.com/bnhovde/jquery.gloryscroll

Last synced: 13 days ago
JSON representation

jQuery scroll-to-animate helper. Animates CSS properties based on scrolltop. (Also animates spritesheets)

• Host: GitHub
• URL: https://github.com/bnhovde/jquery.gloryscroll
• Owner: bnhovde
• License: mit
• Created: 2014-05-07T19:59:51.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-05-26T18:00:18.000Z (over 10 years ago)
• Last Synced: 2024-03-09T04:06:01.126Z (10 months ago)
• Language: JavaScript
• Size: 195 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
gloryScroll.js

=====================

Hola! I am a lightweight utility library for animating CSS properties on scroll. 

I can also animate a sprite sheets on scroll, just set the `sprite` property to true.

I rely on jQuery to do my thing.

----------

Installation

---------

```html

```

Usage

---------

Example 1: Animate opacity, fading out element when page is 500px from top.

```html

$('el').gloryScroll({ start: 0, stop: 500, attribute: 'opacity', startVal: '1.0', stopVal: '0.0' });

```

Example 2: Animate 3D transform, moving element down slowly as you scroll, similar to the [medium.com](http://medium.com) headline effect.

```html

$('el').gloryScroll({ start: 0, stop: 600, attribute: 'transform', startVal: 'translate3D( 0px, 0px, 0px )', stopVal: 'translate3D( 0px, 150px, 0px )' });

```

Example 3: Animate a sprite sheet when scrolling.

```html

$('el').gloryScroll({ start: 0, stop: 500, sprite: true, spriteFrames: '16', spriteHeight: '2000' });

```

Parameters

---------

        attribute     : 'top',  // CSS attribute type

        start         : 0,      // px from top to start the animation

        stop          : 200,    // px from top to stop the animation

        startVal      : 100,    // CSS property value at the start of of scrolling area

        stopVal       : 200,    // CSS property value at the end of the scrolling area

        sprite        : false,  // (Optional) Set to true if sprite is to be animated

        spriteFrames  : 16,     // (Optional) Sprite frames

        spriteHeight  : 1985    // (Optional) Height of sprite image (px)

        updateRate    : 10      // (Optional) Updaterate (in ms) on scroll

Notes

---------

 

 - When animating multiple values, make sure you leave a space before each value, example: ``` translate3D( 0px, 32px, 0px); ``` and not ``` translate3D(0px,32px,0px); ```

 - There's probably a hundred tools that does this better, but this is what i use for my projects when i need to jazz things up a little, and it has served me well so far. This is why I am sharing it here.

 - Touch device support is a no-go at the moment.

Some performance tips

---------

Taken from Dave Gamache's [article](https://medium.com/@dhg/82ced812e61c) on parallax performance.

- Only use properties that are cheap for browsers to animate. Those are, more or less: translate3d, scale, rotation and opacity. Anything else and you’re probably not going to be running at 60fps.

- Animate only absolutely and fixed position elements. (See article for explanation)

- Avoid background-size:cover unless you’re sure it’s not affecting performance. (See article for explanation)