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.
<!-- Include js plugin -->
<script src="scripts/jQuery.gloryScroll.js"></script>
Example 1: Animate opacity, fading out element when page is 500px from top.
$('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 headline effect.
$('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.
$('el').gloryScroll({ start: 0, stop: 500, sprite: true, spriteFrames: '16', spriteHeight: '2000' });
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
- When animating multiple values, make sure you leave a space before each value, example:
translate3D( 0px, 32px, 0px);
and nottranslate3D(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.
Taken from Dave Gamache's article 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)