jquery.scrollfx

A jQuery plugin that adds some cool effects when a user scrolls down the page.

What is basically does is calculate the distance from the top to bottom of the selector when the user has scrolled down to determine how the selector should change it's appearance with CSS attributes.

I wrote the plugin for a private project, but I thought why not share it with the world.

If you want to see a working example visit http://marksten.github.io/jquery.scrollfx

NOTE: This plugin is currently in development.

Installation

NPM

npm install jquery.scrollfx --save

Manually

Find jquery.scrollfx.js in the root directory. Make sure to include it after jQuery.

Usage

$(selector).scrollFx(function() {
  scaleElements:    '',   // required
  opacityElements:  '',   // required
  precision:        ''    // optional
});

Options

Here is a list of all available options.

scaleElements (string, default: '')

The elements that should be scaled inside of the wrapper. Joined with a ','.

opacityElements (string, default: '')

The elements that should change their opacity attribute. Joined with a ','.

precision (integer, default: 10)

This option effects the overall performance of your website. The higher the precision, the 'smoother' the effects. If you don't want to overheat your users' GPU or CPU your should reduce this number.

Compatibility

This plugin has been tested on Google Chrome, Safari (retina display) and on an iPhone6.