Webcraft Plugins

$.ScrollCraft({
    scrollRange: [0, 0.25],
    domain: [0, 120],
    onUpdate: function(v) {
        // "v" will change from 0 to 120
        // based on the current "scrollRange"
        $("#my-element").css({
            "top" : v
        });
    }
});

ScrollCraft.js

Free and lightweight script that enables you to create awesome parallax and other scrolling behaviours.

Get It

bower install scroll-craft

Examples

The following examples show a couple of ways you can use this script. You can get constant updates while the page is scrolled. The script simply interpolates a value and the rest is up to you.

Or you might just need a single update as soon as the scroll reaches a certain position.

Scroll Down

This is an example of how you would continuously update a CSS property based on scroll position.

$.ScrollCraft({
    scrollRange: [0.15, 0.2],
    domain: [0, 100],
    onUpdate: function(v) {
        $("#line").css({
            "height" : v + "%"
        });
    }
});
$.ScrollCraft({
    scrollRange: [0, 0.25],
    onComplete: function() {
        $("#arrow").addClass("active")
    }
});

And that’s how you use only the onComplete() callback to add a class to an element.

Options

Option Name Default Description
scrollRange [0, 0]

The scrolling behaviour will occur between scrollRange[0] and scrollRange[1] If normalizeScrollRange is disabled, this parameter will take pixels It's best to enable the "debug" option to set proper values for scrollRange.

normalizeScrollRange true

This option will compensate for different screen sizes. Note that if this is set to true, the scrollRange parameter works with relative values to the screen size, instead of absolute pixel values. HIGHLY RECOMMENDED to leave this to "true" to achieve consistent results accross different screen sizes!

domain [0, 1]

An arbitrary variable, returned with the onUpdate() callback, that changes based on the current scroll position.

loop true

If set to false, the "returned value" will stop changing after the scroll position goes past the limit, even if the user scrolls back.

smooth true

If set to true, the "returned value" will get updated smoothly until it reaches its desired value. Otherwise, it will jump straight to what its value is supposed to be. This option makes the scrolling behaviour much more noticeable when the browser doesn't have smooth scrolling.

smoothDuration 0.33 (0 - 1)

How smooth should the "returned value" interpolate. Less is slower interpolation, more is quicker interpolation.

onStart()

Called when the scroll range goes past scrollRange[0]

onUpdate()

Called continuously as the user scrolls and the scroll position is between scrollRange[0] and scrollRange[1]

onComplete()

Called when the scroll position becomes greater than scrollRange[1]

debug false

If enabled, it will log the current scroll position of the window to the console, so you can more easily set the "scrollRange" values.