Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including xallarap with all npm packages installed. Try it out:

var xallarap = require("xallarap")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

xallarap v1.2.0

Super simple, lightweight parallax.

Xallarap

Super simple, lightweight parallax.

NPM version Github file size gzip file size license


Browser support

ChromeEdgeFirefoxSafari / iOSUC AndroidSamsung
60+14+53+10+11+6+

Note: This package does not support IE anymore.
If you're looking for IE11 support, you can install xallarap@^0.2.8
or make sure you're compiling down to ES5 with something like @babel/preset-env


Get Down to Business

npm install xallarap --save
import parallax from 'xallarap';


(start => {
    if (document.readyState !== 'loading') {
        start();
    } else {
        document.addEventListener('DOMContentLoaded', start);
    }
})(() => {
    parallax({
        foreground: {
            el: '.parallax',
            compensate: false,
            amount: 300
        },
        background: {
            el: '.parallax-background',
            image: '/path/to/some/image.jpg',
            amount: Math.ceil(window.innerHeight / 2)
        }
    });
});

All options can be assigned (or overwritten) with the data attributes seen below.

You can also use ES6 modules to take advantage or tree-shaking with Webpack or Rollup.

import {background as parallax} from 'xallarap';


(start => {
    if (document.readyState !== 'loading') {
        start();
    } else {
        document.addEventListener('DOMContentLoaded', start);
    }
})(() => {
    parallax({
        el: '.parallax-background',
        image: '/path/to/some/image.jpg',
        amount: Math.ceil(window.innerHeight / 2)
    });
});

Usage

options.foreground.el

Type: string|array|node Default: [data-parallax]

options.foreground.compensate [data-parallax-compensate]

Type: bool Default false

options.foreground.amount [data-parallax-amount]

Type: int Default: 300

options.background.el

Type: array|string|node Default: [data-parallax-background]

options.background.image [data-parallax-background]

Type: bool Default false

options.background.amount [data-parallax-amount]

Type: int Default: Math.ceil(window.innerHeight / 2)


Hello, World.

You can use this method to just toss some parallax on a page quickly.

<div data-parallax-background="https://example.com/path/to/some/image.jpg">
    <h1>
        <span data-parallax>Hello, world.</span>
    </h1>
</div>

Then, you can simply load the script and initial it.

<script src="https://unpkg.com/xallarap"></script>

<script>
    // Using jQuery
    $(document).ready(function() {
        window.xallarap();
    });

    // or vanilla JS
    (function(start) {
        if (document.readyState !== 'loading') {
            start();
        } else {
            document.addEventListener('DOMContentLoaded', start);
        }
    })(function() {
        window.xallarap();
    });
</script>

You’re all set!


MIT License. © 2017 Cornelius Ukena.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free